最新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>

希望我的介紹能夠對大家有所幫助