强大和简单的顶部导航栏效果

github地址：

• https://github.com/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://schemas.android.com/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(R.id.indicator);
        viewPager = (ViewPager)findViewById(R.id.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这个方法进行修改就行了。

打开下载列子