Question

我正在尝试实现CoordinatorLayout，其中我需要缩小卡片视图。我计划稍后为此卡片视图的扩展和收缩状态设置不同的布局。我已经成功实现了空卡片视图，但是我在这张卡片视图的上边缘得到了一个奇怪的背景。

很难用文字解释所以这里是图片

以下是我的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">

<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:layout_margin="16dp">

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

        <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.v7.widget.CardView-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent"-->
                <!--android:background="@color/colorAccent"-->
                <!--android:layout_margin="8dp"/>-->
        </android.support.v7.widget.Toolbar>

    </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>

我希望此工具栏像卡片视图一样浮动。如果我需要更多细节，请告诉我。

您可以在Github Here找到完整的源代码。

Answer 1

您将layout_margin设置为AppBarLayout，它会垂直和水平设置此视图的边距（仅适用于顶部，底部，右侧和左侧）。

如果您想从特定一方设置保证金，则必须通过layout_marginLeft，layout_marginRight，layout_marginBottom和layout_marginTop手动设置保证金。

如此简单，如果你想删除上边距。然后只需手动设置边距，

<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:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp">

       <!-- your components here -->

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

Answer 2

我最终将相同数量的填充添加到CoordinatorLayout

android:paddingTop="16dp"

将AppBarLayout中的android:layout_margin="16"更改为

android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"

我已经测试了它并且有效

Answer 3

移除android.support.design.widget.CoordinatorLayout中的属性android:fitsSystemWindows="true"

协调员布局，工具栏顶部边缘奇怪的背景

3 个答案: