如何在折叠布局下的 CoordinatorLayout 中正确对齐元素？答案

【问题标题】：How to align elements properly in a CoordinatorLayout under a CollapsingLayout?如何在折叠布局下的 CoordinatorLayout 中正确对齐元素？
【发布时间】：2019-10-15 11:05:00
【问题描述】：

我想实现下面预览图片中显示的层次结构，我对可折叠布局和协调器布局没有先验知识，但我所做的导致视图寻呼机不显示它的内容。

我在一个主要活动中工作，它有一个 Coordinator layout 作为根布局、一个 collapsing toolbar、一个 viewpager、一个 bottom navigation bar 和一个隐藏的 bottom sheet

PS：我正在使用 AndroidX 支持库。

这是我的 XML 布局 activity_main.xml

<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:layout_height="match_parent"
    android:id="@+id/parent"
    android:fitsSystemWindows="true">

    <!-- RETRACTABLE TOOLBAR -->
    <com.google.android.material.appbar.AppBarLayout
       android:id="@+id/appbar"
       android:layout_width="match_parent"
       android:layout_height="@dimen/appbar_header_height"
       android:fitsSystemWindows="true"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
       <com.google.android.material.appbar.CollapsingToolbarLayout
           android:id="@+id/collapsing_toolbar"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:fitsSystemWindows="true"
           app:contentScrim="?attr/colorPrimary"
           app:expandedTitleMarginStart="@dimen/activity_margin_content"
           app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
           <ImageView
                android:id="@+id/iv_banner_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/banner"
                android:tintMode="multiply"
                app:layout_collapseMode="parallax" />
                <View
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_gravity="top"
                    android:background="@drawable/scrim_topdown"
                    android:fitsSystemWindows="true"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="160dp"
                    android:layout_gravity="bottom"
                    android:background="@drawable/scrim"/>
                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:layout_marginEnd="16dp"
                    android:layout_gravity="end">
                    <ImageView
                        android:src="@drawable/ic_user_placeholder"
                        android:id="@+id/iv_parent_profile_sm"
                        android:layout_width="32dp"
                        android:layout_height="32dp"/>
                </LinearLayout>
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/anim_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
                <LinearLayout
                    android:gravity="center_vertical"
                    android:layout_gravity="bottom"
                    android:layout_marginStart="12dp"
                    android:layout_marginEnd="12dp"
                    android:layout_marginBottom="12dp"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <LinearLayout
                        android:gravity="center_vertical"
                        android:layout_gravity="bottom"
                        android:orientation="horizontal"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                        <TextView
                            android:padding="4dp"
                            android:layout_marginEnd="6dp"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:id="@+id/tv_name"
                            android:drawableStart="@drawable/ic_person"/>
                        <TextView
                            android:layout_marginEnd="6dp"
                            android:padding="4dp"
                            android:id="@+id/tv_birth"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:drawableStart="@drawable/ic_cake"/>
                        <ImageView
                            android:padding="8dp"
                            android:id="@+id/iv_gender"
                            android:layout_width="32dp"
                            android:layout_height="32dp" />
                    </LinearLayout>
                </LinearLayout>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

    <!-- VIEW PAGER -->
    <androidx.viewpager.widget.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <!-- NAVIGATION BAR -->
    <com.gauravk.bubblenavigation.BubbleNavigationLinearView
            android:layout_alignParentBottom="true"
            android:id="@+id/bottom_navigation_view_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorWhite"
            android:elevation="12dp"
            android:padding="6dp"
            android:animateLayoutChanges="true"
            android:layout_gravity="bottom">
            <!-- bottom navigation bar elements -->
    </com.gauravk.bubblenavigation.BubbleNavigationLinearView>

    <!-- BOTTOM SHEETS -->
    <include layout="@layout/details_sheet" />
    <include layout="@layout/add_sheet"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这是想要的结果：

【问题讨论】：

标签： android android-layout android-viewpager android-coordinatorlayout android-collapsingtoolbarlayout

【解决方案1】：

您可以尝试重力在 CoordinatorLayout 内对齐。 android:layout_gravity="end" 这对我有用。

【讨论】：

【解决方案2】：

我通过将所有内容包装在 RelativeLayout 中得到了我需要的东西，然后我不断调整 android:layout_above 和 android:layout_below 直到我做对了

【讨论】：

【解决方案3】：

要在开头设置元素添加这个android:layout_gravity="start"

并在最后设置元素添加android:layout_gravity="end"

并将其设置在底部添加：android:layout_gravity="bottom"

【讨论】：