如何使用 MotionLayout 调整 TextView 的大小答案

【问题标题】：How to resize TextView using MotionLayout如何使用 MotionLayout 调整 TextView 的大小
【发布时间】：2019-11-14 15:28:47
【问题描述】：

我正在尝试使用 MotionLayout 创建一个 CollapsingToolbar 动画。

我已成功地为所有内容设置动画，使其表现得像 CollapsingToolbar 一样具有高度的灵活性，这意味着我无需编写大量代码即可轻松创建出色的动画。

无论我尝试了什么，我的问题都是；我无法自然地调整标题的 TextView 大小。

我目前正在使用ConstraintLayout 版本2.0.0-beta3

试验#1

CustomAttribute 中的textSize

<ConstraintSet android:id="@+id/dish_fragment_expanded_set">

    ...

    <Constraint
        android:id="@+id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dish_fragment_cover_image">

        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="24" />

    </Constraint>

    ...

</ConstraintSet>

<ConstraintSet android:id="@+id/dish_fragment_collapsed_set">

    ...

    <Constraint
        android:id="@id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        app:layout_constraintBottom_toBottomOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintStart_toEndOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintTop_toTopOf="@id/dish_fragment_navigation_icon">

        <CustomAttribute
            app:attributeName="textSize"
            app:customFloatValue="16" />

    </Constraint>

    ...

</ConstraintSet>

结果

上述解决方案有效，但文本在移动时闪烁，这意味着动画不流畅。

试验#2

scaleX & scaleY

<ConstraintSet android:id="@+id/dish_fragment_expanded_set">

    ...

    <Constraint
        android:id="@+id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dish_fragment_cover_image"
        android:scaleX="1"
        android:scaleY="1"/>

    ...

</ConstraintSet>

<ConstraintSet android:id="@+id/dish_fragment_collapsed_set">

    ...

    <Constraint
        android:id="@id/dish_fragment_title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        app:layout_constraintBottom_toBottomOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintStart_toEndOf="@+id/dish_fragment_navigation_icon"
        app:layout_constraintTop_toTopOf="@id/dish_fragment_navigation_icon"       
        android:scaleX="0.70"
        android:scaleY="0.70"/>

    ...

</ConstraintSet>

结果

上面的解决方案改变了尺寸，但没有改变布局参数，这意味着它打破了约束，我无法将它与导航图标正确对齐。

我更喜欢继续使用MotionLayout，因为使用CollapsingToolbar 创建流畅而细致的动画是一场噩梦。

【问题讨论】：

天平的绝妙技巧。绝对比使用 CustomAttribute 更流畅。
在这里查看我的答案stackoverflow.com/a/61199498/4231708
@gil-goldzweig，你最终找到解决这个问题的方法了吗？
@a.ch.不，由于标题问题，我最终使用了 CollapsingToolbar。也许它已在较新的版本中得到解决，但根据我在发行说明中阅读的内容，它尚未修复

标签： android android-collapsingtoolbarlayout android-motionlayout

【解决方案1】：

我使用了 Trial 2 - 'scale' 方法并在实际的 XML 布局中设置了以下 textview 属性（不在 MotionScene XML 上）。

android:transformPivotX="0sp"
  android:transformPivotY= Equal to 1/2 of the size of the text view in expanded mode (in sp).

这会更改文本视图将围绕其缩放的枢轴点。

【讨论】：