在 MotionLayout 进行时视图操作不起作用

Question

我正在尝试创建一个视图将向上滚动的布局，但在视图内部有一个组件不应滚动到视图之外并停靠在顶部，其余内容滚动在其下方，组件将滚动直到它到达屏幕顶部。

所以对于停靠部分，我使用了运动布局，并且在最终状态下它被限制在父级的顶部。我在停靠的组件之后放置了一个嵌套的滚动视图。这是我的运动场景文件 -

<Transition
    android:id="@+id/scrollTransition"
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
   <KeyFrameSet>
   </KeyFrameSet>
    <OnSwipe
        motion:dragDirection="dragUp"
        motion:onTouchUp="stop"
        motion:touchAnchorId="@id/merchant_details"
        motion:moveWhenScrollAtTop="true"/>
</Transition>

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

</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:layout_height="wrap_content"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintBottom_toTopOf="@id/merchant_details"
        android:layout_width="match_parent"
        android:id="@+id/product_details" />
    <Constraint
        android:layout_height="wrap_content"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:id="@+id/merchant_details" />
</ConstraintSet>

但它应该提供它自然滚动的提要，并且如果用户在运动状态的中间停止滚动，所以我为此添加了motion:onTouchUp="stop"。

这是我的布局文件 -

<?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"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:id="@+id/hsmerchantListingRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_home_services_merchant_listing_scene"
    tools:context="com.nearbuy.nearbuymobile.modules.home_services.HomeServicesMerchantListingActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/product_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/dp_15"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="gone">

        <com.nearbuy.nearbuymobile.view.infiniteRotationView.InfiniteRotationView
            android:id="@+id/productImageCarousel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <WebView
            android:id="@+id/htmlView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/productImageCarousel" />

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/detailTitle"
            style="@style/title_3_b"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="15dp"
            android:textColor="#2b2f31"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/productImageCarousel"
            tools:text="Sofa Cleaning" />

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/detailDescription"
            style="@style/body_2_r"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="15dp"
            android:lineSpacingExtra="4.7sp"
            android:textColor="@color/grey_n"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/detailTitle"
            tools:text="From cotton upholstery to leather finish, there exists a wide array of sofa designs with a range of materials. All of them pick some amount of dust on a daily basis which cannot be washed away…" />

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/readMoreText"
            style="@style/body_1_m"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4.7dp"
            android:text="Read more"
            android:textColor="@color/delight"
            android:visibility="gone"
            app:layout_constraintStart_toStartOf="@+id/detailDescription"
            app:layout_constraintTop_toBottomOf="@+id/detailDescription" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/bannerBarrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="detailDescription,productImageCarousel,htmlView,detailTitle,readMoreText" />

        <ImageView
            android:id="@+id/serviceInfoBanner1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/bannerBarrier"
            tools:src="@drawable/test_img1"/>

        <ImageView
            android:id="@+id/serviceInfoBanner2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/serviceInfoBanner1"
            tools:src="@drawable/test_img1"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/merchant_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/product_details"
        app:layout_constraintVertical_bias="0.0"
        tools:visibility="visible">

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/dateFilterBarrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="llDateFilter" />


        <LinearLayout
            android:id="@+id/llDateFilter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#f7f7fd"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingTop="@dimen/dp_15"
            android:paddingBottom="@dimen/dp_10"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:visibility="visible">

            <androidx.cardview.widget.CardView
                android:id="@+id/cvMainFilter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dp_15"
                app:cardCornerRadius="@dimen/dp_4"
                app:cardElevation="@dimen/dp_2">

                <RelativeLayout
                    android:id="@+id/rlDate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rounded_corner_gradient_blue"
                    android:paddingStart="@dimen/dp_10"
                    android:paddingTop="@dimen/dp_6"
                    android:paddingEnd="@dimen/dp_10"
                    android:paddingBottom="@dimen/dp_6">

                    <com.nearbuy.nearbuymobile.view.NB_TextView
                        android:id="@+id/tvDateTitle"
                        style="@style/small_m"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/white"
                        tools:text="Today" />

                    <com.nearbuy.nearbuymobile.view.NB_TextView
                        android:id="@+id/tvDateSubtitle"
                        style="@style/title_3_m"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tvDateTitle"
                        android:layout_marginTop="@dimen/dp_2"
                        android:textColor="@color/white"
                        android:visibility="gone"
                        tools:text="1 Oct" />

                    <ImageView
                        android:id="@+id/ivDateDownArrow"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tvDateTitle"
                        android:layout_marginStart="@dimen/dp_10"
                        android:layout_marginTop="@dimen/dp_10"
                        android:layout_toEndOf="@+id/tvDateSubtitle"
                        android:src="@drawable/arrow_down_white"
                        android:visibility="gone" />

                    <com.nearbuy.nearbuymobile.view.NB_TextView
                        android:id="@+id/tvCount"
                        style="@style/body_4_m"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_toRightOf="@+id/tvDateTitle"
                        android:background="@drawable/white_circle"
                        android:gravity="center"
                        android:paddingLeft="@dimen/dp_8"
                        android:paddingTop="@dimen/dp_5"
                        android:paddingRight="@dimen/dp_8"
                        android:paddingBottom="@dimen/dp_5"
                        android:textColor="@color/delight"
                        android:visibility="gone"
                        tools:text="8" />

                </RelativeLayout>

            </androidx.cardview.widget.CardView>

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvTimeSlots"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:orientation="horizontal"
                android:overScrollMode="never"
                android:paddingStart="@dimen/dp_6"
                android:paddingEnd="10dp"
                android:scrollbars="none"
                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

        </LinearLayout>

        <androidx.core.widget.NestedScrollView
            android:id="@+id/merchantDetailScrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/dateFilterBarrier"
            app:layout_constraintVertical_bias="0.0"
            tools:visibility="visible">

            <LinearLayout
                android:id="@+id/l1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <include
                    layout="@layout/home_services_selected_merchant_card"
                    tools:visibility="gone" />

                <ImageView
                    android:id="@+id/merchantInfoBanner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY"
                    tools:src="@drawable/test_img1"
                    tools:visibility="visible" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/merchantAdditionalInfoTabLayout"
                    android:layout_marginTop="@dimen/dp_15"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <com.google.android.material.tabs.TabLayout
                        android:id="@+id/merchantInfoTab"
                        android:layout_width="0dp"
                        android:layout_height="30dp"
                        android:background="@color/white"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tabIndicatorColor="@color/delight"
                        app:tabIndicatorHeight="@dimen/dp_2" />

                    <com.nearbuy.nearbuymobile.view.CustomViewPager
                        android:id="@+id/merchantInfoTabPager"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/merchantInfoTab" />

                </androidx.constraintlayout.widget.ConstraintLayout>


            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/retryLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_60"
        android:background="@color/cb_verify_color"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@+id/product_details" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottomCTACard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:elevation="@dimen/dp_30"
        android:translationZ="@dimen/dp_10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/continueBookingCTA"
            style="title_2_m"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_groupon_migration"
            android:gravity="center"
            android:paddingTop="10.3dp"
            android:paddingBottom="10.3dp"
            android:textColor="@color/white"
            android:layout_marginTop="@dimen/dp_15"
            android:layout_marginBottom="@dimen/dp_30"
            android:layout_marginStart="@dimen/dp_15"
            android:layout_marginEnd="@dimen/dp_15"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:text="Continue Booking">

        </com.nearbuy.nearbuymobile.view.NB_TextView>

    </androidx.constraintlayout.widget.ConstraintLayout>

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

