AppbarLayout最詳細使用說明

????????AppbarLayout是Material Design的一個控件,目的是為了實現(xiàn)一些酷炫到爆的效果,比如之前的折疊導航欄可以費勁心血的寫出來,現(xiàn)在利用Appbarlayout非常容易的就可以實現(xiàn)出來,當然需要配合其他幾個來控件實現(xiàn),這個我們待會再說.

最最簡單用法

? ? ? ? 最最簡單的用法,你可以用他來包裹一個Toolbar來用,如下圖,這是一個沒有被包裹的ToolBar,很簡單

沒有被包裹的ToolBar

? ? ? ? 然后下圖是一個被包裹的ToolBar


這是被包裹的

????顏色是默認的(你color文件中定義的colorPrimary顏色),最主要的是浮層效果,立體感的效果,這是你只是用toolbar沒有的效果,當然如果這個幅度太大,你先調(diào)小或者不要,可以在AppbarLayout中設置,如下:


記住是app開頭的屬性,不是android開頭的那個


效果沒了

app:expanded="true"? 這個屬性是配合CoordinatorLayout來使用的

正經(jīng)用法

然后我們就來學習一下這個控件的正經(jīng)用法,其實他的最主要特點是滑動,他需要配合倆個控件一起使用,那就是 CoordinatorLayout和CollapsingToolbarLayout因篇。

CoordinatorLayout

官方文檔的第一句話就非常醒目:CoordinatorLayout is a super-powered FrameLayout,非常直白娇哆,CoordinatorLayout 繼承于ViewGroup,它就是一個超級強大Framelayout浩蓉。說白了就是可以通過Behavior 協(xié)調(diào)子View 。

CollapsingToolbarLayout

官方文檔的介紹

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.?

CollapsingToolbarLayout是一個包裝Toolbar橘洞,實現(xiàn)了一個折疊的應用程序欄。它的目的是作為一個直接的孩子使用AppBarLayout

他能實現(xiàn)一下效果:

折疊標題

當布局完全可見時更大的標題,但隨著布局滾動屏幕而折疊并變小囤热。您可以將標題設置為通過顯示setTitle(CharSequence)。標題外觀可以通過collapsedTextAppearance和expandedTextAppearance屬性進行調(diào)整获三。

內(nèi)容蒙紗

滾動位置達到一定閾值時顯示或隱藏內(nèi)容旁蔼。你可以通過改變這個setContentScrim(Drawable)

狀態(tài)欄蒙紗

當滾動位置已經(jīng)達到一定的閾值時石窑,狀態(tài)欄顯示或隱藏牌芋。你可以通過改變這個setStatusBarScrim(Drawable)

視差滾動

子視圖可以選擇以視差方式在此布局內(nèi)滾動松逊。

固定位置的view

子View可以選擇全局固定在空間躺屁。這在實現(xiàn)折疊時非常有用,因為Toolbar即使布局正在移動经宏,它也可以固定到位犀暑。

結(jié)合使用

AppbarLayout要實現(xiàn)酷炫的滑動效果必須依賴于CoordinatorLayout使用,作為CoordinatorLayout的直接子view,如果父view是其他的viewGroup是沒有效果的.滑動的特效用如下倆種方式設置

setScrollFlags

app:layout_scrollFlags

layout_scrollFlags有5種動作,分別是scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap

1,scroll,子View 添加layout_scrollFlags屬性 的值scroll 時烁兰,這個View將會隨著可滾動View(如:ScrollView,以下都會用ScrollView 來代替可滾動的View )一起滾動耐亏,就好像子View 是屬于ScrollView的一部分一樣。


布局


scroll

????注意:ScrollFlags是設置給AppbarLayout的子View的,他可以有很多子View,你給那個子View設置,那個子View就會有效果,如下圖,我們有倆個ToolBar,一個設置ScrollFlags,一個沒有設置.

2,enterAlways,子View 添加layout_scrollFlags屬性 的值有enterAlways 時, 當ScrollView 向下滑動時沪斟,子View 將直接向下滑動广辰,而不管ScrollView 是否在滑動。注意:要與scroll 搭配使用,否者是不能滑動的择吊。



注意:這一看跟scroll沒啥區(qū)別啊李根,scroll是作為類似于一個header的形式存在的,當你歡動view的時候他會跟著一起往上滑几睛,當先往下滑額時候他也會往下滑房轿,直到view滑倒底部,他才會出現(xiàn)所森,而enterAlways是作為一個導航欄的東西囱持,雖然向上滑動的時候它也會向上滑動,但他只是滑出界面焕济,當你view向下滑動的時候纷妆,即使view已經(jīng)滑動到底部,它也會立即滑動出來吼蚁,而不會像單純的scroll一樣必須view滑倒頭部才出來凭需。

3,enterAlwaysCollapsed, enterAlwaysCollapsed 是對enterAlways 的補充,當ScrollView 向下滑動的時候肝匆,滑動View(也就是設置了enterAlwaysCollapsed 的View)下滑至折疊的高度粒蜈,當ScrollView 到達滑動范圍的結(jié)束值的時候,滑動View剩下的部分開始滑動旗国。這個折疊的高度是通過View的minimum height (最小高度)指定的枯怖。

注意:app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

必須這樣三個一起用才會有想要的效果, enterAlwaysCollapsed是 enterAlways擴展度硝, enterAlways又必須依賴于 scroll蕊程,你可以 enterAlwaysCollapsed和 scroll用,但是只有scroll的效果

4,exitUntilCollapsed, 當ScrollView 滑出屏幕時(也就時向上滑動時)辨赐,滑動View先響應滑動事件,滑動至折疊高度不恭,也就是通過minimum height 設置的最小高度后浑娜,就固定不動了,再把滑動事件交給 scrollview 繼續(xù)滑動暴拄。

注意:exitUntilCollapsed是獨立的乖篷,只依賴scroll撕蔼,當然你可以和enterAlways或者enterAlwaysCollapsed一起用鲸沮,但是效果還是以exitUntilCollapsed為主讼溺,并且效果會有一絲的卡頓和古怪怒坯,所以應該沒人這么干

5,snap,意思是:在滾動結(jié)束后,如果view只是部分可見,它將滑動到最近的邊界弄慰。比如,如果view的底部只有25%可見慌闭,它將滾動離開屏幕,而如果底部有75%可見驴剔,它將滾動到完全顯示。

snap

注意:這個效果其實就是類似我們側(cè)拉菜單的一個效果排龄,可以回彈。還有這個效果是可以和其他幾個一起使用的琳拭,效果即使幾個的結(jié)合如下圖:


scroll|enterAlways|enterAlwaysCollapsed|snap


scroll|exitUntilCollapsed|snap

????????以上便是appbarlayout五種scrollFlag的特效介紹,基本可以滿足日常開發(fā)需要描验,如果設計師比較鬼畜,那么打他!8恰!

其他方法介紹

addOnOffsetChangedListener當AppbarLayout 的偏移發(fā)生改變的時候回調(diào)马靠,也就是子View滑動逞度。

getTotalScrollRange返回AppbarLayout 所有子View的滑動范圍

removeOnOffsetChangedListener移除監(jiān)聽器

setExpanded (boolean expanded,? boolean animate)設置AppbarLayout 是展開狀態(tài)還是折疊狀態(tài),animate 參數(shù)控制切換到新的狀態(tài)時是否需要動畫

setExpanded (boolean expanded)設置AppbarLayout 是展開狀態(tài)還是折疊狀態(tài),默認有動畫

但看解釋好像不明白妙啃,我們詳細來看一下這幾個方法

1档泽,addOnOffsetChangedListener

這是官方的解釋,其實很明白了

Called when theAppBarLayout's layout offset has been changed. This allows child views to implement custom behavior based on the offset (for instance pinning a view at a certain y value).

AppBarLayout的布局偏移量發(fā)生改變時被調(diào)用揖赴。這個方法允許子view根據(jù)偏移量實現(xiàn)自定義的行為(比如在特定Y值的時候固定住一個View)

下面來舉個例子來看一下這個方法能作甚們

如圖我們搞一個這個樣子的布局

布局


java代碼


日志

????????可見當appbarlayout最大的時候偏移量為0馆匿,網(wǎng)上滑動的時候,偏移量向負數(shù)方向增大燥滑,下面是效果圖渐北,只是展示了可以做的一些事情,實際項目中可以根據(jù)偏移量隨意操作铭拧,比如可以做個透明度的動畫等等


效果圖

2赃蛛,getTotalScrollRange恃锉,這個方法返貨的是一個滑動的范圍,也可以理解為黨appbarlayout滑動到最小值時候的一個值得絕對值呕臂,這個值是不變的破托,是以appbarlayout為基礎的其所有子view的一個范圍值,如下歧蒋,我們在addOnOffsetChangedListener方法中加入以下代碼土砂,然后滑動得到的值全都是288。有這個方法疏尿,我們可以在addOnOffsetChangedListener方法中做什么事情之前做一個精準的判斷瘟芝。



3,removeOnOffsetChangedListener? 褥琐,移除監(jiān)聽器,這個沒什么好說的晤郑,移除掉偏移量監(jiān)聽敌呈,某些情況下,你可能需要根據(jù)偏移量做些神門事情造寝,但是某些情況下磕洪,你有不想做神門,所以只好把他移除掉诫龙。

