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

来源：互联网发布：上古卷轴5原版捏脸数据编辑：程序博客网时间：2024/05/22 20:05

最近在使用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" />  

效果如下：

源码下载

顶

0 0