最新ViewPagerIndicator的使用

在ViewPager盛行的时代，我们经常会见到一个ViewPager的上面有一个导航栏和滚动条

以我对ViewPager的理解，我之前用的都是纯原生的代码来实现，根据ViewPager的滚动监听和导航栏的点击事件，来实现三者的变化

以前我也看过关于ViewPagerIndicator的一些博客，但是实现起来太麻烦了，写的不够清晰。

最近我发现有同事用ViewPagerIndicator，感觉用起来还挺方便的，于是就看了下代码，感觉和以前博客上看的真的相差很大。

其实ViewPagerIndicator用起来挺简单的

以下是代码（我用的是AS）

首先我们要引入三方的包

compile 'com.shizhefei:ViewPagerIndicator:1.1.3'

然后是我们的Layout里使用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.shizhefei.view.indicator.FixedIndicatorView
        android:id="@+id/vp_title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorAccent" />

  

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/vp_title"
        android:background="@color/white_bg" />

</RelativeLayout>

接下来在我们的Activity里面去设置就行了

public class MainActivity extends FragmentActivity {
    //找Id我用的黄油刀
    @Bind(R.id.vp_title)
    FixedIndicatorView vpTitle;
    @Bind(R.id.vp_content)
    ViewPager vpContent;
    private String[] tab;
    private List<Fragment> fragments;
    private Fragment1 fr1, fr2, fr3;
    private FragmentManager fm;
    FragmentTransaction ft;
    private IndicatorViewPager indicatorViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initDate();
        initSet();
    }

    /**
     * 初始化布局
     */
    private void initSet() {
    }

    /**
     * 准备数据
     */
    private void initDate() {
        tab = new String[]{"充值", "理财", "回款"};
        fragments = new ArrayList<>();
        fragments.add(fr1 = new Fragment1());
        fragments.add(fr2 = new Fragment1());
        fragments.add(fr3 = new Fragment1());

        fm = getFragmentManager();
        ft = fm.beginTransaction();
//        vpTitle.setScrollBar(new ColorBar(getApplicationContext(), getResources().getColor(R.color.blue_bg), 8));//设置滚动条的颜色，及高度
        vpTitle.setScrollBar(new LayoutBar(this, R.layout.title_image, ScrollBar.Gravity.CENTENT));//滚动条也可以是一个Layout
        float unSelectSize = 14;//Title的文字大小
        int selectColor = getResources().getColor(R.color.blue_bg);//当前显示的Title颜色
        int unSelectColor = getResources().getColor(R.color.red_bg);//未显示的Title颜色
        vpTitle.setOnTransitionListener(new OnTransitionTextListener().setColor(selectColor, unSelectColor).setSize(unSelectSize, unSelectSize));
        //设置文字的颜色，以及大小
        indicatorViewPager = new IndicatorViewPager(vpTitle, vpContent);
        indicatorViewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
        vpContent.setOffscreenPageLimit(tab.length);
        indicatorViewPager.setPageOffscreenLimit(tab.length);
    }

    private class MyAdapter extends IndicatorViewPager.IndicatorFragmentPagerAdapter {
        public MyAdapter(android.support.v4.app.FragmentManager fragmentManager) {
            super(fragmentManager);
        }

        @Override
        public int getCount() {
            return tab.length;
        }

        @Override
        public View getViewForTab(int position, View convertView, ViewGroup container) {
            if (convertView == null) {
                convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab_top, container, false);
            }
            TextView view = (TextView) convertView.findViewById(R.id.tv_tab);
            view.setText(tab[position]);//设置Title的文字
            return convertView;
        }

        @Override
        public Fragment getFragmentForPage(int position) {
            return fragments.get(position);
        }
    }
}

这里我们就实现了导航栏、滚动条、ViewPager三者的关联变换

如果想要酷炫的滚动条，可以将滚动条设置为一个Layout布局 ，（代码在上面）这样你就可以随意定制你的滚动条样式了

下面的代码是我们项目中用到的一个滚动条Layout文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:gravity="center_horizontal|bottom"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/scroll_sj" />

</LinearLayout>

希望我的介绍能够对大家有所帮助