【问题标题】:CoordinatorLayout + CollapsingToolbarLayout scrolling underneath the status barCoordinatorLayout + CollapsingToolbarLayout 在状态栏下方滚动
【发布时间】:2016-05-11 13:01:27
【问题描述】:

我的布局有一个奇怪的问题。我有一个CoordinatorLayout,里面有一个CollapsingToolBarLayout。我有一个透明的状态栏,可以更好地在顶部显示图像。因此我在这个ImageView 上设置了fitsSystemWindow。我现在遇到的问题是,当工具栏完全折叠时,工具栏的顶部会滚动到系统状态栏后面。有没有办法防止这种行为?

以下是截图:

这是我的布局:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
    android:id="@+id/main_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main_collapsing"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="140dp"
        app:expandedTitleMarginBottom="90dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">
        <ImageView
            app:layout_collapseMode="parallax"
            android:id="@+id/icon"
            android:transitionName="pic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/missing_album_art"
            android:tint="#AA000000"
            android:fitsSystemWindows="true"/>
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="20dp"
            app:layout_collapseMode="parallax">
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:padding="20dp"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:id="@+id/smallicon"/>
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:layout_gravity="bottom"
                    android:padding="20dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/artist"
                        android:ellipsize="end"
                        android:singleLine="true"
                        android:textSize="24sp"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:singleLine="true"
                        android:id="@+id/date"/>
                </LinearLayout>
            </LinearLayout>
        </FrameLayout>
        <android.support.v7.widget.Toolbar
            android:id="@+id/main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/list"
    android:dividerHeight="2dp"
    android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

另外,我在创建活动时稍微调整了布局参数:

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

【问题讨论】:

  • 如果你不想要Status Bar Color Transparent那么你可以用&lt;item name="android:statusBarColor"&gt;@color/colorPrimaryDark&lt;/item&gt;来改变它。
  • @jaydroider 我确实希望状态栏保持透明。我只是不希望工具栏滚动到状态栏后面
  • 将您的Recycler ViewFrame LayoutHeight and Width 一起带到match_parent 尝试检查一下。

标签: android android-layout android-coordinatorlayout android-collapsingtoolbarlayout android-appbarlayout


【解决方案1】:

android:fitsSystemWindows="true" 添加到布局的根目录,即CoordinatorLayout

大多数情况下,您的应用不需要在状态栏或导航栏下进行绘制,但如果这样做:您需要确保交互元素(如按钮)没有隐藏在它们下方。这就是 android:fitsSystemWindows=“true” 属性的默认行为:它设置 View 的填充以确保内容不会覆盖系统窗口。

阅读更多关于here的信息。

【讨论】:

  • 我还必须将 fitSystemWindows="true" 标志从 Collapsingtoolbarlayout 移动到 appbarlayout。遗憾的是,状态栏下方没有颜色,但现在看起来不那么有问题了!
猜你喜欢
  • 2017-08-16
  • 1970-01-01
  • 2016-03-02
  • 1970-01-01
  • 1970-01-01
  • 2016-12-29
  • 2016-01-20
  • 2017-08-29
  • 1970-01-01
相关资源
最近更新 更多