在MotionLayout中水平对齐两个TextView

Question

我正在尝试创建一个运动场景，其中两个文本视图以折叠的工具栏样式在向上拖动时从展开状态过渡到折叠状态。

两个textview分别在屏幕的左侧和右侧保留一些边距，并且应彼此水平对齐。

左侧的第一个textview与左侧的后退按钮箭头之间有一个空白，需要在父级中保持对齐。

右侧的第二个textview在其右侧和父级末尾之间有一个空白。

两个textview需要进行过渡，以使文本大小可以平滑地翻译。

我怎么能达到同样的目的？

动态布局：

<androidx.constraintlayout.motion.widget.MotionLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/motion_scene">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:clipToPadding="false"
        android:paddingTop="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/space"/>

    <View
        android:id="@+id/space"
        android:layout_width="0dp"
        android:layout_height="110dp"
        android:background="@color/white"
        android:fitsSystemWindows="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:foreground="?attr/selectableItemBackground"
        android:padding="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="80dp"
        android:layout_marginEnd="10dp"
        android:elevation="0dp"
        android:textAlignment="viewStart"
        android:textColor="@color/text_black"
        android:text="text view 1"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="@id/space"
        app:layout_constraintEnd_toStartOf="@id/text_view_2"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/text_view_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="20dp"
        android:elevation="0dp"
        android:textAlignment="viewEnd"
        android:textColor="@color/text_black"
        android:text="text view 2"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="@id/space"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/text_view_1" />

</androidx.constraintlayout.motion.widget.MotionLayout>

动态场景：

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetEnd="@id/state_collapsed"
        app:constraintSetStart="@id/state_expanded">

        <OnSwipe
            app:dragDirection="dragUp"
            app:touchAnchorId="@id/recyclerview"
            app:touchAnchorSide="top" />

        <KeyFrameSet>
            <KeyAttribute
                app:framePosition="50"
                app:motionTarget="@id/text_view_1">
                <CustomAttribute
                    app:attributeName="textSize"
                    app:customFloatValue="20" />
            </KeyAttribute>

            <KeyAttribute
                app:framePosition="50"
                app:motionTarget="@id/text_view_2">
                <CustomAttribute
                    app:attributeName="textSize"
                    app:customFloatValue="20" />
            </KeyAttribute>
        </KeyFrameSet>

    </Transition>

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

        <Constraint android:id="@id/back">

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="6dp" />

        </Constraint>

        <Constraint
            android:id="@id/space"
            android:layout_height="?attr/actionBarSize"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="6dp" />

        </Constraint>

        <Constraint
            android:id="@id/text_view_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="80dp"
            android:textAlignment="viewStart"
            app:layout_constraintBottom_toBottomOf="@id/back"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/back">

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

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="6dp" />

        </Constraint>

        <Constraint
            android:id="@id/text_view_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="20dp"
            android:textAlignment="viewEnd"
            app:layout_constraintBottom_toBottomOf="@id/text_view_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/text_view_1">

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

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="6dp" />

        </Constraint>

    </ConstraintSet>

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

        <Constraint android:id="@id/back">

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="0dp" />

        </Constraint>

        <Constraint
            android:id="@id/space"
            android:layout_height="110dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="0dp" />

        </Constraint>

        <Constraint
            android:id="@id/text_view_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="80dp"
            app:layout_constraintBottom_toBottomOf="@id/space"
            app:layout_constraintEnd_toStartOf="@id/text_view_1"
            app:layout_constraintStart_toStartOf="parent">

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

            <CustomAttribute
                app:attributeName="elevation"
                app:customDimension="0dp" />

        </Constraint>

    </ConstraintSet>

</MotionScene>

Answer 1

尝试下面的代码，并将虚拟元素添加到回收器视图以实现预期的行为。

运动版式：

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.motion.widget.MotionLayout
            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:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:showPaths="true"
            android:id="@+id/motionLayout"
            app:layoutDescription="@xml/scene01">


        <TextView
                android:textColor="@android:color/black"
                android:text="TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView1"/>
        <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp" app:srcCompat="@mipmap/ic_launcher"
                android:id="@+id/imageView"
                app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="24dp"
                android:layout_marginTop="24dp" app:layout_constraintTop_toTopOf="parent"/>
        <TextView
                android:text="TextView"
                android:textColor="@android:color/black"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView2"/>
        <View android:layout_width="0dp"
              android:layout_height="1dp"
              android:id="@+id/view"
              android:layout_marginTop="20dp"
              app:layout_constraintTop_toBottomOf="@id/textView1"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintEnd_toEndOf="parent"/>

        <androidx.recyclerview.widget.RecyclerView android:layout_width="0dp"
                                                   android:id="@+id/recyclerview"
                                                   app:layout_constraintTop_toBottomOf="@id/view"
                                                   app:layout_constraintStart_toStartOf="parent"
                                                   app:layout_constraintEnd_toEndOf="parent"
                                                   app:layout_constraintBottom_toBottomOf="parent"
                                                   android:layout_height="0dp"/>
    </androidx.constraintlayout.motion.widget.MotionLayout>

MotionScene：

 <?xml version="1.0" encoding="utf-8"?>
    <MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
                 xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
            motion:constraintSetStart="@+id/start"
            motion:constraintSetEnd="@+id/end">
        <OnSwipe
                motion:touchAnchorId="@+id/recyclerview"
                motion:touchAnchorSide="top"
                motion:dragDirection="dragUp"/>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    motion:layout_constraintStart_toEndOf="@+id/imageView"
                    android:layout_marginStart="20dp" android:layout_marginTop="16dp"
                    motion:layout_constraintTop_toBottomOf="@+id/imageView">
            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="25"/>
        </Constraint>
        <Constraint
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView2"
                motion:layout_constraintTop_toTopOf="@+id/textView1"
                motion:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="20dp">
            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="25"/>
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    motion:layout_constraintStart_toEndOf="@+id/imageView"
                    android:layout_marginStart="20dp"
                    motion:layout_constraintTop_toTopOf="@+id/imageView">
            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="15"/>
        </Constraint>
        <Constraint
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/textView2"
                motion:layout_constraintTop_toTopOf="@+id/textView1"
                motion:layout_constraintEnd_toEndOf="parent"
                android:layout_marginEnd="20dp">
            <CustomAttribute motion:attributeName="textSize" motion:customFloatValue="15"/>
        </Constraint>
    </ConstraintSet>

</MotionScene>

Answer 2

我在项目中有一个类似的目标，并且在Constraints中使用了Cmd + T和android:scaleX属性，因为使用CustomAttribute更改android:scaleY attr并不顺利。当您使用textSize和android:scaleX时，视图以中心为轴进行缩放。因此，您可能会遇到对齐问题。您必须设置android:scaleY和android:transformPivotX="..."才能更改默认行为。结果，我遇到了这样的情况：

我要设置动画的TextView：

android:transformPivotY="..."

运动场景：

<TextView
                android:id="@+id/title_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Text"
                android:transformPivotX="0sp"
                android:transformPivotY="24dp"/>