ViewPager2页面指示器(圆形)

ViewPager2页面指示器(圆形)

在这里插入图片描述

用法:

Vp2IndicatorView indicator = findViewById(R.id.indi);
ViewPager2 viewPager2 = findViewById(R.id.vp);
List<Integer> list = new ArrayList<>();
list.add(R.drawable.se1);
list.add(R.drawable.se2);
list.add(R.drawable.se3);
IndicatorPageAdapter adapter = new IndicatorPageAdapter(list);
viewPager2.setAdapter(adapter);
viewPager2.setOffscreenPageLimit(list.size());
// 注意方向
viewPager2.setLayoutDirection(ViewPager2.LAYOUT_DIRECTION_LTR);

// 在VP2.setAdapter()方法之后绑定VP2
indicator.attachToViewPager2(viewPager2);

Vp2IndicatorView.java

public class Vp2IndicatorView extends View {
    public static final int STYLE_CIRCLR_CIRCLE = 0;

    // 指示器之间的间距
    private int mIndicatorItemDistance;

    //选中与为选中的颜色
    private ColorStateList mColorSelected, mColorUnSelected;

    //指示器样式,默认都是圆点
    private int mIndicatorStyle = STYLE_CIRCLR_CIRCLE;

    // 圆点半径大小
    private int circleCircleRadius = 0;

    //画笔
    private Paint mUnSelectedPaint, mSelectedPaint;

    //指示器item的区域
    private RectF mIndicatorItemRectF;

    //指示器大小
    private int mIndicatorItemWidth, mIndicatorItemHeight;

    //指示器item个数
    private int mIndicatorItemCount = 0;

    //当前选中的位置
    private int mCurrentSeletedPosition = 0;

    @RequiresApi(api = Build.VERSION_CODES.M)
    public Vp2IndicatorView(Context context) {
        this(context, null);
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    public Vp2IndicatorView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    public Vp2IndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        intPaint();
        verifyItemCount();
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    private void init() {
        mColorSelected = getContext().getColorStateList(R.color.error_red);
        mColorUnSelected = getContext().getColorStateList(R.color.dialog_opinion_normal_text_color);
        mIndicatorItemDistance = dip2px(6);
        mIndicatorStyle = STYLE_CIRCLR_CIRCLE;
        circleCircleRadius = dip2px(3);
    }

    private void intPaint() {
        mUnSelectedPaint = new Paint();
        mUnSelectedPaint.setStyle(Paint.Style.FILL);
        mUnSelectedPaint.setAntiAlias(true);
        mUnSelectedPaint.setColor(mColorUnSelected == null ?
                Color.GRAY : mColorUnSelected.getDefaultColor());

        mSelectedPaint = new Paint();
        mSelectedPaint.setStyle(Paint.Style.FILL);
        mSelectedPaint.setAntiAlias(true);
        mSelectedPaint.setColor(mColorSelected == null ?
                Color.RED : mColorSelected.getDefaultColor());

        mIndicatorItemRectF = new RectF();
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);

        mIndicatorItemWidth = 2 * circleCircleRadius * mIndicatorItemCount
                + (mIndicatorItemCount - 1) * mIndicatorItemDistance;
        mIndicatorItemHeight = Math.max(heightSize, 2 * circleCircleRadius);

        setMeasuredDimension(mIndicatorItemWidth, mIndicatorItemHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float cy = mIndicatorItemHeight / 2;
        for (int i = 0; i < mIndicatorItemCount; i++) {
            int cx = (i + 1) * circleCircleRadius + i * mIndicatorItemDistance;
            canvas.drawCircle(cx, cy, circleCircleRadius,
                    i == mCurrentSeletedPosition ? mSelectedPaint : mUnSelectedPaint);
        }
    }

    public void attachToViewPager2(ViewPager2 vp2) {
        RecyclerView.Adapter pagerAdapter = vp2.getAdapter();
        if (pagerAdapter != null) {
            mIndicatorItemCount = pagerAdapter.getItemCount();
            mCurrentSeletedPosition = vp2.getCurrentItem();
            verifyItemCount();
        }

        vp2.registerOnPageChangeCallback(new OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                if (vp2 != null && pagerAdapter != null) {
                    mCurrentSeletedPosition = vp2.getCurrentItem();
                }
                postInvalidate();
            }
        });
    }

    private void verifyItemCount() {
        if (mCurrentSeletedPosition >= mIndicatorItemCount) {
            mCurrentSeletedPosition = mIndicatorItemCount - 1;
        }
        setVisibility((mIndicatorItemCount <= 1) ? GONE : VISIBLE);
    }

    public int dip2px(float dpValue) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值