SlidingTabLayout的使用--替代ActionBar的Tab导航

最近在使用ActionBar的时候，如果使用的是最新版V7包或者最新的SDK平台，就会发现 ActionBar的导航功能已经不建议使用了。主要的原因是ActionBar自带Tab导航自定义性差（只能通过style修改），而且不再建议使用ActionBar。SlidingTabLayout就是ActionBar导航的替代品，使用它可以轻松的实现导航功能。

使用SlidingTabLayout需要准备2个类，分别是 SlidingTabLayout，与SlidingTabStrip。点击下载 ，放进项目中时只用修改下包名即可。

SlidingTabLayout主要配合ViewPager实现Tab导航，且需要在ActionBarActivity中使用，具体代码如下：

[java]  view plain  copy

1. public class MainActivity extends ActionBarActivity {  
2.   
3.     @Override  
4.     protected void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.         setContentView(R.layout.activity_main);  
7.         ViewPager pager= (ViewPager) findViewById(R.id.pager);  
8.         SlidingTabLayout tab= (SlidingTabLayout) findViewById(R.id.tab);  
9.   
10.         MyAdapte adapter= new MyAdapte();  
11.         pager.setAdapter(adapter);  
12.         tab.setViewPager(pager);  
13.     }  
14.   
15.     int[] colors={0xFF123456,0xFF654321,0xFF336699};  
16.   
17.     class MyAdapte extends PagerAdapter{  
18.         String[] titles={"AA","BB","CC"};  
19.   
20.         ArrayList<LinearLayout> layouts=new ArrayList<LinearLayout>();  
21.         MyAdapte() {  
22.   
23.             for (int i = 0; i < 3; i++) {  
24.                 LinearLayout l=new LinearLayout(MainActivity.this);  
25.                 l.setBackgroundColor(colors[i]);  
26.                 l.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));  
27.                 layouts.add(l);  
28.             }  
29.   
30.         }  
31.   
32.         @Override  
33.         public int getCount() {  
34.             return layouts.size();  
35.         }  
36.   
37.         @Override  
38.         public boolean isViewFromObject(View view, Object o) {  
39.             return view==o;  
40.         }  
41.   
42.         @Override  
43.         public Object instantiateItem(ViewGroup container, int position) {  
44.             LinearLayout l=layouts.get(position);  
45.             container.addView(l);  
46.             return l;  
47.         }  
48.   
49.         @Override  
50.         public void destroyItem(ViewGroup container, int position, Object object) {  
51.             container.removeView(layouts.get(position));  
52.         }  
53. <span style="white-space:pre">    </span>//Tab上显示的文字  
54.         @Override  
55.         public CharSequence getPageTitle(int position) {  
56.             return titles[position];  
57.         }  
58.     }  
59. }  

布局如下：

[java]  view plain  copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     tools:context=".MainActivity">  
7.   
8.     <com.example.wanggang.slindingtablayouttest001.SlidingTabLayout  
9.         android:id="@+id/tab"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content" />  
12.   
13.     <android.support.v4.view.ViewPager  
14.         android:layout_width="match_parent"  
15.         android:layout_height="match_parent"  
16.         android:id="@+id/pager" />  
17. </LinearLayout>  

运行效果如下：

       

如果要修改 选中效果 的颜色,或者加上选中颜色过度效果，或者 分割线的颜色，可以为 SlidingTabLayout设置属性

[java]  view plain  copy

1. tab.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {  
2.             @Override  
3.             public int getIndicatorColor(int position) {  
4.                 return colors[position];//每个选项卡所对应的颜色  
5.             }  
6. <span style="white-space:pre">    </span>    //分割线颜色  
7.             @Override  
8.             public int getDividerColor(int position) {  
9.                 return 0x00FFFFFF;  
10.             }  
11.         });  

效果如下:

根据以上的运行效果可以看出，每个Tab上面显示的内容都是文本。如果要显示图片，就需要将图片变成  ImageSpan，通过PagerAdapter  的 getPageTitle() 返回到 SlidingTabLayout。

[java]  view plain  copy

1. <span style="white-space:pre">    </span>int[] imageResId = {  
2.                 R.drawable.ic_launcher,  
3.                 R.drawable.ic_launcher,  
4.                 R.drawable.ic_launcher  
5.         };  
6.   
7.         @Override  
8.         public CharSequence getPageTitle(int position) {  
9.             Drawable image = getResources().getDrawable(imageResId[position]);  
10.             image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());  
11.             SpannableString sb = new SpannableString(" ");  
12.             ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);  
13.             sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);  
14.             return sb;  
15.             //return titles[position];  
16.         }  

  但是由于SlidingTabLayout自带的TextView会调用 setAllCaps(true)，会取消所有的 ImageSpan 的效果。所以需要自定义TabView。

res/layout/custom_tab.xml

[java]  view plain  copy

1. <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="wrap_content"  
3.     android:layout_height="wrap_content"  
4.     android:textSize="12sp"  
5.     android:gravity="center"  
6.     android:textStyle="bold"  
7.     android:padding="16dp" />  

然后 在 tab.setViewPager(pager) 之前调用  tab.setCustomTabView(R.layout.custom_tab,0) 设置自定义TabView

[java]  view plain  copy

1. tab.setCustomTabView(R.layout.custom_tab,0);  
2. tab.setViewPager(pager);  

运行效果如下：

最后，我们会发现，所有的TabView都没有铺满屏幕宽度。如果要每个TabView都平分屏幕宽度，只需在自定义的TextView 上加上权重属性即可。

[java]  view plain  copy

1. <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="0dp"  
3.     android:layout_weight="1"  
4.     android:layout_height="wrap_content"  
5.     android:textSize="12sp"  
6.     android:gravity="center"  
7.     android:textStyle="bold"  
8.     android:padding="16dp" />  

效果如下：

源码下载

顶