通过自定义View，创建一个圆形指示器

在项目中只要涉及到滑动的地方，很多时候都需要用到指示器。那么今天就通过自定义View来创建一个属于自己的指示器。

效果图：

首先，在res - values下新建一个attr文件, 可命名为：attr_indicator.xml 代码如下：

<resources>    <declare-styleable name="PageIndicatorView">                <attr name="circleInterval" format="dimension"/>                <attr name="circleSizi" format="dimension"/>                <attr name="circleNumber" format="integer"/>                <attr name="selectIndex" format="integer"/>                <attr name="circleSelectColor" format="color"/>                <attr name="circleUnSelectColor" format="color"/>    declare-styleable>resources>

然后。新建一个类，继承View，这里命名为：PageIndicatorView

代码如下：

import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.util.TypedValue;import android.view.View;import com.yikelive.R;import androidx.annotation.Nullable;public class PageIndicatorView extends View {         private Paint mPaint;    private int mCircleInterval;//设置圆和点圆之间的间隔    private int mCircleRadius;//设置圆的大小    private int mCircleNumber;//设置圆的个数    private int mSelectIndex = 1;//设置选中的圆    private int mScreenWidht;    private int mScreenHeight;    private int mWidht;    private int mHeight;    private int mSelectColor;    private int mUnSelectColor;    public void setmCircleNumber(int mCircleNumber) {             this.mCircleNumber = mCircleNumber;    }    public void setIndex(int selectIndex) {             if (selectIndex > mCircleNumber) {                 this.mSelectIndex = mCircleNumber;        } else {                 this.mSelectIndex = selectIndex;        }        postInvalidate();    }    public void setmSelectColor(int mSelectColor) {             this.mSelectColor = mSelectColor;    }    public void setmUnSelectColor(int mUnSelectColor) {             this.mUnSelectColor = mUnSelectColor;    }    public PageIndicatorView(Context context) {             this(context, null);    }    public PageIndicatorView(Context context, @Nullable AttributeSet attrs) {             this(context, attrs, 0);    }    public PageIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {             super(context, attrs, defStyleAttr);        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setColor(Color.BLACK);        mPaint.setStrokeWidth(20);        mPaint.setStyle(Paint.Style.FILL);        mScreenWidht = context.getResources().getDisplayMetrics().widthPixels;        mScreenHeight = context.getResources().getDisplayMetrics().heightPixels;        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PageIndicatorView, defStyleAttr, 0);        int count = ta.getIndexCount();        for (int i = 0; i < count; i++) {                 int index = ta.getIndex(i);            switch (index) {                     case R.styleable.PageIndicatorView_circleInterval:                    mCircleInterval = ta.getDimensionPixelSize(index, (int) TypedValue.applyDimension                            (TypedValue.COMPLEX_UNIT_PX, 12, context.getResources().getDisplayMetrics()));                    break;                case R.styleable.PageIndicatorView_circleNumber:                    mCircleNumber = ta.getInt(index, 4);                    break;                case R.styleable.PageIndicatorView_circleSizi:                    mCircleRadius = ta.getDimensionPixelOffset(index, (int) TypedValue.applyDimension                            (TypedValue.COMPLEX_UNIT_DIP, 12, context.getResources().getDisplayMetrics()));                    break;                case R.styleable.PageIndicatorView_selectIndex:                    mSelectIndex = ta.getInt(index, 1);                    break;                case R.styleable.PageIndicatorView_circleSelectColor:                    mSelectColor = ta.getColor(index, Color.WHITE);                    break;                case R.styleable.PageIndicatorView_circleUnSelectColor:                    mUnSelectColor = ta.getColor(index, Color.BLACK);                    break;            }        }        ta.recycle();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {             super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int wMode = MeasureSpec.getMode(widthMeasureSpec);        int wSize = MeasureSpec.getSize(widthMeasureSpec);        int hMode = MeasureSpec.getMode(heightMeasureSpec);        int hSize = MeasureSpec.getSize(heightMeasureSpec);        int viewWidht = 0;        int viewHeight = 0;        switch (wMode) {                 case MeasureSpec.EXACTLY:                viewWidht = wSize;                break;            case MeasureSpec.AT_MOST:                viewWidht = mCircleInterval + getPaddingLeft() + getPaddingRight() + mCircleRadius * 2;                break;            case MeasureSpec.UNSPECIFIED:                viewWidht = wSize;                break;        }        switch (hMode) {                 case MeasureSpec.EXACTLY:                viewHeight = wSize;                break;            case View.MeasureSpec.AT_MOST:                viewHeight = getPaddingBottom() + getPaddingTop() +  mCircleRadius * 2;                break;            case MeasureSpec.UNSPECIFIED:                viewHeight = wSize;                break;        }        setMeasuredDimension(resolveSize(viewWidht, widthMeasureSpec), resolveSize(viewHeight, heightMeasureSpec));    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {             super.onSizeChanged(w, h, oldw, oldh);        mWidht = w;        mHeight = h;    }    @Override    protected void onDraw(Canvas canvas) {             super.onDraw(canvas);        int mViewWidht;        for (int i = 1; i <= mCircleNumber; i++) {                 if (mSelectIndex == i) {                     mPaint.setColor(mSelectColor);                canvas.drawCircle((2 * i - 1) * mCircleRadius + mCircleInterval * (i - 1), mCircleRadius, mCircleRadius, mPaint);                continue;            }            mPaint.setColor(mUnSelectColor);            canvas.drawCircle((2 * i - 1) * mCircleRadius + mCircleInterval * (i - 1), mCircleRadius, mCircleRadius, mPaint);        }    }}

下面就是在xml布局文件文件中的应用：

 <com.yikelive.ui.vip.newVip.assets.PageIndicatorView            android:id="@+id/pv_point"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            app:circleInterval="3dp"            app:circleSelectColor="#fbe29c"            app:circleSizi="3dp"            app:circleUnSelectColor="#666"/>

最后说一下在控制器中的使用,初始化一下指示器数量和默认选中位置，然后即是改变逻辑，以ViewPager为例，在ViewPager的翻页完成监听（ onPageSelected() ）中执行指示器的**setIndex(position + 1)**方法即可。

代码如下：

 // 设置指示器数量 host.pv_point.setmCircleNumber(users.size) //设置指示器初始选中位置(从1开始) host.pv_point.setIndex(1) // ViewPager监听 host.rv_head.setOnPageChangeListener(object : ViewPager.OnPageChangeListener {                 override fun onPageScrollStateChanged(state: Int) {                 }            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {                 }//翻页完成后执行            override fun onPageSelected(position: Int) {     //指示器选中位置改变                host.pv_point.setIndex(position + 1)            }        })

到此。一个指示器就全部完成了。

更多相关文章

随机推荐