点击Facebook信使聊天项目动画

Question

我正试图让我的列表项目在onClick()之后变成动画，就像Facebook信使一样。我试着在列表项目布局和回收视图的父布局中使用animateLayoutChanges=true来实现这一点，但是它不是光滑的，也有一些问题，当我想要显示隐藏字段时，首先单击(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的信使聊天项目布局层次结构感兴趣.有艾迪亚斯吗？

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