Android 运动布局无法相应工作

Question

Android 运动布局无法相应工作

Ast*_*nio 4 android android-transitions android-constraintlayout android-motionlayout

我是新手motionlayout，一直在关注像这样的各种在线教程，以了解它是如何工作的。简而言之，我已经知道它基本上是动画的constraintSets，你有一个start和end constraintSet，你可以用它进一步定制KeyFrameSets。我有这个布局

我想模仿Lyft's bottom sheet

根据我的布局，Where are you going按钮应该随着搜索目的地textInputs淡入而慢慢淡出。recyclerview底部的应该保持保存addresses，它不会受到影响。我尝试使用标准实现此实现bottomsheet，但在动画方面遇到了挑战，它很奇怪，flickering所以我决定使用MotionLayout普通视图。

我的bottomsheet布局如下

<com.google.android.material.card.MaterialCardView 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:id="@+id/cardChooseAddressBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    app:shapeAppearance="@style/ShapeAppearanceRoundedLargeTopCorners">



    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottomSheetConstraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">



        <ImageView
            android:id="@+id/swipeUpHandle"
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:layout_gravity="center"
            android:background="@drawable/ic_swipe_up_handle"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />



        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/hiThere"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/medium_margin"
            android:text="@string/hi_there"
            android:textAppearance="@style/h6_headline"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/swipeUpHandle"
            />


        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnSearch"
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginTop="@dimen/medium_margin"
            android:gravity="start|center_vertical"
            android:letterSpacing="0.0"
            android:text="@string/where_are_you_going"
            android:textAllCaps="false"
            android:textAppearance="@style/subtitle1"
            android:textColor="@android:color/darker_gray"
            app:backgroundTint="@android:color/white"
            app:icon="@drawable/ic_search"
            app:iconTint="@android:color/black"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/hiThere"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceRoundedMediumAllCorners" />



        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/addressViews"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btnSearch">



            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/inputOrigin"
                style="@style/textInput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/medium_margin"
                android:hint="@string/search_destination"
                android:textColorHint="@android:color/darker_gray"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edtOrigin"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="text"
                    android:textAppearance="@style/subtitle1"
                    android:textColor="@android:color/white" />

            </com.google.android.material.textfield.TextInputLayout>

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/inputDestination"
                style="@style/textInput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/medium_margin"
                android:hint="@string/search_destination"
                android:textColorHint="@android:color/darker_gray"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/inputOrigin">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/edtDestination"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="text"
                    android:textAppearance="@style/subtitle1"
                    android:textColor="@android:color/white" />

            </com.google.android.material.textfield.TextInputLayout>


        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/recyclerAddresses"
            android:layout_marginTop="@dimen/medium_margin"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/addressViews"
            tools:listitem="@layout/recycler_view_item" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

Run Code Online (Sandbox Code Playgroud)

我包含的父布局bottomsheet如下

<?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:id="@+id/motionLayout"
    app:layoutDescription="@xml/taxi_bottomsheet_scene"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />



    <include
        layout="@layout/choose_destination_bottom_sheet_layout"/>

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

Run Code Online (Sandbox Code Playgroud)

最后我的taxi_bottomsheet_scene动作场景是

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



    <Transition
        app:constraintSetEnd="@+id/expanded"
        app:constraintSetStart="@+id/collapsed"
        app:duration="1000">

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


    </Transition>


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

        <Constraint
            android:id="@+id/cardChooseAddressBottomSheet"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHeight_percent="1"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0" />



        <Constraint
            android:id="@+id/addressViews"
            app:layout_constraintHeight_percent="1"/>


        <Constraint
            android:id="@+id/btnSearch"
            app:layout_constraintHeight_percent="0"/>

    </ConstraintSet>




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

        <Constraint
            android:id="@+id/cardChooseAddressBottomSheet"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHeight_percent="0.4"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0"  />


        <Constraint
            android:id="@+id/addressViews"
            app:layout_constraintHeight_percent="0.0"/>



        <Constraint
            android:id="@+id/btnSearch"
            app:layout_constraintHeight_percent="0.0"/>
    </ConstraintSet>





</MotionScene>

Run Code Online (Sandbox Code Playgroud)

