CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏

最新推荐文章于 2024-03-05 13:28:01 发布

qq_32320807

最新推荐文章于 2024-03-05 13:28:01 发布

阅读量3.6k

点赞数

分类专栏： Android 控件属性栏目文章标签： CoordinatorLayout+AppBarLayout+Coll 上下滑折叠效果

Android 控件属性栏目专栏收录该内容

7 篇文章

订阅专栏

在之前的一篇博文里面我已经说明了CoordinatorLayout使用过程中遇到的问题，之后又发现结合CollapsingToolbarLayout使用时的另一个问题。CollapsingToolbarLayout里面的ImageView为背景并不能将状态栏覆盖。在网上查的方法感觉比较费劲，自己试了多次之后发现下面的这种处理算是最简单的了。
大概的思想是：

1.给Activity界面设置主题为透明状态栏的主题，因为5.0系统的限制即使设置透明状态栏之后状态栏上面仍然有一层浅灰色的背景，所以增加values-21的处理。

2.给CollapsingToolbarLayout里面的布局设置marginTop为-15dp目的是为了让进入界面之后，布局的背景能够向上覆盖到状态栏（可以是背景图片或者背景布局）。

fitsSystemWindows属性是为了让状态栏的颜色和该布局的颜色相同

----上面的-15dp的处理。是因为即使设置透明状态栏，刚进入界面的时候状态栏的颜色也是没有的，因为CollapsingToolbarLayout里面的背景图没有被拉上去。

3.给CollapsingToolbarLayout设置正常显示时状态栏的颜色

关键的代码：

1.给CollapsingToolbarLayout添加如下属性：

app:contentScrim="?attr/colorPrimary"
app:statusBarScrim="?attr/colorPrimary"

2.给CollapsingToolbarLayout里面的第一个child布局设置如下属性：

android:layout_marginTop="-15dp"
android:fitsSystemWindows=“true”
3.为当前Activity设置主题：

android:theme="@style/FullTheme"

3.1在values的styles.xml里面配置

3.2在values-v21的styles.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”
android:id="@+id/main_content"
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

<!--AppBarLayout跟它的名字一样，把容器类的组件全部作为AppBar。-->
<!--将AppBarLayout放在CoordinatorLayout中，就可以实现滚动效果。-->
<!--本例中，TabLayout在界面滚动时，随着Toolbar的逐渐隐藏，将占据Toolbar的位置，-->
<!--达到节省屏幕空间，界面动画效果的目的。-->

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:statusBarScrim="?attr/colorPrimary"
        app:titleEnabled="false">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="-15dp"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/bj"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="20dp"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="张三的龙虎山之旅"
                        android:textSize="@dimen/txs1" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:text="悠闲 朋友 经典"
                        android:textSize="@dimen/txs0" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="1天"
                        android:textColor="@color/gray_tv"
                        android:textSize="@dimen/txs1" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="8个景点"
                        android:textColor="@color/gray_tv"
                        android:textSize="@dimen/txs1" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="30dp"
                        android:text="在地图中查看 >"
                        android:textSize="@dimen/txs1" />
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>

        <!--//属性解析：-->
        <!--// app:theme：指定Toolbar的样式，包括ActionbarToggle和popupMenu的指示图标颜色-->
        <!--// app:popupTheme：指定popupMenu溢出后的样式-->
        <!--// app:title: 指定Toolbar中主Title的内容-->
        <!--// app:layout_scrollFlags的意思是：-->

        <!--设置的layout_scrollFlags有如下几种选项：-->
        <!--scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。-->
        <!--enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。-->
        <!--enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。-->
        <!--exitUntilCollapsed: 当视图会在滚动时，它一直滚动到设置的minHeight时完全隐藏。-->

        <!--// 需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，-->
        <!--// 而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。-->

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin"
            app:title="@null">

            <RelativeLayout
                android:id="@+id/ib_back_layout"
                android:layout_width="@dimen/item_h_50dp"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/ib_back"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="@dimen/m_10dp"
                    android:scaleType="fitCenter"
                    android:src="@mipmap/back" />
            </RelativeLayout>

            <TextView
                android:id="@+id/toolbar_titletv"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:drawablePadding="5dp"
                android:ellipsize="end"
                android:gravity="center"
                android:lines="1"
                android:scrollHorizontally="true"
                android:text=""
                android:textColor="@android:color/white" />

            <RelativeLayout
                android:id="@+id/ib_right_layout"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_gravity="right">

                <ImageView
                    android:id="@+id/ib_right"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerInParent="true"
                    android:scaleType="fitCenter"
                    android:src="@mipmap/ib_add" />
            </RelativeLayout>

        </android.support.v7.widget.Toolbar>

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

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

<!--//app:layout_behavior 属性，没错，--><!--// 如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果，那就必须在它下面的那个控件中加入这个属性，并且下面的这个控件必须是可滚动的。--><!--// 当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。-->

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            style="@style/linlayout_h2_style"
            android:layout_margin="@dimen/m_10dp">

            <TextView
                style="@style/tv_item_title_style"
                android:text="2017-11-21"
                android:textSize="@dimen/txs2" />

            <TextView
                style="@style/tv_item_title_style"
                android:layout_marginLeft="@dimen/m_10dp"
                android:text="09:11"
                android:textSize="@dimen/txs2" />

        </LinearLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/travel_plan_rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:nestedScrollingEnabled="false" />
    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

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

参考文章：

Android 状态栏全透明策略

android状态栏一体化(沉浸式状态栏)