Android M新控制項之AppBarLayout，NavigationView，CoordinatorLayout，CollapsingToolbarLayout的使用

Android M新控制項之AppBarLayout，NavigationView，CoordinatorLayout，CollapsingToolbarLayout的使用

 

上一篇部落格我們學習了Android Design SuppZ喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcnQgTGlicmFyeb/i1tC1xCDKx7j2vPK1pbXE1+m8/qOssrvBy73itcTNr9Csv8nS1LLOv7zWrsewtcSyqb/NPGJyIC8+DQpBbmRyb2lkIE3Qwr/YvP7WrkZsb2F0aW5nQWN0aW9uQnV0dG9uo6xUZXh0SW5wdXRMYXlvdXSjrFNuYWNrYmFyo6xUYWJMYXlvdXS1xMq508OhozwvcD4NCjxwPtXixqqyqb/NztLDx7zM0PjRp8+wRGVzaWduv+LW0LXExuTL+8vEuPbX6bz+o6y31rHwysdBcHBCYXJMYXlvdXSjrE5hdmlnYXRpb25WaWV3o6xDb29yZGluYXRvckxheW91dKOsQ29sbGFwc2luZ1Rvb2xiYXJMYXlvdXShozwvcD4NCjxwPs2s0fmjrMTj0OjSqtTaxOO1xLmks8zW0NL9yOs8L3A+DQo8cHJlIGNsYXNzPQ=="brush:java;">compile 'com.android.support:design:22.2.0'AppBarLayout

是這樣的

AppBarLayout 是繼承LinerLayout實現的一個ViewGroup容器組件，它是為了Material Design設計的App Bar，支援手勢滑動操作。

預設的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的內容都作為AppBar。類似上面圖片貼出來的效果，代碼布局如下：

此處將Toolbar 和Tablayout的組合部分共同構成 AppBar的效果。

注意： AppBarLayout必須作為Toolbar的父版面配置容器

AppBarLayout是支援手勢滑動效果的，不過的跟CoordinatorLayout配合使用，接下來學習一下CoordinatorLayout組件怎麼使用？

CoordinatorLayout

從開發文檔中可以瞭解到，CoordinatorLayout是一個增強型的FrameLayout。它的作用有兩個

作為一個布局的根布局 最為一個為子視圖之間相互協調手勢效果的一個協調布局

例如一下布局代碼：

從上面布局看到，CoordinatorLayout協調布局中包裹了兩個布局，一個是NestedScrollView，一個是AppBarLayout，以及FAB按鈕。

我們來看看CoordinatorLayout是怎麼來協調這兩個子視圖手勢操作的。

1.由於CoordinatorLayout是FrameLayout布局，我們可以通過

android:layout_gravity=bottom|end

屬性來控制組件在整個布局中的位置，比如上面效果中的FAB就是通過android:layout_gravity=”bottom|end”來確定 FAB的位置在底端的最右邊的位置。

2.為了達到上面的手勢動畫效果，我們必須做如下設定，通過app:layout_scrollFlags=”scroll|enterAlways” 屬性來確定哪個組件是可滑動的

設定的layout_scrollFlags有如下幾種選項：

scroll: 所有想滾動出螢幕的view都需要設定這個flag- 沒有設定這個flag的view將被固定在螢幕頂部。 enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”。 enterAlwaysCollapsed: 當你的視圖已經設定minHeight屬性又使用此標誌時，你的視圖只能已最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。 exitUntilCollapsed: 滾動退出螢幕，最後摺疊在頂端。

我們上面的布局中 給Toolbar設定了app:layout_scrollFlags屬性，因此，Toolbar是可以滾動出螢幕，且向下滾動有可以出現。

3.為了使得Toolbar可以滑動，我們必須還得有個條件，就是CoordinatorLayout布局下包裹一個可以滑動的布局，比如 RecyclerView，NestedScrollView(經過測試，ListView，ScrollView不支援)具有滑動效果的組件。並且給這些組件設定如下屬性來告訴CoordinatorLayout，該組件是帶有滑動行為的組件，然後CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出螢幕了。

app:layout_behavior=@string/appbar_scrolling_view_behavior

總結： 為了使得Toolbar有滑動效果，必須做到如下三點：

