ViewPager (二)

ViewPager (二)

页卡标题是ViewPager重要部件, 前面我们提到的android自带的控件,PagerTabStrip或PagerTitleStrip
除此外,要自定义一些更美观的页卡标题还可以选择ViewPagerIndicator

https://github.com/JakeWharton/ViewPagerIndicator

下载下来后源码是以lib方式工作, 需要我们新建一个空的lib项目, 然后把源码拷贝到新建的项目

源码里面有个example目录, 是用法例子, 不能直接导入, 同样需要新建项目, 并拷贝源码, 注意把manifest, 还有资源文件都要拷贝过来,并添加依赖前面的lib项目… 才能正常运行.里面有很多的例子, 提供不同样式的Indicator

比如帮以前的viewpager基础里例子代码, 加入ViewPagerIndicator, 步骤:

1 新建项目, 设置为lib项目, 并copy源码到该lib

2 设置viewpager项目依赖刚才新建的lib项目 , 并copy 必须的资源文件: res 目录下的drawable目录里图片资源, values目录下的styles.xml

3 初始化标题列表或数组, 传递给FragmentPagerAdapter, 并实现getPageTitle (这个和使用自带的PagerTabStrip 是一样的)
这里的mTitles是传递过来的标题String数组

    @Override
    public CharSequence getPageTitle(int position) {
//       return mTitles[position % mTitles.length].toUpperCase();  
//       return mTitles[position];  
         return mTitles[position % mTitles.length];
    }

4 修改布局文件

    <android.support.v4.view.ViewPager
        android:id="@+id/id_pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/indicator"
        android:padding="10dip"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="#18FF0000"
        android:textColor="#AA000000"
        app:footerColor="#FFAA2222"
        app:footerLineHeight="1dp"
        app:footerIndicatorHeight="3dp"
        app:footerIndicatorStyle="underline"
        app:selectedColor="#FF000000"
        app:selectedBold="true"
        />

5 Activity 中:

        MyFragmentPagerAdapter3 fragmentAdapter3 = new MyFragmentPagerAdapter3(
                getSupportFragmentManager(), fragList, titles);
        pager.setAdapter(fragmentAdapter3);
        // pager.setOnPageChangeListener(this);

        // 测试indicator
        // CirclePageIndicator indicator = (CirclePageIndicator)
        // findViewById(R.id.id_titles);
        // CirclePageIndicator indicator = (CirclePageIndicator)
        // findViewById(R.id.id_line_indicator);
        // LinePageIndicator indicator = (LinePageIndicator)
        // findViewById(R.id.id_line_indicator);
        // indicator.setViewPager(pager);

        TitlePageIndicator mIndicator = (TitlePageIndicator) findViewById(R.id.indicator);
        mIndicator.setViewPager(pager);
        mIndicator.setOnPageChangeListener(this);

6 如果原来的pager使用了监听器的话, 应该把监听器绑定到indicator , 而不再是pager绑定监听器
(Optional) If you use an OnPageChangeListener with your view pager
you should set it in the indicator rather than on the pager directly.

     //continued from above
     titleIndicator.setOnPageChangeListener(mPageChangeListener);

看起来需要6个步骤, 但是如果没有标题文字, 只是页面切换圆点的话, 最简单的情况只需要两步就可以了, 具体的查看sample里面的例子