CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar實現漸變透明的狀態欄

原創 qq_32320807 2019-07-03 01:42

在之前的一篇博文裏面我已經說明了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狀態欄一體化(沉浸式狀態欄)

android狀態欄顏色修改

作者：a_yue10
來源：CSDN
原文：https://blog.csdn.net/a_yue10/article/details/78691288
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Android中自定義RatingBar實現星星大小,數量,間距等的設置

qq_32320807 2018-09-04 23:43:39