CoordinatorLayout必須作為整個布局的父版面配置容器。 給需要滑動的組件設定 app:layout_scrollFlags=”scroll|enterAlways” 屬性。 給你的可滑動的組件，也就是RecyclerView 或者 NestedScrollView 設定如下屬性：

 app:layout_behavior=@string/appbar_scrolling_view_behavior ```##CollapsingToolbarLayout![這裡寫圖片描述](http://img.blog.csdn.net/20150617115211729)CollapsingToolbarLayout包裹 Toolbar 的時候提供一個可摺疊的 Toolbar，一般作為AppbarLayout的子視圖使用。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)。還沒研究明白，不過這個只能在Android5.0以上系統有效果。 4. Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差，可以通過屬性app:layout_collapseParallaxMultiplier=0.6改變。 5. CollapseMode ：子視圖的摺疊模式，有兩種“pin”：固定模式，在摺疊的時候最後固定在頂端；“parallax”：視差模式，在摺疊的時候會有個視差摺疊的效果。我們可以在布局中使用屬性app:layout_collapseMode=parallax來改變。布局代碼如下：

 

***總結：***  CollapsingToolbarLayout主要是提供一個可摺疊的Toolbar容器，對容器中的不同視圖設定layout_collapseMode摺疊模式，來達到不同的摺疊效果。1.Toolbar 的高度layout_height必須固定，不能 “wrap_content”，否則Toolbar不會滑動，也沒有摺疊效果。2.為了能讓FloatingActionButton也能摺疊且消失出現，我們必須給FAB設定錨點屬性

app:layout_anchor=@id/appbar

意思是FAB浮動按鈕顯示在哪個布局地區。
且設定當前錨點的位置

app:layout_anchorGravity=”bottom|end|right”

意思FAB浮動按鈕在這個布局地區的具體位置。
兩個屬性共同作用才是的FAB 浮動按鈕也能摺疊消失，出現。

3.給需要有摺疊效果的組件設定 layout_collapseMode屬性。

【轉載請註明出處：http://blog.csdn.net/feiduclear_up/article/details/46514791 CSDN 廢墟的樹】

NavigationView

用於側滑菜單中的menu布局。之前Google在V4包中推出自己的 DrawerLayout作為抽屜側滑菜單，標準使用方法可以參考 google 原生態 抽屜式側滑菜單 Android DrawerLayout 布局的使用介紹。
當時的官方布局是這樣的：

            <framelayout android:id="@+id/frame_content" android:layout_height="match_parent" android:layout_width="match_parent">      </framelayout>                      

其實這次Google只是將上面的ListView布局替換成NavigationView了。簡化了之前ListView寫適配器的繁瑣。

先如今布局改成如下：

                windows="true" android:id="@+id/navigationView" android:layout_gravity="left" android:layout_height="match_parent" android:layout_width="wrap_content" app:headerlayout="@layout/layout_header" app:menu="@layout/layout_menu">     

其中NavigationView 中的 android:layout_gravity=”start” 屬性來控制抽屜菜單從哪邊滑出，一般“start ”從左邊滑出，“end”從右邊滑出。

這裡最主要的兩個屬性分別是：
1.app:headerLayout: 給NavigationView添加頭部布局
2.app：menu：給NavigationView添加menu菜單布局

app:headerLayout布局如下：

app：menu 布局如下：

代碼中控制NavigationView

private void initNavigationView(){        navigationView = (NavigationView) findViewById(R.id.navigationView);        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        //設定側滑菜單選擇監聽事件        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem menuItem) {                menuItem.setChecked(true);                //關閉抽屜側滑菜單                drawerLayout.closeDrawers();                return true;            }        });    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        if (item.getItemId() == android.R.id.home){            //開啟抽屜側滑菜單            drawerLayout.openDrawer(GravityCompat.START);        }        return super.onOptionsItemSelected(item);    }

關於NavigationView中item的字型顏色和icon選中狀態顏色是去當前主題theme中的

<--正常狀態下字型顏色和icon顏色-->@android:color/darker_gray<--選中狀態icon的顏色和字型顏色--> @color/accent_material_light

當然你可以通過如下方法或者屬性來改變這一狀態：

setItemBackgroundResource(int)：給menu設定背景資源，對應的屬性app:itemBackground setItemIconTintList(ColorStateList)：給menu的icon設定顏色，對應的屬性app:itemIconTint setItemTextColor(ColorStateList)：給menu的item設定字型顏色，對應的屬性app:itemTextColor

至此，Android Support Design Library庫的使用基本學習完。