github地址:
- https:///shanyao0/TabPagerIndicatorDemo
一个强大的顶部标题导航栏,支持6种不同的模式
先来看下效果,再看使用方法
一:MODE_WEIGHT_NOEXPAND_SAME
几个标题均分宽度,不能扩展,底部导航线跟标题宽度一致
二:MODE_WEIGHT_NOEXPAND_NOSAME
几个标题均分宽度,不能扩展,底部导航线跟标题宽度不一致
三:MODE_NOWEIGHT_NOEXPAND_SAME
标题不均分宽度,不能扩展,底部导航线跟标题宽度一致
四:MODE_NOWEIGHT_NOEXPAND_NOSAME
标题不均分宽度,不能扩展,底部导航线跟标题宽度不一致
五:MODE_NOWEIGHT_EXPAND_SAME
标题不均分宽度,能扩展,底部导航线跟标题宽度一致
六:MODE_NOWEIGHT_EXPAND_NOSAME
标题不均分宽度,能扩展,底部导航线跟标题宽度不一致
接下来,我说明一下用法,我自己抽离出了这个项目 只有一个TabPageIndicator和 attr自定义属性的文件,非常简单 先说明一下主要的API:
setIndicatorMode()//设置控件的模式,上面是提到的6种模式
setDividerColor()//设置两个标题之间的竖直分割线的颜色,如果不需要显示这个,设置颜色为透明即可
setDividerPadding()//设置中间竖线上下的padding值
setIndicatorColor()//设置底部导航线的颜色,就是上面演示图的绿色导航线
setIndicatorHeight()// 设置底部导航线的高度
setDividerPadding()// 设置Tab标题之间的间距
setTextColorSelected()//设置tab标题选中的颜色
setTextColor()//设置tab标题未被选中的颜色
setTextSize()//设置字体的大小
setUnderlineColor()// 设置最下面一条的横线的颜色
setUnderlineHeight()//设置最下面一条的横线的高度
setScrollOffset()// 这个方法是当选择MODE_NOWEIGHT_EXPAND_NOSAME和MODE_NOWEIGHT_EXPAND_SAME这两个模式的时候有作用
下面简单讲一下 先写xml.文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http:///apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<com.cong.tabpagerindicatordemo.view.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="40dp"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff" />
</LinearLayout>
就是自定义类和ViewPager的结合
下面是其中一种特效Activity的代码
public class NoWeightExpandNoSame extends FragmentActivity {
private TabPageIndicator indicator;
private ViewPager viewPager;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_indicator);
indicator = (TabPageIndicator)findViewById(.indicator);
viewPager = (ViewPager)findViewById(.viewPager);
BasePagerAdapter adapter = new BasePagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
indicator.setViewPager(viewPager);
setTabPagerIndicator();
}
private void setTabPagerIndicator() {
indicator.setIndicatorMode(TabPageIndicator.IndicatorMode.MODE_NOWEIGHT_EXPAND_NOSAME);// 设置模式,一定要先设置模式
indicator.setDividerColor(Color.parseColor("#00bbcf"));// 设置分割线的颜色
indicator.setDividerPadding(CommonUtils.dip2px(ShanYaoApplication.getContext(), 10));
indicator.setIndicatorColor(Color.parseColor("#43A44b"));// 设置底部导航线的颜色
indicator.setTextColorSelected(Color.parseColor("#43A44b"));// 设置tab标题选中的颜色
indicator.setTextColor(Color.parseColor("#797979"));// 设置tab标题未被选中的颜色
indicator.setTextSize(CommonUtils.sp2px(ShanYaoApplication.getContext(), 16));// 设置字体大小
}
class BasePagerAdapter extends FragmentPagerAdapter {
String[] titles;
public BasePagerAdapter(FragmentManager fm) {
super(fm);
this.titles = CommonUtils.getStringArray(R.array.expand_titles);
}
@Override
public Fragment getItem(int position) {
return FragmentFactory.createForExpand(position);
}
@Override
public int getCount() {
return titles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
}
如果我们想修改 只需要在setTabagerIndeicator这个方法进行修改就行了。
打开下载列子