当我启动这个应用程序时，我无法让底页向上滑动，它根本没有以任何方式响应。我注意到的一件事是添加app:layoutDescription="@xml/taxi_bottomsheet_scene"属性后，底部图纸尺寸更改为我在中指定的尺寸，constraintSetStart但addressViews视图没有更改。

所以我的布局看起来像

所以我的问题是，我的底页不响应我的swipes并addressViews在初始状态下消失，我哪里出了问题？

Answer 1

Ast*_*nio 5

我终于成功地使其工作，同时使用MotionLayout和CoordinatorLayout。我只会发布Coordinator解决方案，因为它很长而且我没有时间，如果有人需要它，请评论，我会发布。

我创建了 3 个布局，1. The main layout with the map，2. Top bar with the to and from address EditTexts它3. The bottom layout向上滑动并显示顶部栏。

解决方案 1 使用 CoordinatorLayout

顶栏

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:layout_marginBottom="@dimen/medium_margin"
    app:layout_scrollFlags="noScroll">


    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topToolBar"
        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"
        app:navigationIcon="@drawable/ic_arrow_back_black_24dp" />


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/addressViews"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/topToolBar">


        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imgOrigin"
            android:layout_width="@dimen/activity_horizontal_margin"
            android:layout_height="@dimen/activity_horizontal_margin"
            android:layout_marginStart="@dimen/medium_margin"
            android:layout_marginEnd="@dimen/medium_margin"
            app:layout_constraintBottom_toBottomOf="@+id/inputOrigin"
            app:layout_constraintEnd_toStartOf="@+id/inputOrigin"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/inputOrigin"
            app:srcCompat="@drawable/ic_origin"
            app:tint="@color/colorAccent" />


        <View
            android:layout_width="2dp"
            android:layout_height="0dp"
            android:layout_marginTop="@dimen/xsmall_margin"
            android:layout_marginBottom="@dimen/xsmall_margin"
            android:background="@drawable/accent_to_color_primary_dark__negative_90_gradient"
            app:layout_constraintBottom_toTopOf="@+id/imgDestination"
            app:layout_constraintEnd_toEndOf="@+id/imgOrigin"
            app:layout_constraintStart_toStartOf="@+id/imgOrigin"
            app:layout_constraintTop_toBottomOf="@+id/imgOrigin" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/inputOrigin"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/medium_margin"
            android:hint="@string/pick_up_location"
            android:marqueeRepeatLimit="marquee_forever"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imgOrigin"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edtOrigin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:inputType="textPostalAddress"
                android:singleLine="true"
                android:textAppearance="@style/subtitle1" />

        </com.google.android.material.textfield.TextInputLayout>


        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imgDestination"
            android:layout_width="@dimen/activity_horizontal_margin"
            android:layout_height="@dimen/activity_horizontal_margin"
            android:layout_marginStart="@dimen/medium_margin"
            android:layout_marginEnd="@dimen/medium_margin"
            app:layout_constraintBottom_toBottomOf="@+id/inputDestination"
            app:layout_constraintEnd_toStartOf="@+id/inputDestination"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/inputDestination"
            app:srcCompat="@drawable/ic_destination"
            app:tint="@color/colorPrimaryDark" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/inputDestination"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/medium_margin"
            android:hint="@string/search_destination"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imgDestination"
            app:layout_constraintTop_toBottomOf="@id/inputOrigin">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edtDestination"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                android:inputType="textPostalAddress"
                android:singleLine="true"
                android:textAppearance="@style/subtitle1" />

        </com.google.android.material.textfield.TextInputLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.appbar.AppBarLayout>

Run Code Online (Sandbox Code Playgroud)

底部布局就像底部表单一样

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/cardChooseAddressBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardBackgroundColor="@color/white"
app:behavior_hideable="false"
app:layout_behavior="@string/bottom_sheet_behavior">


<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">



    <ImageView
        android:id="@+id/swipeUpHandle"
        android:layout_width="35dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:background="@drawable/ic_swipe_up_handle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/hiThere"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hi_there"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:textAppearance="@style/h6_headline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/swipeUpHandle" />


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnSearch"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:gravity="start|center_vertical"
        android:letterSpacing="0.0"
        android:text="@string/where_are_you_going"
        android:textAllCaps="false"
        android:textAppearance="@style/subtitle1"
        android:textColor="@android:color/darker_gray"
        app:backgroundTint="@android:color/white"
        app:icon="@drawable/ic_search"
        app:iconSize="@dimen/medium_icon"
        app:iconTint="@color/colorAccent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/hiThere"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceRoundedMediumAllCorners" />


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerAddresses"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSearch" />


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerSearchAddresses"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/white"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnSearch" />

