CoordinatorLayout、AppBarLayout、Toolbar使用詳解

又到週末了，小編在這裏祝你們週末愉快哦，android開發的童鞋們咱們交流學習機會又來啦，今天跟你們交流一下咱們經常使用的標題欄Toolbar的使用，而且配合一些Material Design風格的其餘控件實現一些簡單的標題動畫效果，Toolbar、AppBarLayout的出現雖然好久了，可是在咱們項目開發中仍是不少地方都用到了，因此簡單記錄一下本身的理解，話很少說，咱們進入正題咯......

先把咱們會用到的幾個實現標題欄效果的控件列舉一下（請看標題 ^ _ ^），咱們那麼咱們先從CoordinatorLayout講起，，，

1）什麼是CoordinatorLayout？  如何使用

CoordinatorLayout組件是Android Material Design風格重要控件，經過協調調度子佈局的形式實現觸摸影響佈局的形式產生動畫效果。CoordinatorLayout經過設置子View的 Behaviors來調度子View，實現各控件之間的聯動，達到動畫效果。

系統提供了AppBarLayout.Behavior,AppBarLayout.ScrollingViewBehavior,FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。

首先咱們須要在項目的build.gradle中引入Support Design Library ,具體以下：

compile 'com.android.support:design:26.1.0'複製代碼

若是design有更新的話要進行響應的更新，目前最新的是26.1.0

那麼咱們在佈局中引入CoordinatorLayout的控件，還有一點須要注意：

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2 {複製代碼

CoordinatorLayout直接繼承自ViewGroup是加強版的FramLayout,

運行一下結果是這樣的，

                                      

FloatActionButton被從底部彈出的SnackActionBar頂上去，而不是遮住FloatActionBar，這裏FloatActionBar通常都會使用上androido：src屬性加上圖片，這裏注意了咱們默認是帶有ActionBar效果，這裏咱們去掉ActionBar，

android:theme="@style/Theme.AppCompat.Light.NoActionBar">複製代碼

或者直接在代碼中加上

supportRequestWindowFeature(Window.FEATURE_NO_TITLE)//Activity繼承自AppCompatActivity複製代碼

這裏咱們須要注意 supportRequestWindowFeature（）須要放到setContentView（）以前，否則會報錯，另外若是咱們的Activity咱們能夠調用

requestWindowFeature(Window.FEATURE_NO_TITLE)複製代碼

那麼如今咱們運行的效果就是不帶ActionBar的。

                                     

當咱們向上滑動內容的時候，標題會跟着滾出屏幕進行隱藏，本應該跟你們錄製一個gif動圖效果可是個人studio裏面目前有點問題，老是錄製失敗，後面我會抽出事件看看這方面的問題，

<android.support.v7.widget.Toolbar
   android:id="@+id/tb_toolbar"  
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>複製代碼

2）ToolBar簡單使用

上面已經介紹了部分ToolBar使用，這裏主要介紹toobar隱藏效果實現的重要屬性，其餘用法跟ActionBar大同小異，

咱們簡單的看一下這個toolbar，重點就在layout_scrollFlags這個屬性上面，屬性具體做用看下面：

1. scroll: 全部想滾動出屏幕的view都須要設置這個flag， 沒有設置這個flag的view將被固定在屏幕頂部。例如，TabLayout 沒有設置這個值，將會停留在屏幕頂部。
2. enterAlways: 設置這個flag時，向下的滾動都會致使該view變爲可見，啓用快速「返回模式」。
3. enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標誌時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
4. exitUntilCollapsed: 滾動退出屏幕，最後摺疊在頂端。

3) AppBarLayout嵌套CollapsingToolbarLayout

