CardView左移动画后无法显示后方隐藏TextView的问题求助

问题描述 #

我想要实现的效果是：点击CardView右上角的imageIcon时，让CardView向左移动片刻，露出后方的hiddenTextView；待CardView回到原位置后，再将该TextView隐藏。目前CardView的左移动画可正常执行，但hiddenTextView始终无法显示。

原代码文件 #

item_image.xml #

<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
>
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:id="@+id/cardAnimals"
    app:cardCornerRadius="8dp"
    android:layout_margin="10dp"
    app:cardElevation="4dp"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_cardview"
        android:orientation="vertical"
    >

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:scaleType="fitXY"
            android:background="@drawable/circular_imageview" />

        <TextView
            android:id="@+id/name1TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Text1"
            android:textColor="@color/textColor"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/name2TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="text2"
            android:textStyle="bold"
            android:textColor="@color/textColor"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:gravity="center"
            android:textSize="18sp" />
    </LinearLayout>
    <ImageView
        android:id="@+id/gemCount"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:layout_gravity="end|top"
        android:scaleType="fitXY"
        android:src="@drawable/purp" />
    <ImageView
        android:id="@+id/newImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/mic"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"
        android:layout_gravity="bottom|start" />
</androidx.cardview.widget.CardView>
<TextView
    android:id="@+id/hiddenTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="100dp"
    android:text="Hello"
    android:textColor="@color/textColor"
    android:textStyle="bold"
    android:textSize="18sp"
    android:visibility="gone"
/>
</LinearLayout>

</androidx.core.widget.NestedScrollView>

ImageAdapter.kt #

package com.example.visuallithuanian.adapter

import android.R
import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.animation.ObjectAnimator
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.data.ImageInfo


class ImageAdapter(private val imageList: List<ImageInfo>) : RecyclerView.Adapter<ImageAdapter.ViewHolder>() {

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val imageView: ImageView = itemView.findViewById(com.example.visuallithuanian.R.id.imageView)
    val textView1: TextView = itemView.findViewById(com.example.visuallithuanian.R.id.name1TextView)
    val textView2: TextView = itemView.findViewById(com.example.visuallithuanian.R.id.name2TextView)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(com.example.visuallithuanian.R.layout.item_image, parent, false)
    return ViewHolder(view)
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val currentItem = imageList[position]
    holder.imageView.setImageResource(currentItem.imageId)
    holder.textView1.text = currentItem.name1
    holder.textView2.text = currentItem.name2

    val imageIcon =
        holder.itemView.findViewById<ImageView>(com.example.visuallithuanian.R.id.gemCount)
    val cardAnimals =
        holder.itemView.findViewById<CardView>(com.example.visuallithuanian.R.id.cardAnimals)
    val textHidden =
        holder.itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.hiddenTextView)


     //Code where the cardview moves to left and Textview gets shown behind it.
    imageIcon.setOnClickListener {
        val anim = ObjectAnimator.ofFloat(cardAnimals, "translationX", -500f)
        anim.duration = 1000
        anim.start()
        anim.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                val anim = ObjectAnimator.ofFloat(cardAnimals, "translationX", 0f)
                anim.duration = 1000
                anim.start()
                anim.addListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator) {
                        textHidden.visibility = View.VISIBLE
                    }
                })
            }
        })
    }

}
override fun getItemCount() = imageList.size
}

解决步骤 #

1. 修复布局层级问题 #

当前CardView的layout_width设为match_parent，会占据水平LinearLayout的全部宽度，导致hiddenTextView被挤出屏幕无法显示。修改CardView的宽度配置：

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:id="@+id/cardAnimals"
    app:cardCornerRadius="8dp"
    android:layout_margin="10dp"
    app:cardElevation="4dp"
    android:layout_weight="1" <!-- 让CardView占满剩余空间，同时给TextView留位置 -->
    >

同时调整hiddenTextView的layout_marginStart为16dp，避免位置过偏。

2. 修正动画逻辑顺序 #

原代码在CardView回到原位后才显示TextView，此时CardView已经挡住了TextView。正确逻辑应该是：左移动画开始前显示TextView，回到原位后隐藏TextView。修改点击事件代码：

imageIcon.setOnClickListener {
    // 先显示隐藏的TextView
    textHidden.visibility = View.VISIBLE

    // 执行左移动画（调整偏移量避免CardView完全移出屏幕）
    val leftAnim = ObjectAnimator.ofFloat(cardAnimals, "translationX", -200f)
    leftAnim.duration = 1000
    leftAnim.start()

    leftAnim.addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            // 左移动画结束后，执行回归原位动画
            val rightAnim = ObjectAnimator.ofFloat(cardAnimals, "translationX", 0f)
            rightAnim.duration = 1000
            rightAnim.start()

            rightAnim.addListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator) {
                    // 回到原位后隐藏TextView
                    textHidden.visibility = View.GONE
                }
            })
        }
    })
}

3. 优化动画偏移量 #

原偏移量-500f过大，可能导致CardView完全移出屏幕，改成-200f左右更符合视觉体验，可根据实际布局调整数值。

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