您看到包含标签中的布局了吗？ ，这是布局 -

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f7f7fd"
    android:paddingLeft="@dimen/dp_15"
    android:paddingTop="@dimen/dp_10"
    android:paddingRight="@dimen/dp_15"
    android:paddingBottom="@dimen/dp_15">

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/serviceName"
        style="@style/body_1_m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textColor="@color/black_n"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="3 Seater Sofa Cleaning" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/mspText"
        style="@style/display_3_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/black_n"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="₹349" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/mrpText"
        style="@style/body_4_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1.3dp"
        android:textColor="@color/smoke"
        app:layout_constraintEnd_toEndOf="@+id/mspText"
        app:layout_constraintTop_toBottomOf="@+id/mspText"
        app:strike="true"
        tools:text="₹1,100" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/discountText"
        style="@style/body_2_m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1.3dp"
        android:layout_marginEnd="6.7dp"
        android:textColor="#ff0000"
        app:layout_constraintBottom_toBottomOf="@+id/mrpText"
        app:layout_constraintEnd_toStartOf="@+id/mrpText"
        app:layout_constraintTop_toBottomOf="@+id/mspText"
        tools:text="55% OFF" />

    <LinearLayout
        android:id="@+id/timeAndInfoLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="20dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toStartOf="@+id/discountText"
        app:layout_constraintStart_toStartOf="@+id/serviceName"
        app:layout_constraintTop_toBottomOf="@+id/serviceName" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/freeCancellationText"
        style="@style/body_3_m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:textColor="#1bbb33"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/timeAndInfoLayout"
        tools:text="Free Cancellation" />

    <ImageView
        android:id="@+id/freeCancellationIcon"
        android:layout_width="@dimen/dp_16"
        android:layout_height="@dimen/dp_16"
        android:layout_marginStart="10dp"
        app:layout_constraintBottom_toBottomOf="@+id/freeCancellationText"
        app:layout_constraintStart_toEndOf="@+id/freeCancellationText"
        app:layout_constraintTop_toTopOf="@+id/freeCancellationText"
        app:srcCompat="@drawable/info_green" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/dividerBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="timeAndInfoLayout,discountText,freeCancellationText,serviceName,freeCancellationIcon,mspText,mrpText"
        tools:layout_editor_absoluteX="15dp"
        tools:layout_editor_absoluteY="658dp" />

    <View
        android:id="@+id/divider9"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:background="#d7dff0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/dividerBarrier" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/merchantNameTitle"
        style="@style/small_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/black_n"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/divider9"
        tools:text="Service provided by" />

    <RelativeLayout
        android:id="@+id/merchantRatingLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:padding="@dimen/dp_4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/merchantNameTitle">

        <aapt:attr name="android:background">

            <shape android:shape="rectangle">

                <corners android:radius="3dp" />

                <solid android:color="#1bbb33" />
            </shape>

        </aapt:attr>

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/merchantRatingText"
            style="@style/body_3_m"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            tools:text="4.5" />

        <ImageView
            android:id="@+id/merchantRatingIcon"
            android:layout_width="@dimen/dp_10"
            android:layout_height="@dimen/dp_10"
            android:layout_centerVertical="true"
            android:layout_marginLeft="2.7dp"
            android:layout_toRightOf="@id/merchantRatingText"
            app:srcCompat="@drawable/hs_merchant_rating_star" />

    </RelativeLayout>

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/merchantName"
        style="@style/body_2_r"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="20dp"
        android:textColor="@color/black_n"
        app:layout_constraintBottom_toBottomOf="@+id/merchantRatingLayout"
        app:layout_constraintEnd_toStartOf="@+id/changeMerchantCTA"
        app:layout_constraintStart_toEndOf="@+id/merchantRatingLayout"
        app:layout_constraintTop_toTopOf="@+id/merchantRatingLayout"
        tools:text="Balaji Deep Cleaning" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/otherProviderTitle"
        style="@style/small_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/black_n"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/divider9"
        tools:text="Other Providers available" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/changeMerchantCTA"
        style="@style/body_2_b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:gravity="end"
        android:textColor="@color/delight"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/otherProviderTitle"
        tools:text="Change (3 Available)" />

现在每当我在状态之间停止并尝试操作视图时，就像有一个按钮一样，点击该按钮会出现一个底部表格，然后我选择另一个商家，现在当它在进行中操作布局时它没有显示任何东西..只是消失了，一旦我进入任何状态，一切正常。像这样 -

完整视频在这里 - full video of Bug

我不明白这个问题，谁能告诉我为什么会这样？以及如何解决。

Answer 1

你可以用<Transition .... motion:layoutDuringTransition="honorRequest" >修复它

Answer 2

MotionLayout 的工作原理是在起点和终点拍摄视图位置的快照（由 ConstraintSet 计算）。然后对所有变化的参数进行插值。一旦停止 Tat 开始或结束状态，它的操作类似于 ConstraintLayout。如果正在移动视图，则将调用一系列 .layout(t,b,l,r)（后跟 draw）如果正在调整视图大小，则将调用一系列 measure()、layout() 和 draw()会被调用

开始和结束布局由 ConstraintSet 定义。 从理论上讲，您尝试做的事情是可能的，但很困难，并且需要其他一些电话。

如果想创建一个简化版本并提交一个错误，包括 3 个主要文件（MainAcivity、layout 和 motionScene）