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

在之前的一篇博文里面我已经说明了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"?>
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">
    
    
    
    

    
    
    
    

            android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        android:fitsSystemWindows="true">

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


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

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

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

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

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

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

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

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

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

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

            
            
            
            
            

            
            
            
            
            

            
            

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

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

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

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

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

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

            

        

    

    

            android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

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

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

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

            

                            android:id="@+id/travel_plan_rv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:nestedScrollingEnabled="false" />
        

    


参考文章:

Android 状态栏全透明策略

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

android状态栏颜色修改


你可能感兴趣的:(CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏)