當(dāng)前位置：首頁 > 运维知识 > Android >内容正文

Android

【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

發(fā)布時(shí)間：2025/5/22 Android 57 豆豆

生活随笔收集整理的這篇文章主要介紹了【Android】Anroid5.0+新控件---酷炫标题栏的简单学习小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Android5.0+推出的新控件感覺特別酷，最近想模仿大神做個(gè)看圖App出來，所以先把這些新控件用熟悉了。
新控件的介紹、使用等等網(wǎng)上相應(yīng)的文章已經(jīng)特別多了，題主也沒那能力去寫篇詳解出來，本篇隨筆記錄的主要是題主學(xué)習(xí)這些新控件時(shí)遇見的一些困惑以及在搞了半天后的一絲理解，或許也有新手也會(huì)碰到跟我一樣的困惑，相互學(xué)習(xí)哈，如果有哪個(gè)地方理解錯(cuò)了，還望告知。

效果

首先看下效果，本篇也就是只記錄以下兩張動(dòng)圖中所涉及到的新控件

AppBarLayout+CollapsingToolbarLayout+Toolbar

以前手機(jī)里的App風(fēng)格雖然各種各樣，但對于標(biāo)題欄其實(shí)都差不多，很少能見到類似上圖中的效果。題主之前一直以為標(biāo)題欄也就是一個(gè)簡單的導(dǎo)航欄，也就是放個(gè)標(biāo)題，配幾個(gè)圖標(biāo)而已。但其實(shí)還可以像上面一樣實(shí)現(xiàn)一些較酷炫的效果的。

首先介紹下這里用到的控件：AppBarLayout+CollapsingToolbarLayout+Toolbar

AppBarLayout + CollapsingToolbarLayout

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout.

上面是官網(wǎng)的介紹，AppBarLayout其實(shí)就是一個(gè)繼承自LinearLayout,默認(rèn)實(shí)現(xiàn)子控件垂直布局的基本容器，相區(qū)別于LinearLayout的是，它提供給它的子控件一個(gè)響應(yīng)滑動(dòng)事件的行為。

CollapsingToolbarLayout則只是一個(gè)對Toolbar進(jìn)行包裝，實(shí)現(xiàn)了可以對標(biāo)題欄進(jìn)行折疊功能的一個(gè)基本容器，它是作為AppBarLayout的直接子布局來使用。

這么說好像也不怎么好理解，題主就按自己的理解講得通俗點(diǎn)，舉個(gè)例子：
上面那張動(dòng)圖里，標(biāo)題欄包括了一個(gè)Toolbar、一個(gè)背景圖（imageView)、一個(gè)FAB按鈕。這里的Toolbar、imageView都是AppbarLayout的子控件。
當(dāng)滑動(dòng)屏幕時(shí)，子控件都做出了相應(yīng)的行為（滑出屏幕，固定頂端等），這些行為其實(shí)就是AppbarLayout提供給它子控件的功能。也就是說，如果我們想要讓我們的標(biāo)題欄控件能夠響應(yīng)滑動(dòng)事件的話，就需要用AppBarLayout作為他們的父容器。

至于CollapsingToolbarLayout則是給子控件提供了折疊的功能，什么是折疊呢？往下看
不知道大家學(xué)習(xí)的時(shí)候會(huì)不會(huì)跟題主一樣，有個(gè)疑問：既然AppBarLayout已經(jīng)為子控件提供了響應(yīng)滑動(dòng)的行為，那么為什么還需要一個(gè)CollapsingToolbarLayout？

我們先來看下，上面那動(dòng)畫實(shí)現(xiàn)的布局代碼結(jié)構(gòu)：

CollapsingToolbarLayout作為AppBarLayout的子控件，設(shè)置了ScrollFlags的屬性值，因此它可以響應(yīng)滑動(dòng)事件，所以會(huì)出現(xiàn)上面動(dòng)圖的效果。
那么，我們來嘗試下，如果去掉CollapsingToolbarLayout會(huì)怎么樣呢？

布局代碼結(jié)構(gòu)：

效果：

圖片背景只是簡單的往上滑，沒有之前那種視差的效果了。而且Toolbar也跑到下面去了，那么，我們在把ImageView和Toolbar換個(gè)位置試下：

布局代碼結(jié)構(gòu)：

效果：

Toolbar和ImageView不滑動(dòng)了！！為什么，下面說。

很明顯的一點(diǎn)，ImageView和Toolbar變成了線性垂直布局的了。細(xì)心點(diǎn)的讀者會(huì)發(fā)現(xiàn)，我們上面剛提到過AppBarLayout是繼承自LinearLayout默認(rèn)實(shí)現(xiàn)子控件垂直布局。

也就是說，AppBarLayout只是提供給它的子控件們，按照從上到下的優(yōu)先級來響應(yīng)子控件設(shè)置的響應(yīng)行為。什么意思，如果AppBarLayout的第一個(gè)子控件沒有設(shè)置ScrollFlags屬性或者沒有設(shè)置scroll值，那么這個(gè)子控件就不會(huì)響應(yīng)滑動(dòng)事件，那么這個(gè)子控件下方的控件即使設(shè)置了各種響應(yīng)行為，也不會(huì)有任何效果。

我們上面的代碼中，Toolbar是AppBarLayout的第一個(gè)子控件，雖然設(shè)置了scroll值，但也設(shè)置了exitUntilCollapsed值，這個(gè)的作用是，當(dāng)向上滑動(dòng)時(shí)，這個(gè)控件也會(huì)跟著滑出屏幕，直到它還留在屏幕內(nèi)的高度達(dá)到最小高度（沒有設(shè)置好像默認(rèn)就是wrap_content)時(shí)停止。

再回到我們問題來，Toolbar已經(jīng)達(dá)到了它的最小高度了，所以它被固定在頂端不會(huì)動(dòng)了，因此，即便在它下方的ImageView也設(shè)置了scroll屬性值，但由于是線性布局，它也就動(dòng)不了了。所以也就有了CollapsingToolbarLayout。

所以，CollapsingToolbarLayout就是給這些子控件們安排具體的滑動(dòng)細(xì)節(jié)，例如：ImageView要實(shí)現(xiàn)漸變的效果；Toolbar的標(biāo)題要能夠有收縮/擴(kuò)展的效果;最上面的子控件不動(dòng)，下面的先滑動(dòng)等等效果。這些就是由CollapsingToolbarLayout來提供的效果。

總結(jié)下，Toolbar、ImageView都是作為標(biāo)題欄的元素，AppBarLayout給它們提供可以響應(yīng)滑動(dòng)的行為，而CollapsingToolbarLayout則是來安排誰不動(dòng)，誰先動(dòng)、怎么動(dòng)。

如何使用

好了，這樣一來對于AppBarLayout和CollapsingToolbarLayout就有一個(gè)大概的理解了，那么下面就看看該怎么用。

AppBarLayout

Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.

AppBarLayout提供了一個(gè)布局參數(shù)scrollFlags,通過在它的子控件中設(shè)置這個(gè)屬性的值，就可以實(shí)現(xiàn)相應(yīng)的行為。使用方法就像上面官網(wǎng)說的，可以在xml布局文件中直接在子控件中通過設(shè)置app:layout_scrollFlags，也可以在java代碼中通過子控件實(shí)例對象調(diào)用setScrollFlags(int)來實(shí)現(xiàn)。

至于ScrollFlags的值一共有以下幾種：

scroll|enterAlways|enterAlwaysCollapsed|exitUntilCollapsed|snap

scroll： 想要子控件能有響應(yīng)的行為，scroll是必須要設(shè)置的；也就是說，要想其他值能起作用，那么scroll值必須設(shè)置，中間用|隔開。這點(diǎn)很重要，網(wǎng)上很多文章只是介紹ScrollFlags屬性有這幾個(gè)取值，新手自己動(dòng)手時(shí)往往不知道scroll是必須要的，經(jīng)常就出現(xiàn)沒任何滑動(dòng)的效果。然后就卡在這，比如題主（囧）。

