如何将 RelativeLayout 嵌套在 CollapsingToolbarLayout 中？ （正在裁剪 RelativeLayout 的底部）

Question

我正在尝试将 RelativeLayout 放入 CollapsingToolbarLayout 中。我从滚动活动模板开始。最终结构如下所示：

<AppBarLayout>
    <CollapsingToolbarLayout>
        <RelativeLayout>
            <ImageView android:layout_alignParentBottom="true"/>
        </RelativeLayout>
        <Toolbar/>
    </CollapsingToolbarLayout>
</AppBarLayout>

我意识到 ImageView "cropped"。它需要 layout_marginBottom 大约 25dp 才能显示全尺寸。我可以使用这个神奇的数字，但我更愿意正确地解决这个问题，因为 ImageView 是一个小圆圈来指示 ViewPager，任何小的变化都可以隐藏它。有趣的是 xml 布局在预览 window 中正确显示，但在模拟器上我需要这个边距。那么，我有什么办法可以解决这个问题吗？

完整的 xml 布局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.example.attemptscrolling.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src=    "@drawable/ic_circle"/>

                <ImageView
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="25dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_circle"/>

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Answer 1

简答：

将此属性添加到您的 RelativeLayout：

android:fitsSystemWindows="true"

更长的答案：

布局的根 (CoordinatorLayout) 指定 android:fitsSystemWindows="true"。这将导致系统向该视图添加顶部填充，使其内容避开屏幕顶部的系统栏。

此顶部填充会影响 CoordinatorLayout 的所有子项，包括您的 RelativeLayout。由于它被向下推了 ~25dp（系统栏的大小），您的图像看起来被裁剪了。

在你的RelativeLayout中也添加该属性，系统会为你重新调整，问题就会消失。