关于ViewPager当前页卡指示器的简单实现方法

今天的案例为大家分享在Viewpager中当前页中指示器的实现方法，即通常放在ViewPager底部的实心小圆点，用于提示用户当前ViewPager所在的当前页是哪一页。整体实现的思想是通过给ViewPager设置OnPagerChangeListener在onPageSelected方法中设置当前页的选择状态

初始化的时候先初始化与list集合size相等的圆点个数：

 

 int size = mList.size();
        initPageIndicator(size);

然后是给ViewPager设置监听事件，并在onPageSelected方法中设置被选中的当前页圆点为选中状态：

 

 

 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                System.out.println(position+"-----------");
                for (int i = 0; i < 4; i++) {
                    setIndicator(i, i == position);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

初始化指示点：

private void setIndicator(int i, boolean enabled) {
        View view = mIndicator.getChildAt(i);
        if (view != null) {
            view.setEnabled(enabled);
        }
    }

    private void initPageIndicator(int size) {
        if (size <= 1) {
            return;
        }
        for (int i = 0; i < size; i++) {
            addPageIndicator(i);
        }

        setIndicator(0, true);
    }

    private void addPageIndicator(int i) {
        View dot = new View(this);
        dot.setBackgroundResource(R.drawable.dot_bg_black_selector);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
        if (i != 0) {
            params.leftMargin = 40;
        }
        params.topMargin = 20;
        params.bottomMargin = 10;
        dot.setEnabled(false);
        dot.setLayoutParams(params);
        mIndicator.addView(dot);
    }

 

 

 

其中在初始化指示点的时候引用的drawable文件夹下的selector文件为：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@android:drawable/alert_dark_frame" android:state_enabled="true"/>
    <item android:drawable="@android:drawable/alert_light_frame" android:state_enabled="false"/>
</selector>

 

 

 

完整代码如下：

主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager"
        />
    <LinearLayout
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:orientation="horizontal"/>
</RelativeLayout>

 

 

 

ViewPager的Adapter代码：

 

/**
 * Created by xiedong on 2017/4/7.
 */

public class ViewPagerAdapter extends PagerAdapter {

    private List<View> mList = new ArrayList<>();
    private LayoutInflater mInflater;

    public ViewPagerAdapter(Context context , List<View> list) {
        if (list == null || list.isEmpty()){
            return;
        }
        mInflater = LayoutInflater.from(context);
        mList = list;


//        initView(list);

    }

//    private void initView(List<View> list) {
//      for (View view :list){
//          View item = mInflater.inflate(R.layout.viewpager_item,null);
//          mList.add(item);
//      }
//    }

    @Override
    public int getCount() {
        return null ==mList ? 0 :mList.size();
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mList.get(position));
        return mList.get(position);
    }
}

功能代码：

 

 

/**
 * Created by xiedong on 2017/4/7.
 */

public class IndicatorActivity extends Activity {

    private ViewPager mViewPager;
    private LinearLayout mIndicator;
    private List<View> mList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_indicator);

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mIndicator = (LinearLayout) findViewById(R.id.indicator);

        for (int i = 0; i < 4; i++) {
            View item = LayoutInflater.from(this).inflate(R.layout.viewpager_item,null);
            mList.add(item);
        }

        mViewPager.setAdapter(new ViewPagerAdapter(this,mList));

        int size = mList.size();
        initPageIndicator(size);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                System.out.println(position+"-----------");
                for (int i = 0; i < 4; i++) {
                    setIndicator(i, i == position);
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }



    private void setIndicator(int i, boolean enabled) {
        View view = mIndicator.getChildAt(i);
        if (view != null) {
            view.setEnabled(enabled);
        }
    }

    private void initPageIndicator(int size) {
        if (size <= 1) {
            return;
        }
        for (int i = 0; i < size; i++) {
            addPageIndicator(i);
        }

        setIndicator(0, true);
    }

    private void addPageIndicator(int i) {
        View dot = new View(this);
        dot.setBackgroundResource(R.drawable.dot_bg_black_selector);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20, 20);
        if (i != 0) {
            params.leftMargin = 40;
        }
        params.topMargin = 20;
        params.bottomMargin = 10;
        dot.setEnabled(false);
        dot.setLayoutParams(params);
        mIndicator.addView(dot);
    }
}

 

 

 

 

 

填充ViewPager的布局文件viewpager_item.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@color/colorAccent"

    android:layout_height="match_parent">

</LinearLayout>