Android Material Design新UI控件使用大全 二

序言

上一篇中我們介紹了幾個簡單的新UI控件,相信很多小夥伴對Materil Design的視覺效果有了一定的瞭解,今天我們就繼續介紹其他幾個控件的玩兒法,讓我們一探Materil Design的究竟,我們先來看一下我們今天要介紹的CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout及TabLayout, ok,我們接下來就逐一對這些控件進行解析,揭開他們神祕的面紗,來爲我們服務,Let’s Go.

TabLayout

我們先來看官方的介紹:

• TabLayout是一個提供展示 tabs 的橫向的layout;

• Tabs的實例是通過TabLayout.Tab獲取的,你可以通過調用newTab()來實現,你同時可以調用setText(CharSequence text)和setIcon(int)來改變tab的名稱及圖標;如果你想要展示這些tabs,就需要調用addTab(Tab)了,示例代碼:

  
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));


• 你需要設置一個setOnTabSelectedListener(OnTabSelectedListener)來監聽每個tab被選中時狀態改變的回調;如果你在你的layout裏面使用了viewpager的話,你就需要調用setupWithViewPager(ViewPager)來將二者進行綁定,這個layout會將viewpager的標題和內容進行自動填充;

• 當然,你也可以直接在佈局文件中添加TabItem來進行展示,示例代碼:

<android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

 </android.support.design.widget.TabLayout>

我們經常會將viewpager與fragment結合使用來實現如圖所示的效果,一般我們可能會使用viewpagerindicator開源框架來實現,如下圖效果:

不過現在有了TabLayout,我們就可以直接使用谷歌原生的控件來實現這個效果,我們一般還是會和viewpager結合使用,我們先看效果圖:

和viewpager的結合使用

1 xml文件中配置(只貼出核心代碼)

<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<android.support.v4.view.ViewPager
    android:id="@+id/tab_viewpager"
    android:layout_below="@id/tablayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"/>

2 在代碼中將二者綁定(只貼出核心代碼)

mViewpager.setAdapter(new MyCusAdapter(fm));
mTablayout.setTabMode(TabLayout.MODE_FIXED);
mTablayout.setupWithViewPager(mViewpager);


注意: mTabLayout在設置Tab模式時,有兩個值,一個是TabLayout.MODE_FIXED,一個是TabLayout.MODE_SCROLLABLE,我們先來看一下官方對這兩個值得解釋

• MODE_FIXED:Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
• MODE_SCROLLABLE:Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.

其實就是一句話來解釋,MODE_SCROLLABLE適合很多tabs的情況,MODE_FIXED是固定標籤適合不是很多tab說的情況,默認爲MODE_FIXED;我們通過兩張圖就可以很明顯的看出來二者的區別,左側爲MODE_SCROLLABLE,右側爲MODE_FIXED

GitHub地址點我,相關代碼在項目中包tablayout下

CoordinatorLayout

我們先來看一下關於CoordinatorLayout的官方解釋:

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one or more child views

• CoordinatorLayout是一個強大的FrameLayout
• CoordinatorLayout有兩個主要的應用方向:
  
  • 作爲頂級應用程序的裝飾或一個 chrome layout
  • 作爲用於與一個或多個子視圖的特殊交互的容器

其實CoordinatorLayout只是一個從另一層面去控制子view之間觸摸事件的佈局而已,可以實現不同的視覺滾動效果,我們接下來通過幾個簡單的示例來說明CoordinaLayout的作用;

CoordinatorLayout與FloatingActionButton及Snackbar結合

我們知道,當有SnackbarSnackbar可以顯示在其他UI組件的上面，不過我們可以讓FloatingActionButton不被Snackbar覆蓋，,當Snackbar出現時，FloatingActionButton上移，Snackbar消失時，FloatingActionButton下移。我們可以看一下不使用CoordinatorLayout與使用之間的區別,左圖是不使用的時候Snackbar彈出時候的效果, 右圖爲使用的時候Snackbar彈出時候的效果:

我們平時在代碼中使用起來也很簡單,只要使用CoordinatorLayout作爲基本佈局，將自動產生向上移動的動畫。浮動操作按鈕有一個 默認的 behavior來檢測Snackbar的添加並讓按鈕在Snackbar之上呈現上移與Snackbar等高的動畫。

小貼士:FloatingActionButton.Behavior: It’s main function is to move FloatingActionButton views so that any displayed Snackbars do not cover them.

代碼示例:

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
         android:id="@+id/rv"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
   </android.support.v7.widget.RecyclerView>

   <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:src="@mipmap/search"
        app:layout_anchor="@id/rv"
        app:layout_anchorGravity="bottom|right|end"/>
 </android.support.design.widget.CoordinatorLayout>

裏面有兩個屬性我們可能不太熟悉,設置app：layout_anchor和app:layout_anchorGravity是爲了構建出特定的位置與效果的FloatingActionButton。

• app:layout_anchor - 設置FAB的錨點，即以哪個控件爲參照點設置位等
• app:layout_anchorGravity - 設置FAB相對錨點的位置，值有 bottom、center、right、left、top等

最後, 在我們構造Snackbar時, 我們需要把CoordinatorLayout作爲View參數傳遞過去, 如下所示:


Snackbar.make(mCoordinator, "Snackbar show", Snackbar.LENGTH_SHORT).show();


大家也可以看GitHub寫的demo地址點我,對應的類爲CoordinatorLayoutFloatingActivity

我們在下篇繼續分析幾個其他的控件,願大家都有一個美好的今天,未完待續…