MotionLayout中的TextView在大小动画上闪烁
Posted
技术标签:
【中文标题】MotionLayout中的TextView在大小动画上闪烁【英文标题】：TextView flickers on size animation in MotionLayout 【发布时间】：2019-12-19 23:21:55 【问题描述】：我目前正在尝试使用 MotionLayout 创建工具栏动画。一切正常，除了当 TextView 的大小增加时，以约束为中心并用高度和宽度“wrap_content”定义的 TextView 部分闪烁。如果我将 TextView 向左对齐，一切都会按预期进行。这是一个已知的错误还是您知道我该如何解决这个问题？
布局
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
android:layout_
android:layout_
android:background="#FF0000"
android:fitsSystemWindows="false">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar"
android:layout_
android:layout_
android:theme="@style/AppTheme.AppBarOverlay">
<com.example.motionlayout.CollapsibleToolbar
android:id="@+id/constraintToolbar"
android:layout_
android:layout_
android:minHeight="56dp"
app:layoutDescription="@xml/scene_11_header"
app:layout_scrollFlags="scroll|enterAlways|snap|exitUntilCollapsed">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon"
android:layout_
android:layout_
android:src="@drawable/maxmustermann" />
<TextView
android:id="@+id/name"
android:layout_
android:layout_
android:text="Marco Schlosser"
android:textColor="#FFFFFF"/>
<ImageView
android:id="@+id/ivMail"
android:layout_
android:layout_
app:srcCompat="@drawable/ic_mail" />
<ImageView
android:id="@+id/ivPhone"
android:layout_
android:layout_
app:srcCompat="@drawable/ic_phone" />
<ImageView
android:id="@+id/ivInfo"
android:layout_
android:layout_
app:srcCompat="@drawable/ic_info_button" />
</com.example.motionlayout.CollapsibleToolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="@layout/content_scrolling" />
场景
<Transition
app:constraintSetEnd="@id/end"
app:constraintSetStart="@id/start"
app:duration="1000"
app:motionInterpolator="linear">
<KeyFrameSet>
<KeyPosition
app:framePosition="30"
app:keyPositionType="deltaRelative"
app:motionTarget="@id/icon"
app:percentX="0.9"
app:percentY="0.1" />
<KeyPosition
app:framePosition="30"
app:keyPositionType="deltaRelative"
app:motionTarget="@id/name"
app:percentX="0.9"
app:percentY="0.1" />
</KeyFrameSet>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/icon"
android:layout_
android:layout_
android:layout_marginTop="50dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@id/name"
android:layout_
android:layout_
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/icon">
<CustomAttribute
app:attributeName="textSize"
app:customFloatValue="22"/>
</Constraint>
<Constraint
android:id="@id/ivMail"
android:layout_
android:layout_
android:layout_marginTop="16dp"
android:layout_marginBottom="50dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/ivPhone"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/name" />
<Constraint
android:id="@id/ivPhone"
android:layout_
android:layout_
android:layout_marginTop="16dp"
android:layout_marginBottom="50dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@+id/ivMail"
app:layout_constraintTop_toBottomOf="@+id/name" />
<Constraint
android:id="@id/ivInfo"
android:layout_
android:layout_
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/icon"
android:layout_
android:layout_
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Constraint
android:id="@id/name"
android:layout_
android:layout_
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/icon">
<CustomAttribute
app:attributeName="textSize"
app:customFloatValue="14"/>
</Constraint>
<Constraint
android:id="@id/ivMail"
android:layout_
android:layout_
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/ivPhone" />
<Constraint
android:id="@id/ivPhone"
android:layout_
android:layout_
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/ivInfo" />
<Constraint
android:id="@id/ivInfo"
android:layout_
android:layout_
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>
</Transition>
【问题讨论】：
com.example.motionlayout.CollapsibleToolbar 是做什么的？ 你解决过这个问题吗？我在一个非常简单的动画上面临这个问题。 在这里查看我对类似问题的回答 ***.com/a/61199498/4231708 【参考方案1】：我找到了解决此闪烁问题的解决方案。
1.扩展运动布局，增加onChange接口：
class CollapsibleToolbar @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr), AppBarLayout.OnOffsetChangedListener
val TAG : String = "CollapsibleToolbar"
var onHeaderOffsetChangeed: OnHeaderOffsetChangeed? = null
override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int)
progress = -verticalOffset / appBarLayout?.totalScrollRange?.toFloat()!!
onHeaderOffsetChangeed?.let
it.onChanged(progress)
override fun onAttachedToWindow()
super.onAttachedToWindow()
(parent as? AppBarLayout)?.addOnOffsetChangedListener(this)
interface OnHeaderOffsetChangeed
fun onChanged(progress: Float)
2。在Activity上设置界面并设置缩放计算
(info_header as CollapsibleToolbar).onHeaderOffsetChangeed = object : CollapsibleToolbar.OnHeaderOffsetChangeed
override fun onChanged(progress: Float)
// e.g. 23sp zoom to 14sp
tv_title.textSize = 23 - 9 * progress
3。从 MotionScene 中删除 textSize CustomAttribute。
<CustomAttribute
app:attributeName="textSize"
app:customFloatValue="14"/>
【讨论】：
其他视图呢？我对其进行测试，看看我们是否在任何地方改变 TextView 的大小【参考方案2】：看起来测试版可能有一些错误并且可能需要另一个版本，但在那之前：
意识到无论如何调整字体大小在 cpu 上的开销很大。作为一种技巧，现在尝试在结束约束中像这样使用缩放：
<Constraint
android:id="@+id/tv"
android:layout_
android:layout_
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:transformPivotX="0dp"
android:transformPivotY="14.5dp"
android:scaleX="1.167"
android:scaleY="1.167">
android:transformPivotY="14.5dp" 是通过在 sp 中获取最终字体大小并将其分成两半来计算的。因此，如果最终字体为 30 ，请使用 15dp 的 pivotY。需要这些枢轴的原因是它以某种方式旋转，使其看起来似乎遵守您的布局约束，因为它不再是自缩放以来。
【讨论】：
以上是关于MotionLayout中的TextView在大小动画上闪烁的主要内容，如果未能解决你的问题，请参考以下文章
更改 Android Motion Layout 中的内容后如何使“wrap_content”工作？