android.support.design.widget.TabLayout的使用

现在比较流行viewpager和fragment相结合一起使用，以前我们都是使用viewpager+fragment+第三方开源的PagerSlidingTabStrip来一起使用，来达到如下的效果：

 

         在android 5.0之后，google把一些控件进行了集成，这里面就有一个新的控件TabLayout，它就可以完成上面的功能了。

         首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。

         我们用一个例子来介绍一个这个控件：

         activity_main.xml文件

        

[html]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical">  
6.   
7.     <!--  
8.         android design library提供的TabLayout控件  
9.         tabIndicatorColor：菜单下方移动的横线的颜色  
10.         tabSelectedTextColor ：菜单被选中之后的颜色  
11.         tabTextColor : 菜单正常的颜色  
12.         app:tabTextAppearance : 添加样式，这里加了样式主要是为了在文字前面加一个图所用，就是把textAllCaps设置成false  
13.     -->  
14.     <android.support.design.widget.TabLayout  
15.         android:id="@+id/tab_title"  
16.         android:layout_width="match_parent"  
17.         android:layout_height="wrap_content"  
18.         android:background="@color/titleBlue"  
19.         app:tabIndicatorColor="@color/white"  
20.         app:tabSelectedTextColor="@color/gray"  
21.         app:tabTextColor="@color/white"  
22.         app:tabTextAppearance="@style/tablayoutIcon"  
23.         />  
24.   
25.   
26.     <android.support.v4.view.ViewPager  
27.         android:id="@+id/vp_pager"  
28.         android:layout_width="fill_parent"  
29.         android:layout_height="0dp"  
30.         android:layout_weight="1"  
31.         />  
32.   
33. </LinearLayout>  

       在TabLayout中我使用了color.xml和style.xml中的颜色和样式。下面把代码给大家

       color.xml

      

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8" ?>  
2. <resources>  
3.     <color name="white">#FFFFFF</color><!--白色 -->  
4.     <color name="titleBlue">#4876FF</color><!--天兰色 -->  
5.     <color name="gray">#808080</color><!--灰色 -->  
6.     </resources>  

style.xml

[html]  view plain  copy

1. style.xml  
2.   <resources>  
3.   
4.     <!-- Base application theme. -->  
5.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
6.         <!-- Customize your theme here. -->  
7.     </style>  
8.     <style name="tablayoutIcon" parent="TextAppearance.Design.Tab">  
9.         <item name="textAllCaps">false</item>  
10.     </style>  
11. </resources>  

   显示的样子是这样的：

        在编写MainActivity.java之前，我们还要做几个准备工作，是什么呢，就是建立几个fragment用来显示，然后建立两个Adatper用来加载，为什么要用两个Adapter呢，这里说明一下，在使用viewpager的时候，我们可以在其中加载view也可以加载fragment，这里我们做两个，就是为了演示用一下。OK，下面建立三个fragment

       NewsFragment.java

      

[java]  view plain  copy

1. import android.os.Bundle;  
2. import android.support.annotation.Nullable;  
3. import android.support.v4.app.Fragment;  
4. import android.view.LayoutInflater;  
5. import android.view.View;  
6. import android.view.ViewGroup;  
7.   
8. /** 
9.  * Created by cg on 2015/10/21. 
10.  */  
11. public class NewsFragment extends Fragment {  
12.     @Nullable  
13.     @Override  
14.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
15.         View view = inflater.inflate(R.layout.fragment_news, container, false);  
16.         return view;  
17.     }  
18. }  

fragment_news.xml

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent">  
5.   
6.     <TextView  
7.         android:layout_width="fill_parent"  
8.         android:layout_height="fill_parent"  
9.         android:text="我是新闻fragment"  
10.         android:textSize="20dp"  
11.         android:gravity="center"/>  
12.   
13. </LinearLayout>  

非常简单的一段代码，就是为了显示一段文件。

另外两个SportsFragment和Funfragment和它一样，就是名字和里面的文字变了一下，我就不复制了。

 

现在看两个Adapter，为view服务的，我们叫它viewAdapter，代码如下：

viewAdapter.java 它继承PagerAdapter

[java]  view plain  copy

1. import android.content.Context;  
2. import android.graphics.drawable.Drawable;  
3. import android.support.v4.view.PagerAdapter;  
4. import android.support.v4.view.ViewPager;  
5. import android.text.Spannable;  
6. import android.text.SpannableString;  
7. import android.text.style.ImageSpan;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10.   
11. import java.util.List;  
12.   
13. /** 
14.  * 此adpter是在一个fragment中切换不同的view，好处是在一个activity中可以取得所有view中的值 
15.  * Created by cg on 2015/10/21. 
16.  */  
17. public class viewAdapter extends PagerAdapter {  
18.     public List<View> list_view;  
19.     private List<String> list_Title;                              //tab名的列表  
20.     private int[] tabImg;  
21.     private Context context;  
22.   
23.     public viewAdapter(Context context,List<View> list_view,List<String> list_Title,int[] tabImg) {  
24.         this.list_view = list_view;  
25.         this.list_Title = list_Title;  
26.         this.tabImg = tabImg;  
27.         this.context = context;  
28.     }  
29.   
30.     @Override  
31.     public int getCount() {  
32.         return list_view.size();  
33.     }  
34.   
35.     @Override  
36.     public boolean isViewFromObject(View view, Object object) {  
37.         return view==object;  
38.     }  
39.   
40.     @Override  
41.     public Object instantiateItem(ViewGroup container, int position) {  
42.         ((ViewPager) container).addView(list_view.get(position), 0);  
43.         return list_view.get(position);  
44.     }  
45.   
46.     @Override  
47.     public void destroyItem(ViewGroup container, int position, Object object) {  
48.         ((ViewPager) container).removeView(list_view.get(position));  
49.     }  
50.   
51.     /** 
52.      * 此方法是给tablayout中的tab赋值的，就是显示名称,并且给其添加icon的图标 
53.      * @param position 
54.      * @return 
55.      */  
56.     @Override  
57.     public CharSequence getPageTitle(int position) {  
58.   
59.         //这段被注的代码，是只显示文字，不显示图标  
60.         //return  list_Title.get(position % list_Title.size());  
61.   
62.         Drawable dImage = context.getResources().getDrawable(tabImg[position]);  
63.         dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());  
64.         //这里前面加的空格就是为图片显示  
65.         SpannableString sp = new SpannableString("  "+ list_Title.get(position));  
66.         ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);  
67.         sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
68.         return  sp;  
69.     }  
70.   
71.   
72. }  

fragmentAdapter.java 它继承自FragmentPagerAdapter

[java]  view plain  copy

1. importandroid.support.v4.app.Fragment;  
2.   
3. importandroid.support.v4.app.FragmentManager;  
4.   
5. import android.support.v4.app.FragmentPagerAdapter;  
6.   
7.    
8.   
9. import java.util.List;  
10.   
11.    
12.   
13. /** 
14.  
15.  * 这里使用多个fragment进行切换，好处是每个fragment 都有自己独立的代码 
16.  
17.  * Created by cg on 2015/10/21. 
18.  
19.  */  
20.   
21. public class fragmentAdapter extendsFragmentPagerAdapter {  
22.   
23.    
24.   
25.    private List<Fragment> list_fragment;                         //fragment列表  
26.   
27.    private List<String> list_Title;                              //tab名的列表  
28.   
29.    
30.   
31.    public fragmentAdapter(FragmentManager fm,List<Fragment>list_fragment,List<String> list_Title) {  
32.   
33.         super(fm);  
34.   
35.         this.list_fragment = list_fragment;  
36.   
37.         this.list_Title = list_Title;  
38.   
39.    }  
40.   
41.    
42.   
43.    @Override  
44.   
45.    public Fragment getItem(int i) {  
46.   
47.         return list_fragment.get(i);  
48.   
49.    }  
50.   
51.    
52.   
53.    @Override  
54.   
55.    public int getCount() {  
56.   
57.         return list_fragment.size();  
58.   
59.    }  
60.   
61.    
62.   
63.    /** 
64.  
65.     * 此方法是给tablayout中的tab赋值的，就是显示名称 
66.  
67.     * @param position 
68.  
69.     * @return 
70.  
71.     */  
72.   
73.    @Override  
74.   
75.    public CharSequence getPageTitle(int position) {  
76.   
77.         return list_Title.get(position % list_Title.size());  
78.   
79.    }  
80.   
81. }  

下面我们来看一下，MainActivity.java这里面我加了详细的注解，这里就不多说了，直接看代码就OK了

[java]  view plain  copy

1. import android.os.Bundle;  
2. import android.support.design.widget.TabLayout;  
3. import android.support.v4.app.Fragment;  
4. import android.support.v4.view.ViewPager;  
5. import android.support.v7.app.ActionBarActivity;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8.   
9. import com.example.cg.tablayoutlearn.Adapter.fragmentAdapter;  
10. import com.example.cg.tablayoutlearn.Adapter.viewAdapter;  
11.   
12. import java.util.ArrayList;  
13. import java.util.List;  
14.   
15. public class MainActivity extends ActionBarActivity {  
16.   
17.   
18.     private TabLayout tab_title;  
19.     private ViewPager vp_pager;  
20.   
21.     private List<String> list_title;                                      //tab名称列表  
22.     private List<View> listViews;  
23.     private List<Fragment> list_fragment;  
24.   
25.     private View newsView;                                                //定义新闻页面  
26.     private View sportView;                                               //定义体育页面  
27.     private View funView;                                                 //定义娱乐页面  
28.   
29.     private viewAdapter vAdapter;                                         //定义以view为切换的adapter  
30.     private fragmentAdapter fAdapter;                                     //定义以fragment为切换的adapter  
31.   
32.     private NewsFragment nFragment;  
33.     private SportsFragment sFragment;  
34.     private FunFragment fFragment;  
35.   
36.   
37.     private int[] tabImg;  
38.   
39.     @Override  
40.     protected void onCreate(Bundle savedInstanceState) {  
41.         super.onCreate(savedInstanceState);  
42.         setContentView(R.layout.activity_main);  
43.   
44.         initControls();  
45.   
46.         viewChanage();  
47.   
48.         //fragmentChange();  
49.     }  
50.   
51.     /** 
52.      * 初始化控件 
53.      */  
54.     private void initControls()  
55.     {  
56.         tab_title = (TabLayout)findViewById(R.id.tab_title);  
57.         vp_pager = (ViewPager)findViewById(R.id.vp_pager);  
58.   
59.         //为tabLayout上的图标赋值  
60.         tabImg = new int[]{R.drawable.ic_collected,R.drawable.ic_commented,R.drawable.ic_drawer_login_normal};  
61.     }  
62.   
63.     /** 
64.      * 采用在viewpager中切换 view 的方式,并添加了icon的功能 
65.      */  
66.     private void viewChanage()  
67.     {  
68.         listViews = new ArrayList<>();  
69.         LayoutInflater mInflater = getLayoutInflater();  
70.   
71.         newsView = mInflater.inflate(R.layout.fragment_news, null);  
72.         sportView = mInflater.inflate(R.layout.fragment_sport, null);  
73.         funView = mInflater.inflate(R.layout.fragment_fun, null);  
74.         listViews.add(newsView);  
75.         listViews.add(sportView);  
76.         listViews.add(funView);  
77.   
78.         list_title = new ArrayList<>();  
79.         list_title.add("新闻");  
80.         list_title.add("体育");  
81.         list_title.add("娱乐");  
82.   
83.         //设置TabLayout的模式,这里主要是用来显示tab展示的情况的  
84.         //TabLayout.MODE_FIXED          各tab平分整个工具栏,如果不设置，则默认就是这个值  
85.         //TabLayout.MODE_SCROLLABLE     适用于多tab的，也就是有滚动条的，一行显示不下这些tab可以用这个  
86.         //                              当然了，你要是想做点特别的，像知乎里就使用的这种效果  
87.         tab_title.setTabMode(TabLayout.MODE_FIXED);  
88.   
89.         //设置tablayout距离上下左右的距离  
90.         //tab_title.setPadding(20,20,20,20);  
91.   
92.         //为TabLayout添加tab名称  
93.         tab_title.addTab(tab_title.newTab().setText(list_title.get(0)));  
94.         tab_title.addTab(tab_title.newTab().setText(list_title.get(1)));  
95.         tab_title.addTab(tab_title.newTab().setText(list_title.get(2)));  
96.   
97.   
98.         vAdapter = new viewAdapter(this,listViews,list_title,tabImg);  
99.         vp_pager.setAdapter(vAdapter);  
100.   
101.         //将tabLayout与viewpager连起来  
102.         tab_title.setupWithViewPager(vp_pager);  
103.     }  
104.   
105.     /** 
106.      * 采用viewpager中切换fragment 
107.      */  
108.     private void fragmentChange()  
109.     {  
110.         list_fragment = new ArrayList<>();  
111.   
112.         nFragment = new NewsFragment();  
113.         sFragment = new SportsFragment();  
114.         fFragment = new FunFragment();  
115.   
116.   
117.         list_fragment.add(nFragment);  
118.         list_fragment.add(sFragment);  
119.         list_fragment.add(fFragment);  
120.   
121.         list_title = new ArrayList<>();  
122.         list_title.add("新闻");  
123.         list_title.add("体育");  
124.         list_title.add("娱乐");  
125.   
126.         fAdapter = new fragmentAdapter(getSupportFragmentManager(),list_fragment,list_title);  
127.         vp_pager.setAdapter(fAdapter);  
128.   
129.         //将tabLayout与viewpager连起来  
130.         tab_title.setupWithViewPager(vp_pager);  
131.     }  
132.   
133.   
134. }  

这里我们看一下效果图：

viewChanage()的显示

fragmentChange()的显示

顶

1

踩