代码

Question

我在回收者视图项目中使用约束布局。要设置动画（扩展/折叠），请使用“约束集”动画。开头动画在所有项目上运行都很好。结束动画也可以正常运行，但是当结束动画在不是最后一个项目上开始时，所有项目在动画开始时（而不是在动画结束时）都跳起来。

对项目点击执行动画：

itemView.setOnClickListener {
                val smallItemConstraint = ConstraintSet()
                smallItemConstraint.clone(itemView.context, R.layout.day_of_week_small)
                val largeItemConstraint = ConstraintSet()
                largeItemConstraint.clone(itemView.context, R.layout.day_of_week)

                val constraintToApply = if (isViewExpanded) smallItemConstraint else
                    largeItemConstraint

                animateItemView(constraintToApply, itemView.dayOfWeekConstraintLayout)

                if (!isViewExpanded) {
                    itemView.dayOfWeekWeatherIcon.visibility = View.VISIBLE
                } else {
                    itemView.dayOfWeekWeatherIcon.visibility = View.GONE
                }

                isViewExpanded = !isViewExpanded
            }

其中animateItemView是：

private fun animateItemView(constraintToApply: ConstraintSet,
                                constraintLayout: ConstraintLayout) {
        TransitionManager.beginDelayedTransition(constraintLayout)
        constraintToApply.applyTo(constraintLayout)
    }

day_of_week.xml（展开的）布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/dayOfWeekConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/dayOfWeekWeatherIcon"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:contentDescription="@string/weather_image"
        app:layout_constraintBottom_toBottomOf="@+id/dayOfWeekHumidityLabel"
        app:layout_constraintEnd_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/dayOfWeekText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/today"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/dayOfWeekItemVerticalGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="192dp" />

    <TextView
        android:id="@+id/dayOfWeekCurrentTemperatureText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textAllCaps="true"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekText" />

    <TextView
        android:id="@+id/dayOfWeekDegreeCelsiusSign"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/degree_celsius"
        android:textAllCaps="true"
        android:textSize="24sp"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekCurrentTemperatureText"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekText" />

    <TextView
        android:id="@+id/dayOfWeekWeatherStateText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/weather_state_text"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekDegreeCelsiusSign" />

    <TextView
        android:id="@+id/dayOfWeekWindLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/wind_label"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekHumidityLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="@string/humidityLabel"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWindLabel" />

    <TextView
        android:id="@+id/dayOfWeekWindDirection"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekWindLabel"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekWindSpeed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="14sp"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekWindDirection"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekWindSpeedLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/wind_speed"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekWindSpeed"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekHumidityText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekHumidityLabel"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWindSpeedLabel" />

    <TextView
        android:id="@+id/dayOfWeekHumidityPercentageLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="@string/percentage_sign"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekHumidityText"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWindSpeedLabel" />

</androidx.constraintlayout.widget.ConstraintLayout>

和day_of_week_small.xml（合拢）布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/dayOfWeekConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/dayOfWeekWeatherIcon"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:contentDescription="@string/weather_image"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/dayOfWeekHumidityLabel"
        app:layout_constraintEnd_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/dayOfWeekText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/today"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/dayOfWeekItemVerticalGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="192dp" />

    <TextView
        android:id="@+id/dayOfWeekCurrentTemperatureText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textAllCaps="true"
        android:textSize="40sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekText" />

    <TextView
        android:id="@+id/dayOfWeekDegreeCelsiusSign"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/degree_celsius"
        android:textAllCaps="true"
        android:textSize="40sp"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekCurrentTemperatureText"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekText" />

    <TextView
        android:id="@+id/dayOfWeekWeatherStateText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/weather_state_text"
        android:textSize="24sp"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekDegreeCelsiusSign" />

    <TextView
        android:id="@+id/dayOfWeekWindLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/wind_label"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekHumidityLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="@string/humidityLabel"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintStart_toStartOf="@+id/dayOfWeekItemVerticalGuideline"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWindLabel" />

    <TextView
        android:id="@+id/dayOfWeekWindDirection"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekWindLabel"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekWindSpeed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="14sp"
        android:visibility="gone"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekWindDirection"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekWindSpeedLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="@string/wind_speed"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekWindSpeed"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWeatherStateText" />

    <TextView
        android:id="@+id/dayOfWeekHumidityText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekHumidityLabel"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekWindSpeedLabel" />

    <TextView
        android:id="@+id/dayOfWeekHumidityPercentageLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="@string/percentage_sign"
        android:textAllCaps="true"
        android:textSize="14sp"
        android:textStyle="bold"
        android:visibility="gone"
        app:layout_constraintStart_toEndOf="@+id/dayOfWeekCurrentTemperatureText"
        app:layout_constraintTop_toBottomOf="@+id/dayOfWeekCurrentTemperatureText" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是什么问题，我该如何解决？谢谢。

动画示例：

Answer 1

在我们了解如何使所有功能正常工作之前，让我们看一下是什么原因导致了您的gif行为。

之所以其他项目视图跳起来，是因为动画是纯粹的视觉效果。也就是说，折叠动画实际上不会从布局的角度为项目的高度设置动画，而只是为项目的绘制动画。这样做是出于性能方面的考虑（假设必须每秒重新布局所有视图60次）。这就是为什么当您的项目折叠时，所有其他视图都跳到最终布局位置的原因。

RecyclerView非常擅长动画其子代的高度，这就是我们将用来解决整个动画问题的东西。我在下面概述了完整的解决方案。

预览GIF：https://giphy.com/gifs/SVlBnpeW3wIwNIVpVU

经过一些试验，我能够使ConstraintLayout + ConstrainSet + RecyclerViews工作。我将分享我的工作方式。

代码

这里是代码的快速预览。

private inner class MatchInfoAdapter (
  private val context: Context
) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

  private var items = listOf<MatchItem>()
  private val inflater: LayoutInflater = LayoutInflater.from(context)

  override fun onCreateViewHolder(
    parent: ViewGroup, 
    viewType: Int
  ): RecyclerView.ViewHolder = 
    FullViewHolder(inflater.inflate(viewType, parent, false))

  override fun onBindViewHolder(
    holder: RecyclerView.ViewHolder,
    position: Int,
    payloads: MutableList<Any>
  ) {
    if (payloads.isEmpty()) {
      super.onBindViewHolder(holder, position, payloads)
    } else {
      val item = items[position]
      val h = holder as FullViewHolder
  
      if (!item.isExpanded) {
        h.collapsedConstraintSet.applyTo(h.rootView)
      }
    }
  }

  override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    val item = items[position]
    val h = holder as FullViewHolder
    val isExpanded = item.isExpanded
  
    val constraint = if (isExpanded) 
      h.expandedConstraintSet 
    else 
      h.collapsedConstraintSet
    constraint.applyTo(h.rootView)

    bindGeneralViews(h, item, isExpanded)
    if (isExpanded) {
      bindExpandedExtraViews(h, item)
    }

    h.clickView.setOnClickListener {
      toggleExpanded(h)
    }
  }


  private fun bindGeneralViews(
    h: FullViewHolder,
    item: MatchItem,
    isExpanded: Boolean
  ) {
      // bind views that are visible when expanded and collapsed
  }
  
  private funbindExpandedExtraViews(
    h: FullViewHolder,
    item: MatchItem
  ) {
      // bind views that are only shown when the item is expanded
  }

  

  private fun toggleExpanded(
    h: FullViewHolder
  ) {
    if (h.adapterPosition< 0) return // touch event can technically fire after a view is unbound

    val autoTransition = AutoTransition()
    
    val item = items[position]
    item.isExpanded = !item.isExpanded
    
    bindGeneralViews(h, item, newIsExpanded)
    if (item.isExpanded) {
      bindExpandedExtraViews(h, item)
  
      autoTransition.ordering = AutoTransition.ORDERING_TOGETHER
      autoTransition.duration = ANIMATION_DURATION_MS
      TransitionManager.beginDelayedTransition(h.rootView, autoTransition)
      h.expandedConstraintSet.applyTo(h.rootView)
  
      notifyItemChanged(h.adapterPosition, Unit)
    } else {
      autoTransition.ordering = AutoTransition.ORDERING_TOGETHER
      autoTransition.duration = ANIMATION_DURATION_MS
      TransitionManager.beginDelayedTransition((h.rootView.parent as ViewGroup), autoTransition)
      notifyItemChanged(h.adapterPosition, Unit)
    }
  }
}

data class MatchItem(
...
) {
  // Exclude this field from equals/hachcode by declaring it in class body
  var isExpanded: Boolean = false
}

private class FullViewHolder (itemView: View) : RecyclerView.ViewHolder(itemView) {
  ...

  val collapsedConstraintSet: ConstraintSet = ConstraintSet()
  val expandedConstraintSet: ConstraintSet = ConstraintSet()
  
  init {
    collapsedConstraintSet.clone(rootView)
    expandedConstraintSet.clone(rootView.context, R.layout.build_full_item)
  }
}

它如何工作？

代码在很大程度上依赖于notifyItemChanged(Int, Payload)和TransitionManager.beginDelayedTransition()。让我们先看看这些是如何工作的。

首先，notifyItemChanged(Int, Payload)将确保传递给onBindViewHolder(RecyclerView.ViewHolder, Int, MutableList<Any>)的视图持有者与当前绑定的视图持有者是同一视图持有者。例如。假设A是当前绑定到项目0的视图持有者。如果调用notifyItemChanged(0, Unit)，则可以保证A将传递给onBindViewHolder(RecyclerView.ViewHolder, Int, MutableList<Any>)。除此之外，RecyclerViews非常擅长为项目视图高度的动画设置动画，因此notifyItemChanged()将通知RecyclerView检查高度是否已更改，以及是否必须播放漂亮的动画来向上或向下动画其他项目

第二，TransitionManager.beginDelayedTransition()对传入的视图的当前状态进行快照。然后，在调用ConstraintSet.applyTo()时，将计算已保存状态和当前状态之间的差异，并将动画应用于自动在两者之间转换。

现在，基础已不复存在。这是展开和折叠项目的工作方式。

用于扩展项目：

用户点击项目。
toggleExpanded()被呼叫。
商品的视图状态已更新为展开状态。
我们将所有视图预先绑定到视图持有者，以便在动画过程中不会发生闪烁，并且所有视图都已完全绑定。
调用TransitionManager.beginDelayedTransition（）来拍摄项目视图状态的快照。
ConstraintSet.applyTo()被调用以将扩展布局应用于视图并为更改添加动画。
notifyItemChanged(h.``adapterPosition``, Unit)被调用。这保证了在调用onBindViewHolder时，我们将获得完全绑定的视图持有者。此外，它还通知recyclerview物品的高度已更改，将使recyclerview处理动画高度变化。

用于折叠物品：

用户点击项目。
toggleExpanded()被呼叫。
商品的视图状态已更新为折叠状态。
调用TransitionManager.beginDelayedTransition（）来拍摄项目视图状态的快照。
notifyItemChanged(h.``adapterPosition``, Unit)被调用。这保证了在调用onBindViewHolder时，我们将获得完全绑定的视图持有者。此外，它还通知recyclerview物品的高度已更改，将让recyclerview处理动画高度变化。
ConstraintSet.applyTo()被调用以将折叠后的布局应用于视图并为更改添加动画。

其他有趣的事实

折叠一件物品实际上比让眼睛看起来更复杂。 TransitionManager.beginDelayedTransition()之前的notifyItemChanged(h.adapterPosition, Unit)调用至关重要。这是因为传递给onBindViewHolder的视图持有者由于实现了recyclerviews而始终不受约束。

为什么这是一个问题？好吧，这意味着如果我们改为在TransitionManager.beginDelayedTransition()中调用onBindViewHolder，它将保存的状态是视图未绑定。调用ConstraintSet.applyTo()时，它将在未绑定视图到绑定视图之间进行动画处理，默认动画是淡入该视图。这不是我们想要的，并且动画看起来非常丑陋。

Recycler View中的约束集动画无法正确设置动画

1 个答案:

代码

它如何工作？

其他有趣的事实