最近在使用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;
}
});
效果如下:
<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" />
效果如下: