点击 Facebook Messenger 聊天项目动画

Question

我正在尝试让我的列表项在 onClick() 之后动画化，就像 Facebook Messenger。我尝试在我的列表项布局和我的 recyclerView 的父布局中使用 animateLayoutChanges=true 来做到这一点，但是它不流畅并且有一些问题，第一次点击后我想显示隐藏fields (setVisibility(VISIBLE)) ，效果不错，但是 setVisibility(GONE) 不正常，这就是它的样子

我想要实现的是这个

有什么建议吗？这是我的自定义视图

class MessageItemView : RelativeLayout {

  constructor(context: Context) : super(context)
  constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet)

  private var messageTextView: TextView
  private var dateTextView: TextView
  private var itemView: View? = null
  init {
      itemView =  LayoutInflater.from(context)?.inflate(R.layout.live_chat_list_item, this)
      messageTextView = itemView?.findViewById(R.id.live_chat_msg_text_id) as TextView
      dateTextView = itemView?.findViewById(R.id.message_received_date_txt_id) as TextView
  }

 fun setUPViewModelData(message: MessageModel) {
     itemView?.setOnClickListener {
         dateTextView.visibility = if (dateTextView.visibility == View.VISIBLE) View.GONE else View.VISIBLE
         delivered_status_txt_id.visibility = dateTextView.visibility
  }
}

这是此视图的xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="vertical">

<TextView
    android:id="@+id/message_received_date_txt_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:visibility="gone" />

<LinearLayout
    android:id="@+id/message_wrapper_layout_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/message_received_date_txt_id"
    android:orientation="vertical">

    <TextView
        android:id="@+id/live_chat_msg_text_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

<TextView
    android:id="@+id/delivered_status_txt_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/message_wrapper_layout_id"
    android:visibility="gone" />

</RelativeLayout>

我不明白我的布局层次结构有什么问题，或者什么是好的架构，我也对 Facebook 的 Messenger 聊天项目布局层次结构感兴趣...有什么想法吗？

Answer 1

从布局中删除 animateLayoutChanges，然后使用支持库中的 TransitionManager：

fun setUPViewModelData(message: MessageModel) {
     itemView?.setOnClickListener {
         TransitionManager.beginDelayedTransition(recyclerView)
         dateTextView.visibility = if (dateTextView.visibility == View.VISIBLE) View.GONE else View.VISIBLE
         delivered_status_txt_id.visibility = dateTextView.visibility
    }
}

点击 Facebook Messenger 聊天项目动画

Facebook messenger chat item animation on click

android

android-animation

kotlin

facebook-messenger

android-recyclerview