Android PageIndicator的使用 ViewPageIndicator的使用

ViewPageIndicator的使用

2016年08月05日 19:13:29

阅读数：1150

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

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

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

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

<LinearLayout 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">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:theme="@style/StyledIndicators"

        >
    </com.viewpagerindicator.TabPageIndicator>

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

</LinearLayout>

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<HotBean.HotDatas> shopsList;

    public ShopPager(ArrayList<HotBean.HotDatas> 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下建立如下属性：

<style name="StyledIndicators" parent="@android:style/Theme.Light">
    <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>

<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
    <item name="android:background">@drawable/tab_indicator_bg</item>
    <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
    <item name="android:textSize">16sp</item>
    <item name="android:dividerPadding">14dp</item>
    <item name="android:showDividers">middle</item>
    <item name="android:paddingLeft">14dp</item>
    <item name="android:paddingRight">14dp</item>
    <item name="android:fadingEdge">horizontal</item>
    <item name="android:fadingEdgeLength">8dp</item>

</style>

<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
    <item name="android:typeface">monospace</item>
   <item name="android:textColor">@color/text_press_selector</item>

</style>

<style name="TabLayoutTextStyle">
    <item name="android:textSize">12sp</item>
</style>

在 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重新设置背景。