<android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent"  
       android:layout_height="match_parent"  
       android:fitsSystemWindows="true" 
       app:contentScrim="?attr/colorPrimary" ‘
       app:expandedTitleMarginEnd="64dp" 
       app:expandedTitleMarginStart="48dp"
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

       <ImageView 
           android:id="@+id/backdrop" 
           android:layout_width="match_parent"  
           android:layout_height="match_parent" 
           android:fitsSystemWindows="true"    
           android:scaleType="centerCrop"  
           android:src="@drawable/liu" 
           app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar 
           android:id="@+id/toolbar"  
           android:layout_width="match_parent" 
           android:layout_height="?attr/actionBarSize" 
           app:layout_collapseMode="pin" 
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 
      </android.support.design.widget.CollapsingToolbarLayout>
      </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView  
         android:id="@+id/sv_scrollview"  
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_margin="20dp"
         app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

   <TextView    
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/content"
        android:textColor="#ffffff" 
        android:textSize="16sp" />
</android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton 
        android:id="@+id/fab_floatactionbutton"   
        android:layout_width="wrap_content"   
        android:layout_height="wrap_content"  
        android:layout_margin="16dp"  
        android:clickable="true"  
        android:src="@drawable/right"
        app:layout_anchor="@id/appbarlayout"  
        app:layout_anchorGravity="bottom|right|end" />複製代碼

                 

                       

                                             

圖片是能夠跟隨着手指滑動，遺憾的是沒能給你們上一個gif動圖，在這裏感到抱歉，你們能夠在手機裏面跑起來看看，你們能夠把下賣弄NestScrollView作的更好看，這裏就不對這些UI作詳細說明，主要爲了跟你們看看這些效果怎麼實現，那麼下面咱們來看一下具體屬性：

CollapsingToolbarLayout可實現Toolbar的摺疊效果。CollapsingToolbarLayout的子視圖相似與LinearLayout垂直方向排放，

CollapsingToolbarLayout 提供如下屬性和方法是用：
1. Collapsing title：ToolBar的標題，當CollapsingToolbarLayout全屏沒有摺疊時，title顯示的是大字體，在摺疊的過程當中，title不斷變小到必定大小的效果。你能夠調用setTitle(CharSequence)方法設置title。
2. Content scrim：ToolBar被摺疊到頂部固定時候的背景，你能夠調用setContentScrim(Drawable)方法改變背景或者 在屬性中使用 app:contentScrim=」?attr/colorPrimary」來改變背景。
3. Status bar scrim：狀態欄的背景，調用方法setStatusBarScrim(Drawable)。
4. Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差，能夠經過屬性app:layout_collapseParallaxMultiplier=」0.6」改變。值de的範圍[0.0,1.0]，值越大視察越大。
5. CollapseMode ：子視圖的摺疊模式，在子視圖設置，有兩種「pin」：固定模式，在摺疊的時候最後固定在頂端；「parallax」：視差模式，在摺疊的時候會有個視差摺疊的效果。咱們能夠在佈局中使用屬性app:layout_collapseMode=」parallax」來改變。

CoordinatorLayout 還提供了一個 layout_anchor 的屬性，連同 layout_anchorGravity 一塊兒，能夠用來放置與其餘視圖關聯在一塊兒的懸浮視圖（如 FloatingActionButton）。本例中使用FloatingActionButton。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_floatactionbutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/right"
    app:layout_anchor="@id/appbarlayout"
    app:layout_anchorGravity="bottom|right|end" />複製代碼

在這裏你們須要注意三點：

使用CollapsingToolbarLayout實現摺疊效果，須要注意3點
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性
3. 關聯懸浮視圖設置app:layout_anchor，app:layout_anchorGravity屬性

今天就到這兒了，感謝小夥伴麼你的關注，其實還有不少效果沒有實現，本打算作的更詳細一點，後來發現時間有點不夠用，因此匆忙把一些見簡單效果實現了一下，咱們的CoordinatorLayout、AppBatLayout還能夠與DrawLayout,ViewPage等使用，目前不少App在這塊都有應用，因此你們之後看到相似效果不妨思考一下或者更深刻了解這幾個控件，週末愉快，週末愉快，週末愉快！！！

GitHub地址：github.com/Scus5761/Co…

若有疏漏，歡迎你們指正並提出意見哦！