单击Facebook信使聊天项目动画

Question

我正试图让我的列表项在onClick（）之后被动画化，就像Facebook Messenger一样。我尝试在我的列表项布局中使用 animateLayoutChanges = true 以及我的recyclerView的父布局执行此操作，但它不顺畅并且有一些问题，在我第一次单击后我想显示隐藏字段（< strong> 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>

我不明白我的布局层次结构有什么问题，或者什么是好的架构，还对Fb的信使聊天项目布局层次结构感兴趣...任何eideas？

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
    }
}