如何使用MotionLayout调整TextView的大小 [英] How to resize TextView using MotionLayout

问题描述

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

I'm trying to create a CollapsingToolbar animation using MotionLayout.

我已经成功制作了所有动画，使其表现得像 CollapsingToolbar 一样，具有很高的灵活性，这意味着我

I've successfully animated everything to behave just like a CollapsingToolbar with a high level of flexibility, which means I can easily create awesome animations without writing a large amount of code.

我的问题是无论我尝试什么，都可以轻松创建出很棒的动画。我无法自然地调整标题的 TextView 的大小。

My problem is no matter what I tried; I can't resize the title's TextView in a natural way.

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

试用＃1

CustomAttribute of textSize p>

CustomAttribute of 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>

结果

Result

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

The solution above works, but the text flickers on movement, which means the animation is not smooth.

审判＃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>

结果

Result

以上解决方案更改了大小，但没有更改布局参数，这意味着它打破了约束，使我无法使其与导航图标正确对齐。

The solution above changes the size but not the layout params, which means it breaks the constraints in a way that I can't align it correctly with the navigation icon.

我更喜欢继续使用 MotionLayout ，因为使用<$ c $创建了平滑而详细的动画c> CollapsingToolbar 是一场噩梦。

I prefer to keep using MotionLayout because creating a smooth and detailed animation using CollapsingToolbar is a nightmare.

推荐答案

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

I used Trial 2 - 'scale' method and set the following textview attributes in the actual XML layout (NOT on the MotionScene XML).

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

这将更改文本视图缩放的枢轴点。

This changes the pivot point around which the text view will scale.

这篇关于如何使用MotionLayout调整TextView的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！