Выровнять по горизонтали два TextView в MotionLayout

Я пытаюсь создать сцену движения, в которой два текстовых представления переходят в стиле сворачивающейся панели инструментов из развернутого состояния в свернутое при перетаскивании вверх.

Два текстовых поля расположены с некоторыми полями с левой и с правой стороны экрана соответственно и должны быть выровнены по горизонтали относительно друг друга.

Первое текстовое поле слева имеет отступ от стрелки кнопки «Назад» слева и должно быть выровнено по левому краю в родительском элементе.

Второе текстовое поле справа имеет поле справа и между концом родительского элемента.

Два текстовых представления должны иметь переход, при котором текстовый размер плавно переводится.

Как я могу добиться того же?

Motionlayout:

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

beerBear 24.07.2019 источник

comment

Рассмотрите возможность использования CustomAttribute: developer.android.com/reference/android / support / constraint / И вот статья, которая делает это с цветом представления: medium.com/google-developers/ Несколько настроек для анимации размера текста, и все должно быть хорошо! - Marijan 24.07.2019

comment

@Marijan Спасибо за ответ. Я добавил сцену движения и макет движения, которые я пытаюсь улучшить, но при первом небольшом движении перетаскивания вверх text_view_2 ведет себя хаотично и исчезает, пока не достигнет начальной или конечной позиции анимации. Непрерывное перетаскивание вверх / вниз не ведет к аналогичному поведению. - beerBear 24.07.2019

Ответы (2)

arrow_upward
2
arrow_downward

У меня была аналогичная цель в моем проекте, и я использовал атрибуты android:scaleX и android:scaleY в ограничениях, потому что изменение textSize attr с помощью CustomAttribute не работало гладко. Когда вы используете android:scaleX и android:scaleY, вид масштабируется с точкой поворота в центре. Таким образом, вы можете столкнуться с проблемами выравнивания. Вы должны установить android:transformPivotX="..." и android:transformPivotY="...", чтобы изменить поведение по умолчанию. В итоге в моем случае получилось примерно так:

TextView, который я хочу оживить:

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

Сцена движения:

<?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:constraintSetEnd="@id/collapsed"
        motion:constraintSetStart="@id/expanded">

        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@+id/viewpager"
            motion:touchAnchorSide="top" />

    </Transition>

    <ConstraintSet android:id="@+id/expanded">
        <Constraint
            android:id="@id/toolbar_image_iv"
            android:layout_height="200dp"
            ...>
            <CustomAttribute
                motion:attributeName="imageAlpha"
                motion:customIntegerValue="255" />
        </Constraint>
        <Constraint
            android:id="@id/title_tv"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:scaleX="1.0"
            android:scaleY="1.0"
            ...>
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/collapsed">
        <Constraint
            android:id="@id/toolbar_image_iv"
            android:layout_height="?attr/actionBarSize"
            ...>
            <CustomAttribute
                motion:attributeName="imageAlpha"
                motion:customIntegerValue="0" />
        </Constraint>
        <Constraint
            android:id="@id/title_tv"
            android:layout_width="wrap_content"
            android:layout_height="?attr/actionBarSize"
            android:scaleX="0.667"
            android:scaleY="0.667"
            ...>
        </Constraint>

    </ConstraintSet>

</MotionScene>

macros013 14.05.2020

arrow_upward
1
arrow_downward

Попробуйте использовать приведенный ниже код и добавьте фиктивные элементы в представление ресайклера для ожидаемого поведения.

Макет движения:

    <?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>

Naveen Kommuri 26.07.2019

Выровнять по горизонтали два TextView в MotionLayout

Ответы (2)

Похожие вопросы