TabLayout的簡單使用(TabLayout+Fragment+ViewPager)

轉自：http://blog.csdn.net/chenguang79/article/details/48804125 

我們在應用viewpager的時候，經常會使用TabPageIndicator來與其配合。達到很漂亮的效果。但是TabPageIndicator是第三方的，而且比較老了，當然了現在很多大神都已經開始自己寫TabPageIndicator來滿足自己的需求，在2015年的google大會上，google釋出了新的

Android Support Design

庫，裡面包含了幾個新的控件，其中就有一個TabLayout，它就可以完成TabPageIndicator的效果，而且還是官方的，最好的是它可以相容到2.2以上版本，包括2.2。下面我就舉一個簡單的例子來使用它。

       我使用的 android studio進行開發的，是以引用TabLayout很簡單，隻要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

       這個使用是我在仿 知乎 的時候使用。是以頁面就和知乎很像了

       fragment_find.xml

[html]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     android:orientation="vertical">  
6.     <android.support.design.widget.TabLayout  
7.         android:id="@+id/tab_FindFragment_title"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content"  
10.         android:background="@color/titleBlue"  
11.         app:tabIndicatorColor="@color/white"  
12.         app:tabSelectedTextColor="@color/gray"  
13.         app:tabTextColor="@color/white"  
14.         />  
15.     <android.support.v4.view.ViewPager  
16.         android:id="@+id/vp_FindFragment_pager"  
17.         android:layout_width="fill_parent"  
18.         android:layout_height="0dp"  
19.         android:layout_weight="1"  
20.         />  
21. </LinearLayout>  

    這裡面沒有什麼特别的，就是添加了一個TabLayout和Viewpager作為上下的布局。其中

[html]  view plain  copy

1. app:tabIndicatorColor="@color/white"                 // 下方滾動的下劃線顔色  
2. app:tabSelectedTextColor="@color/gray"               // tab被選中後，文字的顔色  
3. app:tabTextColor="@color/white"                      // tab預設的文字顔色  

  Find_tab_Adapter.Java  它是viewpager的Adapter，因為這裡面我每個欄目下，都會有一些清單，是以采用list<View>的方式，在裡面切換layout不太适合，是以我采用了List<Fragment>來直接加載多個fragment

[java]  view plain  copy

1. package com.example.cg.myzhihu.Adapters;  
2. import android.support.v4.app.Fragment;  
3. import android.support.v4.app.FragmentManager;  
4. import android.support.v4.app.FragmentPagerAdapter;  
5. import java.util.List;  
6. public class Find_tab_Adapter extends FragmentPagerAdapter {  
7.     private List<Fragment> list_fragment;                         //fragment清單  
8.     private List<String> list_Title;                              //tab名的清單  
9.     public Find_tab_Adapter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_Title) {  
10.         super(fm);  
11.         this.list_fragment = list_fragment;  
12.         this.list_Title = list_Title;  
13.     }  
14.     @Override  
15.     public Fragment getItem(int position) {  
16.         return list_fragment.get(position);  
17.     }  
18.     @Override  
19.     public int getCount() {  
20.         return list_Title.size();  
21.     }  
22.     //此方法用來顯示tab上的名字  
23.     @Override  
24.     public CharSequence getPageTitle(int position) {  
25.         return list_Title.get(position % list_Title.size());  
26.     }  
27. }  

FindFragment.java這個的說法，全在标注裡面了

[java]  view plain  copy

1. package com.example.cg.myzhihu;  
2. import android.os.Bundle;  
3. import android.support.design.widget.TabLayout;  
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentPagerAdapter;  
6. import android.support.v4.view.ViewPager;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. import com.example.cg.myzhihu.Adapters.Find_tab_Adapter;  
11. import java.util.ArrayList;  
12. import java.util.List;  
13. public class FindFragment extends Fragment {  
14.     private TabLayout tab_FindFragment_title;                            //定義TabLayout  
15.     private ViewPager vp_FindFragment_pager;                             //定義viewPager  
16.     private FragmentPagerAdapter fAdapter;                               //定義adapter  
17.     private List<Fragment> list_fragment;                                //定義要裝fragment的清單  
18.     private List<String> list_title;                                     //tab名稱清單  
19.     private Find_hotRecommendFragment hotRecommendFragment;              //熱門推薦fragment  
20.     private Find_hotCollectionFragment hotCollectionFragment;            //熱門收藏fragment  
21.     private Find_hotMonthFragment hotMonthFragment;                      //本月熱榜fragment  
22.     private Find_hotToday hotToday;                                      //今日熱榜fragment  
23.     @Override  
24.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
25.                              Bundle savedInstanceState) {  
26.         View view = inflater.inflate(R.layout.fragment_find, container, false);  
27.         initControls(view);  
28.         return view;  
29.     }  
30.     private void initControls(View view) {  
31.         tab_FindFragment_title = (TabLayout)view.findViewById(R.id.tab_FindFragment_title);  
32.         vp_FindFragment_pager = (ViewPager)view.findViewById(R.id.vp_FindFragment_pager);  
33.         //初始化各fragment  
34.         hotRecommendFragment = new Find_hotRecommendFragment();  
35.         hotCollectionFragment = new Find_hotCollectionFragment();  
36.         hotMonthFragment = new Find_hotMonthFragment();  
37.         hotToday = new Find_hotToday();  
38.         //将fragment裝進清單中  
39.         list_fragment = new ArrayList<>();  
40.         list_fragment.add(hotRecommendFragment);  
41.         list_fragment.add(hotCollectionFragment);  
42.         list_fragment.add(hotMonthFragment);  
43.         list_fragment.add(hotToday);  
44.         //将名稱加載tab名字清單，正常情況下，我們應該在values/arrays.xml中進行定義然後調用  
45.         list_title = new ArrayList<>();  
46.         list_title.add("熱門推薦");  
47.         list_title.add("熱門收藏");  
48.         list_title.add("本月熱榜");  
49.         list_title.add("今日熱榜");  
50.         //設定TabLayout的模式  
51.         tab_FindFragment_title.setTabMode(TabLayout.MODE_FIXED);  
52.         //為TabLayout添加tab名稱  
53.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(0)));  
54.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(1)));  
55.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(2)));  
56.         tab_FindFragment_title.addTab(tab_FindFragment_title.newTab().setText(list_title.get(3)));  
57.         fAdapter = new Find_tab_Adapter(getActivity().getSupportFragmentManager(),list_fragment,list_title);  
58.         //viewpager加載adapter  
59.         vp_FindFragment_pager.setAdapter(fAdapter);  
60.         //tab_FindFragment_title.setViewPager(vp_FindFragment_pager);  
61.         //TabLayout加載viewpager  
62.         tab_FindFragment_title.setupWithViewPager(vp_FindFragment_pager);  
63.         //tab_FindFragment_title.set  
64.     }  
65. }  
66. 效果圖，不太會做成動态的。