android - MotionLayout 进度从 0 跳到 1 无需中间步骤

Question

我有一个带有 TransitionListener 的 MotionLayout，我的 MotionScene 的进度似​​乎从 0 到 1:

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

    <Transition
        app:constraintSetStart="@id/header_expanded"
        app:constraintSetEnd="@id/header_condensed"
        app:duration="2000">

        <OnSwipe
             app:touchAnchorId="@id/view_pager"
            app:dragDirection="dragDown"
            app:touchAnchorSide="top"/>

        <KeyFrameSet>
            <KeyAttribute
                android:elevation="@dimen/header_elevation_expanded"
                app:framePosition="0"
                app:target="@id/header"/>

            <KeyAttribute
                android:elevation="@dimen/header_elevation_expanded"
                app:framePosition="90"
                app:target="@id/header"/>


            <KeyAttribute
                android:elevation="@dimen/header_elevation_collapsed"
                app:framePosition="100"
                app:target="@id/header" />
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/header_expanded">
        <Constraint
            android:id="@+id/guideline_expanded_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.5" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/header_condensed">
        <Constraint
            android:id="@+id/guideline_expanded_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.18" />
    </ConstraintSet>
</MotionScene>

如果在日志中打印进度，它似乎从 0 跳到 1。我尝试更改持续时间，或者只是将标题 View 的约束更改为不同的指南，但它似乎不会影响进度。

我在日志中看到的唯一奇怪的事情是它找不到 OnSwipe touchAnchorId View 。

W/MotionLayout: WARNING could not find view id com.pitchero.ph:id/view_pager

使用此 MotionScence 的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/container"
                                                      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"
                                                      android:background="@color/activity_background"
                                                      app:layoutDescription="@xml/motion_scene_team">

    <com.github.florent37.shapeofview.shapes.DiagonalView
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:elevation="@dimen/menu_header_elevation_expanded"
        app:layout_constraintBottom_toTopOf="@+id/guideline_expanded_state"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shape_diagonal_angle="@dimen/header_angle"
        app:shape_diagonal_direction="left"
        app:shape_diagonal_position="bottom">

        <View
            android:id="@+id/background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/redE64"/>

    </com.github.florent37.shapeofview.shapes.DiagonalView>

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        app:layout_collapseMode="pin">

        <LinearLayout
            android:id="@+id/toolbar_title_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:elevation="5dp"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/toolbar_image"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginEnd="7dp"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/title"
                style="@style/title.white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:ellipsize="end"
                android:gravity="center"
                android:includeFontPadding="true"
                android:maxLines="1"
                tools:text="Help Center"/>
        </LinearLayout>
    </androidx.appcompat.widget.Toolbar>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/transparent"
        android:elevation="2dp"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar"
        app:tabBackground="@color/transparent"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/white_50_percent"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabs_bar"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_expanded_state"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

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

我真的不明白为什么在这种特殊情况下会发生这种情况。我怀疑这是因为它找不到 ViewPager，但我不明白为什么会这样。

此外，我正在使用以下版本的 ConstraintLayout 库:

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha3'

implementation 'androidx.constraintlayout:constraintlayout-solver:2.0.0-alpha3'

非常感谢任何帮助，谢谢!

Answer 1

你用错误的方式实现了MotionLayout，首先你不能使用Guideline来设置动画，你可以使用ViewGroup容器或者View来设置动画。

接下来，您必须定义所有引用另一个布局的ContraintSet。例如。

 <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tabs_bar"/>

此处您使用 app:layout_constraintTop_toBottomOf="@id/tabs_bar" 作为引用，因此如果您正在为该 viewpager 设置动画，则需要添加 ConstraintSet他们两个，那么只有你才能摆脱那个警告。 :)