如何在RelativepsingToolbarLayout中嵌套RelativeLayout? (正在裁剪RelativeLayout的底部)

时间:2017-07-13 17:42:11

标签: android android-layout android-collapsingtoolbarlayout android-relativelayout

我正在尝试将RelativeLayout放在CollapsingToolbarLayout中。我从Scrolling Activitity模板开始。最终的结构看起来像这样:

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

我意识到ImageView正在被“裁剪”。它需要一个大约25dp的layout_marginBottom来显示完整大小。我可以使用这个神奇的数字,但我更愿意正确解决这个问题,因为ImageView是一个小圆圈来表示ViewPager,任何小的变化都可以隐藏它。有趣的是,xml布局在预览窗口中正确显示,但在模拟器上我需要这个边距。那么,关于如何解决这个问题的任何想法?

完整的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>

1 个答案:

答案 0 :(得分:2)

简答:

将此属性添加到R​​elativeLayout:

android:fitsSystemWindows="true"

更长的回答:

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

此顶部填充会影响CoordinatorLayout的所有子项,包括RelativeLayout。由于它被按下~25dp(系统栏的大小),因此图像会出现裁剪。

通过将属性添加到R​​elativeLayout,系统会为您重新调整它,问题就会消失。