天天看點

AppbarLayout最詳細使用說明(實作折疊導航欄)

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

最最簡單用法

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

沒有被包裹的ToolBar

        然後下圖是一個被包裹的ToolBar

AppbarLayout最詳細使用說明(實作折疊導航欄)

這是被包裹的

    顔色是預設的(你color檔案中定義的colorPrimary顔色),最主要的是浮層效果,立體感的效果,這是你隻是用toolbar沒有的效果,當然如果這個幅度太大,你先調小或者不要,可以在AppbarLayout中設定,如下:

AppbarLayout最詳細使用說明(實作折疊導航欄)

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

效果沒了

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

正經用法

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

CoordinatorLayout

官方文檔的第一句話就非常醒目:CoordinatorLayout is a super-powered FrameLayout,非常直白,CoordinatorLayout 繼承于ViewGroup,它就是一個超級強大Framelayout。說白了就是可以通過Behavior 協調子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,實作了一個折疊的應用程式欄。它的目的是作為一個直接的孩子使用AppBarLayout

他能實作一下效果:

折疊标題

當布局完全可見時更大的标題,但随着布局滾動螢幕而折疊并變小。您可以将标題設定為通過顯示setTitle(CharSequence)。标題外觀可以通過collapsedTextAppearance和expandedTextAppearance屬性進行調整。

内容蒙紗

滾動位置達到一定門檻值時顯示或隐藏内容。你可以通過改變這個setContentScrim(Drawable)。

狀态欄蒙紗

當滾動位置已經達到一定的門檻值時,狀态欄顯示或隐藏。你可以通過改變這個setStatusBarScrim(Drawable)。

視差滾動

子視圖可以選擇以視差方式在此布局内滾動。

固定位置的view

子View可以選擇全局固定在空間。這在實作折疊時非常有用,因為Toolbar即使布局正在移動,它也可以固定到位。

結合使用

AppbarLayout要實作酷炫的滑動效果必須依賴于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的一部分一樣。

AppbarLayout最詳細使用說明(實作折疊導航欄)

布局

AppbarLayout最詳細使用說明(實作折疊導航欄)

scroll

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

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

AppbarLayout最詳細使用說明(實作折疊導航欄)
注意:這一看跟scroll沒啥差別啊,scroll是作為類似于一個header的形式存在的,當你歡動view的時候他會跟着一起往上滑,當先往下滑額時候他也會往下滑,直到view滑倒底部,他才會出現,而enterAlways是作為一個導航欄的東西,雖然向上滑動的時候它也會向上滑動,但他隻是滑出界面,當你view向下滑動的時候,即使view已經滑動到底部,它也會立即滑動出來,而不會像單純的scroll一樣必須view滑倒頭部才出來。

3,enterAlwaysCollapsed, enterAlwaysCollapsed 是對enterAlways 的補充,當ScrollView 向下滑動的時候,滑動View(也就是設定了enterAlwaysCollapsed 的View)下滑至折疊的高度,當ScrollView 到達滑動範圍的結束值的時候,滑動View剩下的部分開始滑動。這個折疊的高度是通過View的minimum height (最小高度)指定的。

AppbarLayout最詳細使用說明(實作折疊導航欄)

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

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

4,exitUntilCollapsed, 當ScrollView 滑出螢幕時(也就時向上滑動時),滑動View先響應滑動事件,滑動至折疊高度,也就是通過minimum height 設定的最小高度後,就固定不動了,再把滑動事件交給 scrollview 繼續滑動。

AppbarLayout最詳細使用說明(實作折疊導航欄)
注意:exitUntilCollapsed是獨立的,隻依賴scroll,當然你可以和enterAlways或者enterAlwaysCollapsed一起用,但是效果還是以exitUntilCollapsed為主,并且效果會有一絲的卡頓和古怪,是以應該沒人這麼幹

5,snap,意思是:在滾動結束後,如果view隻是部分可見,它将滑動到最近的邊界。比如,如果view的底部隻有25%可見,它将滾動離開螢幕,而如果底部有75%可見,它将滾動到完全顯示。

AppbarLayout最詳細使用說明(實作折疊導航欄)

snap

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

scroll|enterAlways|enterAlwaysCollapsed|snap

