Add an indicator and viewpagerindicator to ViewPager.

Add an indicator and viewpagerindicator to ViewPager.

Two things and two objects in a day

ViewPager is a conscience component provided by Android. With ViewPager, You can implement a horizontal sliding paging function in minutes. Using ViewPager to display images in full screen is a classic application scenario, let's take a look:

There is a row of circles in the middle of the bottom of each Page. A solid circle is used to indicate the currently displayed image. It will move as your fingers slide. We can call it ViewPager'sIndicator.

This function is also relatively simple. First, define a horizontal LinearLayout to display indicator, and then put the LinearLayout and ViewPager as sub-elements in a FrameLayout, in this way, the LinearLayout of indicator will be displayed on the top of ViewPager, initially achieving the display effect, but the sliding effect has not yet been implemented.

First create a subclass of LinearLayout-CirclePageIndicator

public class CirclePageIndicator extends LinearLayout

To implement this class elegantly, you can refer to how to elegantly customize a View in Android.

Add indicator according to the number of pages in ViewPager. This method is defined first and then used later.

private void addIndicator(int count) {    for (int i = 0;  i < count; i++) {        ImageView img = new ImageView(getContext());        LayoutParams params = new LayoutParams(                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        params.leftMargin = indicatorSpacing;        params.rightMargin = indicatorSpacing;        img.setImageResource(R.drawable.circle_indicator_stroke);        addView(img, params);    }    if (count > 0) {        ((ImageView) getChildAt(0)).setImageResource(R.drawable.circle_indicator_solid);    }}

I hope that the use of CirclePageIndicator is simple enough to append a statement to ViewPager.

CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator);indicator.setViewPager(pager);

Then we will add the setViewPager Method for CirclePageIndicator.

public void setViewPager(ViewPager pager) {    userDefinedPageChangeListener = getOnPageChangeListener(pager);    pager.setOnPageChangeListener(this);    addIndicator(pager.getAdapter().getCount());}

In order to monitor the PageChange time in ViewPager, The CirclePageIndicator implements the ViewPager. OnPageChangeListener interface, and then adds the listener to ViewPager when setViewPager.

However, this problem comes again. If ViewPager already has a listener before it is passed in, it will obviously overwrite the previous listener here. This is a good deal. Just hack it, use reflection to get the previous listener.

private ViewPager.OnPageChangeListener getOnPageChangeListener(ViewPager pager) {    try {        Field f = pager.getClass().getDeclaredField("mOnPageChangeListener");        f.setAccessible(true);        return (ViewPager.OnPageChangeListener) f.get(pager);    } catch (NoSuchFieldException e) {        e.printStackTrace();    } catch (IllegalAccessException e) {        e.printStackTrace();    }    return null;}

The remainingViewPager.OnPageChangeListenerUpdate indicator Based on page changes.

Source code