ViewFlipper outAnimation失效问题及文本滑动切换需求

嘿，我来帮你解决这个头疼的问题——ViewFlipper的out动画不生效，还要让ConstraintLayout跟着TextView高度变化有平滑动画，对吧？咱们一步步来：

一、先把ViewFlipper的滑入滑出动画给掰正 #

首先，动画文件的参数和布局配置很关键，很多时候失效都是因为这俩没弄对：

1. 写对动画资源文件 #

在res/anim文件夹下建两个动画文件：

• slide_in_left.xml（左滑入效果）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="-100%p" <!-- 从父容器左侧外滑入 -->
        android:toXDelta="0"/>
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

• slide_out_right.xml（右滑出效果）：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="100%p"/> <!-- 滑到父容器右侧外 -->
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

这里要注意用%p，是相对于父容器的百分比，这样不管屏幕多大，都能完全滑入滑出。

2. 调整布局，避免动画“隐形” #

之前可能因为TextView占满屏幕，导致滑出动画看不见，所以要让TextView宽度自适应，并且居中：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent_cl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"> <!-- 这句是让布局高度变化有动画的关键 -->

    <ViewFlipper
        android:id="@+id/text_flipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="第一个测试文本"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="第二个更长的测试文本，用来验证高度变化动画"/>

    </ViewFlipper>

</androidx.constraintlayout.widget.ConstraintLayout>

给父ConstraintLayout加android:animateLayoutChanges="true"，就能自动帮我们处理高度变化的过渡动画。

3. 代码里手动控制动画时机（比默认flipInterval更准） #

默认的setFlipInterval会把动画时长算进去，导致停留时间不准，咱们手动用Handler控制，确保文本刚好停留3秒：

class MainActivity : AppCompatActivity() {
    private lateinit var textFlipper: ViewFlipper
    // 替换成你要展示的文本列表
    private val textList = listOf("第一个文本", "第二个超长文本，测试高度变化", "第三个短文本")
    private var currentIndex = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textFlipper = findViewById(R.id.text_flipper)
        // 批量添加文本View到ViewFlipper里
        textList.forEach { text ->
            val textView = TextView(this).apply {
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                )
                gravity = Gravity.CENTER
                this.text = text
            }
            textFlipper.addView(textView)
        }

        // 绑定动画
        textFlipper.inAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_in_left)
        textFlipper.outAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_out_right)

        // 启动循环展示
        startFlipCycle()
    }

    private fun startFlipCycle() {
        // 停留3秒后切换文本
        Handler(Looper.getMainLooper()).postDelayed({
            // 切换到下一个文本，循环
            currentIndex = if (currentIndex == textList.size - 1) 0 else currentIndex + 1
            textFlipper.setDisplayedChild(currentIndex)
            // 递归调用，一直循环
            startFlipCycle()
        }, 3000) // 这里就是你要的3秒停留时间
    }
}

二、排查outAnimation失效的常见坑 #

如果还是看不到滑出动画，检查这几点：

• 确认TextView的宽度是wrap_content，如果是match_parent，滑出时整个View占满屏幕，视觉上看不到变化；
• 动画里的toXDelta必须是100%p，不是100%——100%是相对于TextView自身宽度，%p才是相对于父容器，这样才能完全滑出屏幕；
• 不要在动画执行期间删除ViewFlipper的子View，确保所有文本View都一直存在。

三、自定义布局高度变化的动画（可选） #

如果默认的布局过渡动画不够满意，可以自己自定义：

val layoutTransition = LayoutTransition()
// 调整动画时长
layoutTransition.setDuration(500)
// 比如自定义高度变化时的透明度动画
layoutTransition.setAnimator(LayoutTransition.CHANGING, ObjectAnimator.ofFloat(null, "alpha", 0.5f, 1f))
findViewById<ConstraintLayout>(R.id.parent_cl).layoutTransition = layoutTransition

这样就能完美实现你要的效果：文本左滑入→停留3秒→右滑出，同时父布局随文本高度平滑变化，循环往复～

内容的提问来源于stack exchange，提问作者BraveEvidence