繁体   English   中英

动画视图可见性向下推视图

[英]Animate View Visibility Pushing down Views Below

我目前正在使用材料的TextInputLayout的自定义实现来实现一个相当简单的登录屏幕。 我正在使用自定义视图来显示字段错误。 这里的问题是,当我将视图从 GONE 设置为 VISIBLE 时,它会移动其上方和下方的字段。 我只希望下面的视图向下移动,并将上面的视图保持在同一个 position 中。

我曾尝试使用ViewPropertyAnimator但这只是动画淡入和淡出错误视图。

errorView.visibility = View.VISIBLE
        errorView.animate()
            .alpha(1f)
            .setListener(null)
            .duration = 300
errorView.animate()
            .alpha(0.0f)
            .setDuration(300)
            .setListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator) {
                    super.onAnimationEnd(animation)
                    errorView.visibility = View.GONE
                }
            })

本质上,我希望发生以下情况:

---------------------
| Email             |
---------------------  
                     <- Error to show here and move password field down
---------------------  |
| Password          |  v
---------------------


Result:
---------------------
| Email             |  <- Stay in same position
---------------------
----------------------
|Email must be valid | <- Error
----------------------

---------------------  |
| Password          |  v
---------------------

下面是一个 XML 布局示例来说明这一点。 请注意,这与我的布局不匹配,但仍然显示相同的问题。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"/>

        <TextView
            android:id="@+id/errorView"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="Email must be valid"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:visibility="gone"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"/>

        <Button
            android:id="@+id/login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:text="Login"/>
    </LinearLayout>

</RelativeLayout>

在我的用例中,所有子视图都以父视图为中心,因此无法实现,因为父视图(向上和向下)推动子视图,以便为错误视图创建空间同时保留所有意见居中

我选择的方法是为email 字段指定上边距,而不是在父视图中将子视图居中。

这样,当父级添加错误视图时(可见性更改后),它只会按预期下推 email字段下的所有视图。

在父布局上使用 XML 标记android:animateLayoutChanges="true"

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM