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

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];  

        }  

    }  

}  

布局如下：

[java] view
plain copy

<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设置属性

[java] view
plain copy

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。

[java] view
plain copy

<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

[java] view
plain copy

<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

[java] view
plain copy

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

tab.setViewPager(pager);  

运行效果如下：



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

[java] view
plain copy

<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" />  

效果如下：



源码下载



顶