enterAlways|enterAlwaysCollapsed：把這兩個(gè)放一起介紹是因?yàn)?#xff0c;后者要起作用必須要在前者的基礎(chǔ)上，也就是說兩個(gè)值都設(shè)置時(shí)后者才會(huì)起作用。至于作用其實(shí)就是當(dāng)你一向下滑動(dòng)屏幕時(shí)，控件就能馬上顯示出來，不必滑到頂端。

snap：當(dāng)你停止滑到屏幕時(shí)，控件自動(dòng)恢復(fù)原樣或者自動(dòng)滑到底。

CollapsingToolbarLayout

跟AppBarLayout很像，CollapsingToolbarLayout提供了一個(gè)布局參數(shù)CollapseMode，一樣是兩種方法，xml布局文件中通過app:layout_collapseMode設(shè)置，或者在java代碼中調(diào)用setCollapseMode(int)。

注意

ScrollFlags屬性只能設(shè)置在AppBarLayout的子控件上面，在孫子或曾孫子等等設(shè)置沒有效果。拿上面的例子說，CollapsingToolbarLayout是AppBarLayout的子控件，ImageView、Toolbar是AppBarLayout的孫子控件，如果你在ImageView、Toolbar控件上面設(shè)置app:layout_scrollFlags屬性值是不會(huì)起作用的，只有在CollapsingToolbarLayout設(shè)置才能起作用。

題主開始時(shí)想當(dāng)然的以為在CollapsingToolbarLayout上面只設(shè)置scroll值，在ImageView、上設(shè)置snap,在Toolbar上面設(shè)置exitUntilCollapsed。這樣就可以單獨(dú)設(shè)置各自需要的效果。本來還自己這樣想是正確的，結(jié)果一直沒得到預(yù)期的效果，在這里瞎琢磨了半天（囧）。

AppBarLayout 是為其子控件提供響應(yīng)屏幕滑動(dòng)事件，既然要響應(yīng)屏幕的滑動(dòng)事件，自然要監(jiān)聽除了AppBarLayout之外布局的滑動(dòng)行為，所以在布局代碼里，app:layout_behavior="@string/appbar_scrolling_view_behavior" 這個(gè)屬性不要忘記設(shè)置了，這個(gè)屬性是 CoordinatorLayout 默認(rèn)實(shí)現(xiàn)的一個(gè)滑動(dòng)行為，所以這也是為什么要把 CoordinatorLayout 作為根布局的原因，只有這樣，設(shè)置 app:layout_behavior="@string/appbar_scrolling_view_behavior" 才會(huì)有效，一般這個(gè)屬性是設(shè)置在 AppBarLayout 下面的可滑動(dòng)控件。當(dāng)然，如果你不想這樣的話，可以去相關(guān)的 Behavior 的知識(shí)。

例如

<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"tools:context="com.iwin.fragment01.MainActivity"><android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"android:theme="@style/AppTheme.AppBarOverlay"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapse"android:layout_width="match_parent"android:layout_height="match_parent"app:contentScrim="?attr/colorPrimary"app:expandedTitleGravity="bottom|center"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:scaleType="centerCrop"android:src="@drawable/meinv3"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:minWidth="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/AppTheme.PopupOverlay" /></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><include layout="@layout/content_main" /><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="@dimen/fab_margin"android:src="@android:drawable/ic_dialog_email"app:layout_anchor="@id/appbar"app:layout_anchorGravity="bottom|end" /></android.support.design.widget.CoordinatorLayout>  <android.support.v4.widget.NestedScrollViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"tools:showIn="@layout/app_bar_main"tools:context="com.iwin.fragment01.MainActivity"><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"></FrameLayout> </android.support.v4.widget.NestedScrollView>

最近剛開通了公眾號，想激勵(lì)自己堅(jiān)持寫作下去，初期主要分享原創(chuàng)的Android或Android-Tv方面的小知識(shí)，感興趣的可以點(diǎn)一波關(guān)注，謝謝支持~~

轉(zhuǎn)載于:https://www.cnblogs.com/dasusu/p/5548120.html

總結(jié)

以上是生活随笔為你收集整理的【Android】Anroid5.0+新控件---酷炫标题栏的简单学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： CSS样式表margin和padding
下一篇： codevs 2612 最有分解方案（