ViewPageIndicator的使用

在很多app中都有一个tab指示器，可以左右滑动也可以固定显示，这样当我们点击每个tab叶签的时候会自动显示当前的页面，如果每次自定义的话就显得很麻烦，著名的开源框架ViewPageIndicator可以帮助我们实现这种功能，接下来就介绍一天他的用法，首先来看效果图：

当选择香港的时候就会展示香港的商品，是这个效果有两种方式，一种是ViewPageIndicator+Viewpager+fragment,另一种是ViewPageIndicator+Viewpager来实现，网络上大部分采用第一种实现，在这里由于项目的原因采用第二种，步骤如下：

1、xml布局上半部分是TabPageIndicator，下半部分是ViewPager，如下：

xml version="1.0" encoding="utf-8"?>

xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

            android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:theme="@style/StyledIndicators"

        >
    

            android:id="@+id/vp_hot_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    

2、初始化TabPageIndicator，ViewPager，给ViewPager设置适配器，将TabPageIndicator和ViewPager绑定：

//实例化ViewPager， 然后给ViewPager设置Adapter
pager = (ViewPager) view.findViewById(R.id.vp_hot_pager); 
indicator = (TabPageIndicator)view.findViewById(R.id.indicator);

TabPageIndicatorAdapter adapter = new TabPageIndicatorAdapter();
pager.setAdapter(adapter);

indicator.setVisibility(View.VISIBLE);

// 实例化 TabPageIndicator ，然后与 ViewPager 绑在一起（核心步骤） indicator.setViewPager( pager);
adapter适配器：

private static final String[] TITLE = new String[]{"美国","日本","法国","意大利","俄罗斯","香港","韩国","中国","古巴"};

/**
 * 定义ViewPager的适配器
 */
class TabPageIndicatorAdapter extends PagerAdapter {

    @Override
    public CharSequence getPageTitle(int position) {
        String s = TITLE[position % TITLE.length];
        return s;
    }

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

    @Override
    public boolean isViewFromObject(View view,Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container,int position) {
        FrameLayout shopPager = new ShopPager(shopsList,mActivity) ;
        container.addView(shopPager);
        return   shopPager;
    }

    @Override
    public void destroyItem(ViewGroup container,int position,Object object) {
        container.removeView((View) object);
    }

每个viewpager的页面布局：

public class ShopPager extends FrameLayout {
    private Activity                    mActivity;
    private ArrayList shopsList;

    public ShopPager(ArrayList shopsList,Activity mActivity) {
        super(mActivity);
        this.mActivity = mActivity;
        this.shopsList = shopsList;
        initView();
    }

    private void initView() {
        GridView gridView = new GridView(mActivity);
        gridView.setNumColumns(2);
        gridView.setHorizontalSpacing(UiUtils.px2dp(20));
        gridView.setVerticalSpacing(UiUtils.px2dp(20));
        gridView.setPadding(UiUtils.px2dp(40),UiUtils.px2dp(40),UiUtils.px2dp(40),UiUtils.px2dp(40));
        gridView.setAdapter(new HotShopAdapter(shopsList,mActivity));
        addView(gridView);
    }
}

3、tab的样式设置

在values/sytle下建立如下属性：

在 TabPageIndicator标签下配置 app:theme="@style/StyledIndicators"属性，设置样式。

注意事项：

1、当TabPageIndicator绑定的时候报出：java.lang.IllegalStateException: ViewPager has not been bound.错误，解决办法：在xml中设置TabPageIndicator为gone，隐藏，在设置完Viewpager的adapter数据完之后在显示。

2、去掉tab底部的横线。在styles.xml文件下找到CustomTabPageIndicator重新设置背景。

·