TabLayout+viewPager

1.TabLayout

TabLayout控件用于应用中轻松的添加Tab分组功能，总共有两种类型可选。

1.固定的Tabs：对应的xml配置中的 app:tabMode="fixed"

2.可滑动的Tabs：对应xml配置中的 app:tabMode="scrollable"。

 TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。接下来就简单使用一下。

先来布局：

[java] view plain copy

 print?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     android:id="@+id/activity_tab_layout"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="com.example.administrator.designtest.TabLayoutActivity">  
9.   
10.     <android.support.v4.view.ViewPager  
11.         android:id="@+id/viewpager"  
12.         android:layout_below="@+id/tablayout_top"  
13.         android:layout_width="match_parent"  
14.         android:layout_height="match_parent">  
15.     </android.support.v4.view.ViewPager>  
16.   
17.     <android.support.design.widget.TabLayout  
18.         android:id="@+id/tablayout_top"  
19.         app:tabTextColor="#000"  
20.         app:tabSelectedTextColor="#fff"  
21.         android:background="@color/colorPrimary"  
22.         android:layout_width="match_parent"  
23.         android:layout_height="wrap_content"  
24.         app:tabMode="fixed"  
25.         app:tabGravity="fill">  
26.   
27.     </android.support.design.widget.TabLayout>  
28. </RelativeLayout>  

这个很简单，再来一个适配器。

这个很简单，再来一个适配器。

[java] view plain copy

 print?

1. public class ViewPagerAdapter extends FragmentPagerAdapter {  
2.     private List<BlankFragment>fragmentList;  
3.     private List<String>titleList;  
4.     public ViewPagerAdapter(FragmentManager fm, List<BlankFragment> fragmentList, List<String> titleList) {  
5.         super(fm);  
6.         this.fragmentList = fragmentList;  
7.         this.titleList = titleList;  
8.     }  
9.   
10.     @Override  
11.     public Fragment getItem(int position) {  
12.         return fragmentList.get(position);  
13.     }  
14.   
15.     @Override  
16.     public int getCount() {  
17.         return fragmentList.size();  
18.     }  
19.   
20.     @Override  
21.     public CharSequence getPageTitle(int position) {  
22.         return titleList.get(position);  
23.     }  
24. }  

用过viewpager套Fragement的猿友都知道，就不啰嗦了。getPageTitle是获取需要显示的tab标题。新建一个fragment空的。

[java] view plain copy

 print?

1. public class BlankFragment extends Fragment {  
2.     @Override  
3.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
4.                              Bundle savedInstanceState) {  
5.         return inflater.inflate(R.layout.fragment_blank, container, false);  
6.     }  
7. }  

那么准备工作差不多了，开始进入主题，基本的介绍都加了注释

[java] view plain copy

 print?

1. public class TabLayoutActivity extends AppCompatActivity {  
2.   
3.     ViewPager viewPager;  
4.     TabLayout tabLayout;  
5.   
6.     List<BlankFragment>fragmentList;  
7.     List<String>stringList;  
8.   
9.     @Override  
10.     protected void onCreate(Bundle savedInstanceState) {  
11.         super.onCreate(savedInstanceState);  
12.         setContentView(R.layout.activity_tab_layout);  
13.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
14.         tabLayout = (TabLayout) findViewById(R.id.tablayout_top);  
15.         //添加fragment  
16.         fragmentList = new ArrayList<>();  
17.         fragmentList.add(new BlankFragment());  
18.         fragmentList.add(new BlankFragment());  
19.         fragmentList.add(new BlankFragment());  
20.         fragmentList.add(new BlankFragment());  
21.         //添加标题  
22.         stringList = new ArrayList<>();  
23.         stringList.add("热门新闻");  
24.         stringList.add("热门推荐");  
25.         stringList.add("本月热榜");  
26.         stringList.add("今日热榜");  
27.         //添加tab  
28.         tabLayout.addTab(tabLayout.newTab().setText("热门新闻"));  
29.         tabLayout.addTab(tabLayout.newTab().setText("热门推荐"));  
30.         tabLayout.addTab(tabLayout.newTab().setText("本月热榜"));  
31.         tabLayout.addTab(tabLayout.newTab().setText("今日热榜"));  
32.         //适配器  
33.         ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),fragmentList,stringList);  
34.         //建立联系  
35.         viewPager.setAdapter(viewPagerAdapter);  
36.         tabLayout.setupWithViewPager(viewPager,true);  
37.     }  
38. }  

tabLayout.setupWithViewPager(viewPager,true);这句代码是关联viewpager和tabLayout。后面的true是是否自动刷新fragment的布尔值，看源码就知道了。

[java] view plain copy

 print?

1. public void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh) {  
2.         setupWithViewPager(viewPager, autoRefresh, false);  
3.     }  
4.   
5.     private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,  
6.             boolean implicitSetup) {  
7.         ......  
8.         //这里需要先设置viewpager的adapter，在关联，不然这里判空不会走正常逻辑  
9.             if (adapter != null) {  
10.                 // Now we'll populate ourselves from the pager adapter, adding an observer if  
11.                 // autoRefresh is enabled  
12.                 setPagerAdapter(adapter, autoRefresh);  
13.             }  
14.   
15.             if (mAdapterChangeListener == null) {  
16.                 mAdapterChangeListener = new AdapterChangeListener();  
17.             }  
18.             //设置自动刷新  
19.             mAdapterChangeListener.setAutoRefresh(autoRefresh);  
20.             viewPager.addOnAdapterChangeListener(mAdapterChangeListener);  
21.   
22.               
23.             setScrollPosition(viewPager.getCurrentItem(), 0f, true);  
24.           
25.         ......  
26.   
27.         mSetupViewPagerImplicitly = implicitSetup;  
28.     }  

我们调用的第一个函数，实质是调用的第二个函数。这里需要注意的是需要先调用viewpager的setAdaper之后才能把tabLayout和viewpager关联起来,给个效果图;