4析显,setExpanded (boolean expanded, boolean animate)設置AppbarLayout 是展開狀態(tài)還是折疊狀態(tài),animate 參數(shù)控制切換到新的狀態(tài)時是否需要動畫

setExpanded (boolean expanded)設置AppbarLayout 是展開狀態(tài)還是折疊狀態(tài),默認有動畫

這倆個方法签赃,就像他的解釋一樣


false為關(guān)閉狀態(tài)谷异,true為展開狀態(tài)


打開時的狀態(tài)

CollapsingToolbarLayout?

CollapsingToolbarLayout是對子view的包裝,并且實現(xiàn)了折疊app bar效果,使用時锦聊,要作為 AppbarLayout 的直接子View歹嘹。

1,Collapsing title(折疊標題)當布局全部可見的時候,title 是最大的孔庭,當布局開始滑出屏幕尺上,title 將變得越來越小,你可以通過setTitle(CharSequence) 來設置要顯示的標題圆到。

注意:Toolbar 和CollapsingToolbarLayout 同時設置了title時怎抛,不會顯示Toolbartitle而是顯示CollapsingToolbarLayout 的title,如果要顯示Toolbar 的title芽淡,你可一在代碼中添加如下代碼:

collapsingToolbarLayout.setTitle("")

注意:你得給CollapsingToolbarLayout設置一個值,你來個wrap_parent是不起作用的,或者你把toolbar設置一個值來撐大CollapsingToolbarLayout也是不可以的


布局


效果圖

2,Content scrim(內(nèi)容紗布)當CollapsingToolbarLayout滑動到一個確定的閥值時將顯示或者隱藏內(nèi)容紗布马绝,可以通過setContentScrim(Drawable)來設置紗布的圖片。


布局


效果圖

3,Status bar scrim(狀態(tài)欄紗布)當CollapsingToolbarLayout滑動到一個確定的閥值時吐绵,狀態(tài)欄顯示或隱藏紗布迹淌,你可以通過setStatusBarScrim(Drawable)來設置紗布圖片河绽。

4,Pinned position children(固定子View的位置)子View可以固定在全局空間內(nèi),這對于實現(xiàn)了折疊并且允許通過滾動布局來固定Toolbar 這種情況非常有用唉窃。在xml 中將collapseMode設為pin


布局


5,Parallax scrolling children(有視差地滾動子View)讓CollapsingToolbarLayout 的子View 可以有視差的滾動耙饰,需要在xml中用 添加如下代碼:

app:layout_collapseMode="parallax"

注意:app:layout_collapseParallaxMultiplier="0.7" 這個參數(shù)是設置視差范圍的,0-1,越大視差越大


布局


效果圖

????????以上就是appbarlayout的全部特點,在項目中使用幾次就會了,各種scrollFlag與CollapsingToolbarLayout的搭配使用,可以做出很多非常酷炫的效果,基本滿足各種需求,如果設計師太鬼畜,那么打她,打她,打她!!!!!!!? 打不過?請用behavior,behavior,.behavior!!!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纹份,一起剝皮案震驚了整個濱河市苟跪,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蔓涧,老刑警劉巖件已,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異元暴,居然都是意外死亡篷扩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門茉盏,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鉴未,“玉大人,你說我怎么就攤上這事鸠姨⊥眩” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵讶迁,是天一觀的道長连茧。 經(jīng)常有香客問我,道長巍糯,這世上最難降的妖魔是什么啸驯? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮鳞贷,結(jié)果婚禮上坯汤,老公的妹妹穿的比我還像新娘。我一直安慰自己搀愧,他們只是感情好惰聂,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著咱筛,像睡著了一般搓幌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上迅箩,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天溉愁,我揣著相機與錄音,去河邊找鬼饲趋。 笑死拐揭,一個胖子當著我的面吹牛撤蟆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播堂污,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼家肯,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了盟猖?” 一聲冷哼從身側(cè)響起讨衣,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎式镐,沒想到半個月后反镇,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡娘汞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年歹茶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片价说。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡辆亏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出鳖目,到底是詐尸還是另有隱情,我是刑警寧澤缤弦,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布领迈,位于F島的核電站,受9級特大地震影響碍沐,放射性物質(zhì)發(fā)生泄漏狸捅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一累提、第九天 我趴在偏房一處隱蔽的房頂上張望尘喝。 院中可真熱鬧,春花似錦斋陪、人聲如沸朽褪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽缔赠。三九已至,卻和暖如春友题,著一層夾襖步出監(jiān)牢的瞬間嗤堰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工度宦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留踢匣,地道東北人告匠。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像离唬,于是被迫代替她去往敵國和親后专。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容