http://blog.csdn.net/u010687392/article/details/46852565
版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。轉載注明出處：sunzxyong
ok，今天繼續更新material design系列！！！
廢話不說，先看看效果圖吧：
好了，現在來講講上圖是怎麼實作的吧！講之前先講講幾個控件：
coordinatorlayout
該控件也是design包下的一個控件，然而這個控件可以被稱為design包中最複雜、功能最強大的控件：coordinatorlayout。為什麼這樣說呢？原因是：它是組織它衆多子view之間互相協作的一個viewgroup。
coordinatorlayout 的神奇之處就在于 behavior 對象。怎麼了解呢？coordinatorlayout使得子view之間知道了彼此的存在，一個子view的變化可以通知到另一個子view，coordinatorlayout 所做的事情就是當成一個通信的橋梁，連接配接不同的view，使用 behavior 對象進行通信。
比如：在coordinatorlayout中使用appbarlayout，如果appbarlayout的子view（如toolbar、tablayout）标記了app:layout_scrollflags滾動事件,那麼在coordinatorlayout布局裡其它标記了app:layout_behavior的子view（linearlayout、recyclerview、nestedscrollview等）就能夠響應（如toolbar、tablayout）控件被标記的滾動事件。如：
[html] view
plaincopyprint?
<android.support.design.widget.coordinatorlayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.appbarlayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitssystemwindows="true">
<android.support.v7.widget.toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionbarsize"
android:background="#30469b"
app:layout_scrollflags="scroll|enteralways" />
<android.support.design.widget.tablayout
......
/>
</android.support.design.widget.appbarlayout>
<linearlayout
android:layout_height="match_parent"
android:orientation="vertical"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- content view .....-->
</linearlayout>
</android.support.design.widget.coordinatorlayout>
上面這段代碼中，toolbar标記了layout_scrollflags滾動事件，那麼當linearlayout滾動時便可觸發toolbar中的layout_scrollflags效果。即往上滑動隐藏toolbar，下滑出現toolbar，而不會隐藏tablayout，因為tablayout沒有标記scrollflags事件，相反，如果tablayout也标記了scrollflags事件，那麼linearlayout的下滑時toolbar和tablayout都會隐藏了。
layout_scrollflags中的幾個值：
scroll: 所有想滾動出螢幕的view都需要設定這個flag， 沒有設定這個flag的view将被固定在螢幕頂部。
enteralways:這個flag讓任意向下的滾動都會導緻該view變為可見，啟用快速“傳回模式”。
enteralwayscollapsed:當你的視圖已經設定minheight屬性又使用此标志時，你的視圖隻能已最小高度進入，隻有當滾動視圖到達頂部時才擴大到完整高度。
exituntilcollapsed:滾動退出螢幕，最後折疊在頂端。
【注意】: 設定了layout_scrollflags标志的view必須在沒有設定的view的之前定義，這樣可以確定設定過的view都從上面移出,
隻留下那些固定的view在下面。
tablayout
說到tablayout，就是實作多個tab之間的切換，不過google在design library新推出的tablayout既實作了固定的頁籤 - (tab的寬度平均配置設定)，也實作了可滾動的頁籤
- (tab寬度不固定，同時可以橫向滾動)，還實作了所有tab居中顯示。它還有一個重要作用就是結合viewpager來實作多個tab之間的切換。
來看看tablayout的三種實作方式：
固定的tab，根據tablayout的寬度适配
固定的tab，在tablayout中居中顯示
可滑動的tab
要實作上述效果，首先就需要加入tablayout：
<android.support.design.widget.tablayout
android:id="@+id/tablayout"
android:layout_height="wrap_content"
app:tabgravity="fill"
app:tabmode="fixed"
app:tabselectedtextcolor="#ff0000"
app:tabtextcolor="#ffffff" />
上面有幾個參數我來詳細介紹下吧，其實就是通過改變這幾個參數來改變tablayout顯示效果的：
tabgravity —tab的重心，有填充和居中兩個值，為别為fill和center。
tabmode —tab的模式，有固定和滾動兩個模式，分别為 fixed 和 scrollable。
tabtextcolor —設定預設狀态下tab上字型的顔色。
tabselectedtextcolor —設定選中狀态下tab上字型的顔色。
然後在代碼中動态添加tab：
[java] view
tablayout mtablayout = (tablayout) findviewbyid(r.id.tablayout);
mtablayout.addtab(mtablayout.newtab().settext("tabone"));//給tablayout添加tab
mtablayout.addtab(mtablayout.newtab().settext("tabtwo"));
mtablayout.addtab(mtablayout.newtab().settext("tabthree"));
mtablayout.setupwithviewpager(mviewpager);//給tablayout設定關聯viewpager，如果設定了viewpager，那麼viewpageradapter中的getpagetitle()方法傳回的就是tab上的标題
viewpager設定代碼：
viewpager mviewpager = (viewpager) findviewbyid(r.id.viewpager);
myviewpageradapter viewpageradapter = new myviewpageradapter(getsupportfragmentmanager());
viewpageradapter.addfragment(fragmentone.newinstance(), "tabone");//添加fragment
viewpageradapter.addfragment(fragmenttwo.newinstance(), "tabtwo");
viewpageradapter.addfragment(fragmentthree.newinstance(), "tabthree");
mviewpager.setadapter(viewpageradapter);//設定擴充卡
然後把mviewpager設定給tablayout即可。貼一下viewpager擴充卡代碼：
myviewpageradapter.java
public class myviewpageradapter extends fragmentpageradapter {
private final list<fragment> mfragments = new arraylist<>();//添加的fragment的集合
private final list<string> mfragmentstitles = new arraylist<>();//每個fragment對應的title的集合
public myviewpageradapter(fragmentmanager fm) {
super(fm);
}
/**
* @param fragment 添加fragment
* @param fragmenttitle fragment的标題，即tablayout中對應tab的标題
*/
public void addfragment(fragment fragment, string fragmenttitle) {
mfragments.add(fragment);
mfragmentstitles.add(fragmenttitle);
@override
public fragment getitem(int position) {
//得到對應position的fragment
return mfragments.get(position);
public int getcount() {
//傳回fragment的數量
return mfragments.size();
public charsequence getpagetitle(int position) {
//得到對應position的fragment的title
return mfragmentstitles.get(position);
}
好了，tablayout就介紹完了。。。效果就是開始那張效果圖的效果，可滑動切換。
上面兩個控件如果明白怎麼用了，那麼這個效果就很簡單了，我就直接貼代碼了。。。
主布局：activity_main.xml
<android.support.v4.view.viewpager
android:id="@+id/viewpager"
android:layout_height="match_parent" />
功能實作：mainactivity.java
public class mainactivity extends actionbaractivity {
protected void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
toolbar mtoolbar = (toolbar) findviewbyid(r.id.toolbar);
mtoolbar.settitletextcolor(color.white);//設定toolbar的titl顔色
setsupportactionbar(mtoolbar);
viewpager mviewpager = (viewpager) findviewbyid(r.id.viewpager);
myviewpageradapter viewpageradapter = new myviewpageradapter(getsupportfragmentmanager());
viewpageradapter.addfragment(fragmentone.newinstance(), "tabone");//添加fragment
viewpageradapter.addfragment(fragmenttwo.newinstance(), "tabtwo");
viewpageradapter.addfragment(fragmentthree.newinstance(), "tabthree");
mviewpager.setadapter(viewpageradapter);//設定擴充卡
tablayout mtablayout = (tablayout) findviewbyid(r.id.tablayout);
主要就是這兩個代碼檔案！！！
源碼位址：http://download.csdn.net/detail/u010687392/8893117