ViewPagerWithIndicator 自定义ViewPager下方带圆点指示器

    工作之余，记录一下自己平常用到的一个ViewPager下方带圆点指示器的demo，有需求的朋友可以直接使用！

效果图：

   该类库包含两个类

ViewPagerWrapContent ：对ViewPager的继承，动态计算ViewPager内部View的高度

部分代码如下：

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    int height = 0;    for(int i = 0; i < getChildCount(); i++) {        View child = getChildAt(i);        child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));        int h = child.getMeasuredHeight();        if(h > height) height = h;    }    heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);    super.onMeasure(widthMeasureSpec, heightMeasureSpec);}

ViewPagerWithIndicator：该view继承LinearLayout  内部通过动态添加布局实现指示器效果

public class ViewPagerWithIndicator extends LinearLayout {    private int mRoundSize;    private int mMargin_top;    private int mRoundDrawable;    private int mRoundDefaultColor;    private int mRoundSelectedColor;    private ViewPager mViewPager = null;    private LinearLayout roundedIndicatorContainer = null;    /*    ** Constructor     */    public ViewPagerWithIndicator(Context context) {        this(context, null);    }    public ViewPagerWithIndicator(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ViewPagerWithIndicator, 0, 0);        try {            mRoundSize = a.getLayoutDimension(R.styleable.ViewPagerWithIndicator_round_size, ViewGroup.LayoutParams.WRAP_CONTENT);            mMargin_top = a.getLayoutDimension(R.styleable.ViewPagerWithIndicator_round_margin_top, 10);            mRoundDrawable = a.getResourceId(R.styleable.ViewPagerWithIndicator_round_drawable, 0);            mRoundDefaultColor = a.getColor(R.styleable.ViewPagerWithIndicator_round_color_default, Color.TRANSPARENT);            mRoundSelectedColor = a.getColor(R.styleable.ViewPagerWithIndicator_round_color_selected, Color.GREEN);        } finally {            a.recycle();        }        init();    }    /*    ** Public method     */    public void setViewPager(@NonNull final ViewPager viewPager) {        if (viewPager.getAdapter() == null) {            throw new IllegalStateException("ViewPager does not have adapter instance.");        }        mViewPager = viewPager;        //Init roundedIndicator container        roundedIndicatorContainer = new LinearLayout(getContext());        roundedIndicatorContainer.setOrientation(LinearLayout.HORIZONTAL);        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        params.setMargins(0, 10, 0, 0);        roundedIndicatorContainer.setLayoutParams(params);        this.addView(roundedIndicatorContainer);        populateView();        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                updateRoundIndicator();            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    /*    ** Private method     */    private void init() {        this.setOrientation(LinearLayout.VERTICAL);        this.setGravity(Gravity.CENTER);        //Init roundedIndicator container      /*  roundedIndicatorContainer = new LinearLayout(getContext());        roundedIndicatorContainer.setOrientation(LinearLayout.HORIZONTAL);        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);        roundedIndicatorContainer.setLayoutParams(params);        this.addView(roundedIndicatorContainer);*/    }    private void populateView() {        //populate roundedIndicator container        LayoutParams params = new LayoutParams(mRoundSize, mRoundSize);        for (int i = 0; i < mViewPager.getAdapter().getCount(); i++) {            ImageView roundIndicator = new ImageView(getContext());            roundIndicator.setBackgroundResource(mRoundDrawable);            roundIndicator.setLayoutParams(params);            roundedIndicatorContainer.addView(roundIndicator);        }        updateRoundIndicator();    }    private void updateRoundIndicator() {        //TODO avoid loop over every element (store last updated)        for (int i = 0; i < mViewPager.getAdapter().getCount(); i++) {            View view = roundedIndicatorContainer.getChildAt(i);            GradientDrawable background = (GradientDrawable) view.getBackground();            background.setColor(i == mViewPager.getCurrentItem() ? mRoundSelectedColor : mRoundDefaultColor);        }    }

以上是主要的实现代码！

使用方式：

在布局文件中引用：

<com.zzx.library.ViewPagerWithIndicator    app:round.enable="true"    app:round.size="15dip"    app:round.drawable="@drawable/background_rounded"    app:round.color.default="@android:color/white"    app:round.color.selected="@android:color/holo_blue_light"    android:id="@+id/viewPagerWithIndicator"    app:round.margin_top="5dp"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <com.zzx.library.ViewPagerWrapContent        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="wrap_content" /></com.zzx.library.ViewPagerWithIndicator>

在Activity中使用：

mViewPager = (ViewPager) findViewById(R.id.viewPager);mViewPagerWithIndicator = (ViewPagerWithIndicator) findViewById(R.id.viewPagerWithIndicator);mViewPager.setAdapter(new CustomViewPagerAdapter(this));mViewPagerWithIndicator.setViewPager(mViewPager);

以上是该类库的主要使用方式，欢迎关注！

github完整代码