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

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

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

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

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager pager= (ViewPager) findViewById(R.id.pager);
        SlidingTabLayout tab= (SlidingTabLayout) findViewById(R.id.tab);

        MyAdapte adapter= new MyAdapte();
        pager.setAdapter(adapter);
        tab.setViewPager(pager);
    }

    int[] colors={0xFF123456,0xFF654321,0xFF336699};

    class MyAdapte extends PagerAdapter{
        String[] titles={"AA","BB","CC"};

        ArrayList<LinearLayout> layouts=new ArrayList<LinearLayout>();
        MyAdapte() {

            for (int i = 0; i < 3; i++) {
                LinearLayout l=new LinearLayout(MainActivity.this);
                l.setBackgroundColor(colors[i]);
                l.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
                layouts.add(l);
            }

        }

        @Override
        public int getCount() {
            return layouts.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object o) {
            return view==o;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            LinearLayout l=layouts.get(position);
            container.addView(l);
            return l;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(layouts.get(position));
        }
<span style="white-space:pre">    </span>//Tab上显示的文字
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

布局如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.example.wanggang.slindingtablayouttest001.SlidingTabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pager" />
</LinearLayout>

运行效果如下：

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

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

效果如下:

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

<span style="white-space:pre">    </span>int[] imageResId = {
                R.drawable.ic_launcher,
                R.drawable.ic_launcher,
                R.drawable.ic_launcher
        };

        @Override
        public CharSequence getPageTitle(int position) {
            Drawable image = getResources().getDrawable(imageResId[position]);
            image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
            SpannableString sb = new SpannableString(" ");
            ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
            sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            return sb;
            //return titles[position];
        }

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

res/layout/custom_tab.xml

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

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

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

运行效果如下：

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

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

效果如下：

源码下载