</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

Run Code Online (Sandbox Code Playgroud)

最后，我的地图布局中包含了两个布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/coordinator"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent="0.67"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imgMapCenter"
            android:layout_marginBottom="@dimen/xlarge_margin"
            android:visibility="invisible"
            android:tint="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="@id/map"
            app:layout_constraintEnd_toEndOf="@id/map"
            app:layout_constraintStart_toStartOf="@id/map"
            app:layout_constraintTop_toTopOf="@id/map"
            app:srcCompat="@drawable/ic_destination" />
    </androidx.constraintlayout.widget.ConstraintLayout>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabMyLocation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        app:backgroundTint="@color/white"
        app:fabSize="mini"
        app:layout_anchor="@id/cardChooseAddressBottomSheet"
        app:layout_anchorGravity="top|right"
        app:srcCompat="@drawable/ic_origin"
        app:tint="@color/colorAccent" />
    <include layout="@layout/taxi_fragment_set_destination_top_bar" />

    <include layout="@layout/taxi_fragment_bottom_sheet_addresses_layout" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Run Code Online (Sandbox Code Playgroud)

还有我的片段

   final private BottomSheetBehavior.BottomSheetCallback addressBottomSheetCallBack = new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            switch (newState) {
                case BottomSheetBehavior.STATE_HIDDEN:
                    break;

                case BottomSheetBehavior.STATE_SETTLING:
                    break;

                case BottomSheetBehavior.STATE_EXPANDED:
                    if (!allPermissionsGranted())
                        requestForLocationPermissions();
                    topAddressBar.setVisibility(Visibility.VISIBLE);
                     fabMyLocation.hide();
                    break;

                case BottomSheetBehavior.STATE_COLLAPSED:
                    if (!allPermissionsGranted())
                        requestForLocationPermissions();
                    topAddressBar.setVisibility(Visibility.INVISIBLE);
                    fabMyLocation.show();
                    break;

                case BottomSheetBehavior.STATE_DRAGGING:
                    break;

                case BottomSheetBehavior.STATE_HALF_EXPANDED:
                    break;
            }
        }



   BottomSheetBehavior addressBottomSheetBehavior = BottomSheetBehavior.from(cardChooseAddressBottomSheet);

      topAddressBar.post(() -> {
            CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) cardChooseAddressBottomSheet.getLayoutParams();
            layoutParams.height = ((Resources.getSystem().getDisplayMetrics().heightPixels + (int) utils.percentageOf(62, btnSearch.getMeasuredHeight())) - topAddressBar.getMeasuredHeight());
        });


        addressBottomSheetBehavior.setPeekHeight((int) utils.percentageOf(29, Resources.getSystem().getDisplayMetrics().heightPixels), true);
        addressBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);


        topToolBar.setNavigationOnClickListener(view12 -> {
            if (addressBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
                utopAddressBar.setVisibility(INVISIBLE);
                addressBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            } else
                Navigation.findNavController(view12).navigateUp();
        });

        addressBottomSheetBehavior.addBottomSheetCallback(addressBottomSheetCallBack);

Run Code Online (Sandbox Code Playgroud)

请注意，我正在使用INVISIBLE而不是GONE在topAddressBar？这是因为每次我调用GONE布局时，理想情况下都会recalculate根据我的假设，并且地图会闪烁，为了阻止我不得不使用不可见，因为布局不会收缩，而是它仍然占用相同的空间，但只是不可见。

另请注意，我添加了填充，cardChooseAddressBottomSheet.getLayoutParams()这是因为我需要工作表不要在下方太深，topAddressBar以免隐藏我的 recyclerview 内容。当前的填充确保 recyclerview 完全可见，并且其顶部的所有其他内容都位于topAddressBar

归档时间：	6 年，3 月前
查看次数：	12599 次
最近记录：	6 年，2 月前