AppbarLayout最詳細使用說明(實作折疊導航欄)

scroll|exitUntilCollapsed|snap

        以上便是appbarlayout五種scrollFlag的特效介紹,基本可以滿足日常開發需要,如果設計師比較鬼畜,那麼打他!!!

其他方法介紹

addOnOffsetChangedListener當AppbarLayout 的偏移發生改變的時候回調,也就是子View滑動。

getTotalScrollRange傳回AppbarLayout 所有子View的滑動範圍

removeOnOffsetChangedListener移除監聽器

setExpanded (boolean expanded,  boolean animate)設定AppbarLayout 是展開狀态還是折疊狀态,animate 參數控制切換到新的狀态時是否需要動畫

setExpanded (boolean expanded)設定AppbarLayout 是展開狀态還是折疊狀态,預設有動畫

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

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的布局偏移量發生改變時被調用。這個方法允許子view根據偏移量實作自定義的行為(比如在特定Y值的時候固定住一個View)

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

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

布局

AppbarLayout最詳細使用說明(實作折疊導航欄)

java代碼

AppbarLayout最詳細使用說明(實作折疊導航欄)

日志

        可見當appbarlayout最大的時候偏移量為0,網上滑動的時候,偏移量向負數方向增大,下面是效果圖,隻是展示了可以做的一些事情,實際項目中可以根據偏移量随意操作,比如可以做個透明度的動畫等等

AppbarLayout最詳細使用說明(實作折疊導航欄)

效果圖

2,getTotalScrollRange,這個方法返貨的是一個滑動的範圍,也可以了解為黨appbarlayout滑動到最小值時候的一個值得絕對值,這個值是不變的,是以appbarlayout為基礎的其所有子view的一個範圍值,如下,我們在addOnOffsetChangedListener方法中加入以下代碼,然後滑動得到的值全都是288。有這個方法,我們可以在addOnOffsetChangedListener方法中做什麼事情之前做一個精準的判斷。

AppbarLayout最詳細使用說明(實作折疊導航欄)
AppbarLayout最詳細使用說明(實作折疊導航欄)

3,removeOnOffsetChangedListener  ,移除監聽器,這個沒什麼好說的,移除掉偏移量監聽,某些情況下,你可能需要根據偏移量做些神門事情,但是某些情況下,你有不想做神門,是以隻好把他移除掉。

4,setExpanded (boolean expanded, boolean animate)設定AppbarLayout 是展開狀态還是折疊狀态,animate 參數控制切換到新的狀态時是否需要動畫

setExpanded (boolean expanded)設定AppbarLayout 是展開狀态還是折疊狀态,預設有動畫

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

false為關閉狀态,true為展開狀态

AppbarLayout最詳細使用說明(實作折疊導航欄)

打開時的狀态

CollapsingToolbarLayout 

CollapsingToolbarLayout是對子view的包裝,并且實作了折疊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也是不可以的

AppbarLayout最詳細使用說明(實作折疊導航欄)

布局

AppbarLayout最詳細使用說明(實作折疊導航欄)

效果圖

2,Content scrim(内容紗布)當CollapsingToolbarLayout滑動到一個确定的閥值時将顯示或者隐藏内容紗布,可以通過setContentScrim(Drawable)來設定紗布的圖檔。

AppbarLayout最詳細使用說明(實作折疊導航欄)

布局

AppbarLayout最詳細使用說明(實作折疊導航欄)

效果圖

3,Status bar scrim(狀态欄紗布)當CollapsingToolbarLayout滑動到一個确定的閥值時,狀态欄顯示或隐藏紗布,你可以通過setStatusBarScrim(Drawable)來設定紗布圖檔。

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

AppbarLayout最詳細使用說明(實作折疊導航欄)

布局

AppbarLayout最詳細使用說明(實作折疊導航欄)

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

app:layout_collapseMode="parallax"

注意:app:layout_collapseParallaxMultiplier="0.7" 這個參數是設定視差範圍的,0-1,越大視差越大
AppbarLayout最詳細使用說明(實作折疊導航欄)

布局

AppbarLayout最詳細使用說明(實作折疊導航欄)

效果圖

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

繼續閱讀