TabLayout用法，android顶部导航栏，android底部导航栏

TabLayout是android.support.design里的一个控件，使用它可以很方便的做出顶部导航和底部导航。类似于这样的，能设置选中时字体的颜色和选中时的图片。

首先我们引入compile 'com.android.support:design:23.1.1'

它的用法是：

第一种比较简单，就是文本和一个指示器。

布局文件是

[html] view plain copy

print ?

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.   
7.     <android.support.design.widget.TabLayout  
8.         android:id="@+id/tab"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content"  
11.         android:background="#32CD32"  
12.         app:tabIndicatorColor="#f00"  
13.         app:tabSelectedTextColor="#444"  
14.         app:tabMode="fixed"  
15.         app:tabTextColor="#fff" />  
16.   
17.   
18.     <android.support.v4.view.ViewPager  
19.         android:id="@+id/viewpager"  
20.         android:layout_width="fill_parent"  
21.         android:layout_height="0dp"  
22.         android:layout_weight="1" />  
23.   
24. </LinearLayout>   

    顶部是一个TabLayout，可以设置background。app:tabIndicatorColor是设置指示器的背景颜色，app:tabIndicatorHeight设置指示器的高度，app:tabSelectedTextColor是选中时文本的颜色，app:tabTextColor是普通状态的文本颜色，app:tabMode是是否可滑动，有两个fixed和scrollable,fixed是固定的，scrollable是类似于今日头条那种可以滑动的。

    java代码

[java] view plain copy

print ?

1. import android.app.Fragment;  
2. import android.os.Bundle;  
3. import android.support.design.widget.TabLayout;  
4. import android.support.v4.view.ViewPager;  
5. import android.support.v7.app.AppCompatActivity;  
6.   
7. import com.tianyalei.wolf.mddesignlib.view.titlelayout.TitleFragmentPagerAdapter;  
8. import com.tianyalei.wolf.sample.R;  
9.   
10. import java.util.ArrayList;  
11. import java.util.List;  
12.   
13. import butterknife.Bind;  
14. import butterknife.ButterKnife;  
15.   
16. public class TabActivity extends AppCompatActivity {  
17.   
18.     @Bind(R.id.tab)  
19.     TabLayout tabLayout;  
20.     @Bind(R.id.viewpager)  
21.     ViewPager viewpager;  
22.   
23.     @Override  
24.     protected void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.         setContentView(R.layout.activity_tab);  
27.         ButterKnife.bind(this);  
28.   
29. //        tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色  
30. //        tabLayout.setSelectedTabIndicatorColor(Color.WHITE);//设置选中时的指示器的颜色  
31. //        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//可滑动，默认是FIXED  
32.   
33.   
34.         List<Fragment> fragments = new ArrayList<>();  
35.         fragments.add(new BlankFragment());  
36.         fragments.add(new BlankFragment());  
37.         fragments.add(new BlankFragment());  
38.   
39.         TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"第一栏", "第二栏", "第三栏"});  
40.         viewpager.setAdapter(adapter);  
41.   
42.         tabLayout.setupWithViewPager(viewpager);  
43.     }  
44.   
45. }  

TitleFragmentPagerAdapter是viewpager的适配器，

[java] view plain copy

print ?

1. /* 
2.  * Copyright (C) 2012 www.amsoft.cn 
3.  *  
4.  * Licensed under the Apache License, Version 2.0 (the "License"); 
5.  * you may not use this file except in compliance with the License. 
6.  * You may obtain a copy of the License at 
7.  * 
8.  *     http://www.apache.org/licenses/LICENSE-2.0 
9.  * 
10.  * Unless required by applicable law or agreed to in writing, software 
11.  * distributed under the License is distributed on an "AS IS" BASIS, 
12.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
13.  * See the License for the specific language governing permissions and 
14.  * limitations under the License. 
15.  */  
16. package com.tianyalei.wolf.mddesignlib.view.titlelayout;  
17.   
18. import android.app.Fragment;  
19. import android.app.FragmentManager;  
20. import android.support.v13.app.FragmentPagerAdapter;  
21.   
22. import java.util.ArrayList;  
23. import java.util.List;  
24.   
25. /** 
26.  * © 2012 amsoft.cn 名称：TitleFragmentPagerAdapter.java 描述：一个通用的Fragment适配器 
27.  * 
28.  * @author wolf 
29.  * @version v1.0 
30.  * @date：2016-3-7 上午10:57:53 
31.  */  
32. public class TitleFragmentPagerAdapter extends FragmentPagerAdapter {  
33.   
34.     /** 
35.      * The m fragment list. 
36.      */  
37.     private List<Fragment> mFragmentList = null;  
38.   
39.     private String[] titles;  
40.   
41.     /** 
42.      * Instantiates a new ab fragment pager adapter. 
43.      * 
44.      * @param mFragmentManager the m fragment manager 
45.      * @param fragmentList     the fragment list 
46.      */  
47.     public TitleFragmentPagerAdapter(FragmentManager mFragmentManager,  
48.                                      ArrayList<Fragment> fragmentList) {  
49.         super(mFragmentManager);  
50.         mFragmentList = fragmentList;  
51.     }  
52.   
53.     /** 
54.      * titles是给TabLayout设置title用的 
55.      * 
56.      * @param mFragmentManager 
57.      * @param fragmentList 
58.      * @param titles 
59.      */  
60.     public TitleFragmentPagerAdapter(FragmentManager mFragmentManager,  
61.                                      List<Fragment> fragmentList, String[] titles) {  
62.         super(mFragmentManager);  
63.         mFragmentList = fragmentList;  
64.         this.titles = titles;  
65.     }  
66.   
67.     /** 
68.      * 描述：获取数量. 
69.      * 
70.      * @return the count 
71.      * @see android.support.v4.view.PagerAdapter#getCount() 
72.      */  
73.     @Override  
74.     public int getCount() {  
75.         return mFragmentList.size();  
76.     }  
77.   
78.     /** 
79.      * 描述：获取索引位置的Fragment. 
80.      * 
81.      * @param position the position 
82.      * @return the item 
83.      * @see android.support.v4.app.FragmentPagerAdapter#getItem(int) 
84.      */  
85.     @Override  
86.     public Fragment getItem(int position) {  
87.   
88.         Fragment fragment = null;  
89.         if (position < mFragmentList.size()) {  
90.             fragment = mFragmentList.get(position);  
91.         } else {  
92.             fragment = mFragmentList.get(0);  
93.         }  
94.         return fragment;  
95.     }  
96.   
97.     @Override  
98.     public CharSequence getPageTitle(int position) {  
99.         if (titles != null && titles.length > 0)  
100.             return titles[position];  
101.         return null;  
102.     }  
103. }  

需要注意的是getPageTitle方法，返回viewpager对应的title。

以上就是TabLayout和viewpager结合的简单例子。

下面说第二种带图片的底部导航，

其实也很简单，就是把TabLayout放到底部，上面是viewpager，然后给text设置个图片就行了。布局如下

[html] view plain copy

print ?

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.   
7.   
8.     <android.support.v4.view.ViewPager  
9.         android:id="@+id/viewpager"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="0dp"  
12.         android:layout_weight="1" />  
13.   
14.     <android.support.design.widget.TabLayout  
15.         android:id="@+id/tab"  
16.         android:layout_width="match_parent"  
17.         android:layout_height="wrap_content"  
18.         app:tabBackground="@drawable/selector_bg"  
19.         style="@style/MyCustomTabLayout"/>  
20.   
21. </LinearLayout>   

style里面设置了一些属性

[html] view plain copy

print ?

1. <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">  
2.         <item name="tabIndicatorColor">?attr/colorAccent</item>  
3.         <item name="tabIndicatorHeight">0dp</item>  
4.         <item name="tabPaddingStart">12dp</item>  
5.         <item name="tabTextColor">#aaa</item>  
6.         <item name="tabPaddingEnd">12dp</item>  
7.         <item name="tabSelectedTextColor">#f00</item>  
8.     </style>  

tabIndicatorHeight是设置导航那个指示器高度为0，因为不需要那个指示器了。然后app:tabBackground这个属性待会再说。

代码如下

[java] view plain copy

print ?

1. package com.tianyalei.wolf.sample.activity;  
2.   
3. import android.annotation.TargetApi;  
4. import android.app.Fragment;  
5. import android.graphics.drawable.Drawable;  
6. import android.os.Build;  
7. import android.os.Bundle;  
8. import android.support.design.widget.TabLayout;  
9. import android.support.v4.view.ViewPager;  
10. import android.support.v7.app.AppCompatActivity;  
11.   
12. import com.tianyalei.wolf.mddesignlib.view.titlelayout.TitleFragmentPagerAdapter;  
13. import com.tianyalei.wolf.sample.R;  
14.   
15. import java.util.ArrayList;  
16. import java.util.List;  
17.   
18. import butterknife.Bind;  
19. import butterknife.ButterKnife;  
20.   
21. public class TabBottomActivity extends AppCompatActivity {  
22.   
23.     @Bind(R.id.tab)  
24.     TabLayout tabLayout;  
25.     @Bind(R.id.viewpager)  
26.     ViewPager viewpager;  
27.   
28.     @TargetApi(Build.VERSION_CODES.JELLY_BEAN)  
29.     @Override  
30.     protected void onCreate(Bundle savedInstanceState) {  
31.         super.onCreate(savedInstanceState);  
32.         setContentView(R.layout.activity_bottom_tab);  
33.         ButterKnife.bind(this);  
34.   
35.         List<Fragment> fragments = new ArrayList<>();  
36.         fragments.add(new BlankFragment());  
37.         fragments.add(new BlankFragment());  
38.         fragments.add(new BlankFragment());  
39.         fragments.add(new BlankFragment());  
40.         TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"首页", "流量", "社区", "关于"});  
41.         viewpager.setAdapter(adapter);  
42.   
43.         tabLayout.setupWithViewPager(viewpager);  
44.   
45.         for (int i = 0; i < tabLayout.getTabCount(); i++) {  
46.             TabLayout.Tab tab = tabLayout.getTabAt(i);  
47.              Drawable d = null;  
48.              switch (i) {  
49.                     case 0:  
50.                         d = getResources().getDrawable(R.drawable.selector_home);  
51.                         break;  
52.                     case 1:  
53.                         d = getResources().getDrawable(R.drawable.selector_mall);  
54.                         break;  
55.                     case 2:  
56.                         d = getResources().getDrawable(R.drawable.selector_socially);  
57.                         break;  
58.                     case 3:  
59.                         d = getResources().getDrawable(R.drawable.selector_more);  
60.                         break;  
61.                 }  
62.             tab.setIcon(d);  
63.         }  
64. //        viewpager.setCurrentItem(2);  
65.     }  
66.   
67. }  

前面的部分没什么好说的。下面的那块是设置图片的，就是在selected的时候把图片换成选中态的图片。遍历tab，给tab设置icon，icon就是selector。

R.drawable.selector_home

[html] view plain copy

print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android = "http://schemas.android.com/apk/res/android">  
3.     <item android:drawable = "@drawable/nav_home_pre" android:state_selected = "true" />  
4.     <item android:drawable = "@drawable/nav_home" android:state_selected = "false" />  
5. </selector>  

OK，以上做完就可以了，带图片的底部导航栏就做好了。

下面说一下app:tabBackground，这个是设置单项的背景颜色的，见下图