StepView自定义控件功能实现

功能介绍

1. 支持更多步
2. 全屏适配,支持横屏
3. 可精细化步进操作,如下支持小点先行

当然可以更多定制操作&＃xff0c;下面给出所有源代码&＃xff0c;代码很简单&＃xff0c;根据需要修改。

效果图

第一步	第二步	第三步

支持小点先行

修改i <&＃61; step_number即可

if (i <&＃61; step_number) {dotPaint.setColor(color_ffb93E);} else {dotPaint.setColor(color_666666);}


支持更多步

arrays

<string-array name&＃61;"change_phonenumber_step_name"><item>身份验证</item><item>设置新手机号</item><item>更换成功</item>
</string-array>


xml

<com.xxx.xxx.xxx.view.ChangePhoneNumberStepViewandroid:layout_width&＃61;"match_parent"android:id&＃61;"&＃64;&＃43;id/changep_honenumber_stepview"android:layout_height&＃61;"100dp"phonecontrol:step_array_ids&＃61;"&＃64;array/change_phonenumber_step_name"tools:step_number&＃61;"0">


ps &＃xff1a;修改tools:step_number 可直接预览查看效果

源代码

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.widget.LinearLayout;/*** 文件名&＃xff1a;ChangePhoneNumberStepView* 描 述&＃xff1a;* 作 者&＃xff1a;maqi* 时 间&＃xff1a;2022/4/11 11:03*/
public class ChangePhoneNumberStepView extends LinearLayout {private int step_array_ids;private int step_number;private String[] step_array_ids_strings;private int fatherWidth;private int fatherHeight;private RectF fatherRectF;private Paint dotPaint;private TextPaint textPaint;private Context mContext;private int color_666666;private int color_999999;private int color_ffb93E;private int color_4DFFB93E;private int textsize;private int padding;private int dotmargin;private int dotboard;private int dotmaxboard;private int dotminwidth;public interface StepListener {void step(int step_number);void complete();}private StepListener stepListener;public void setStepListener(StepListener stepListener) {this.stepListener &＃61; stepListener;}public ChangePhoneNumberStepView(Context context) {super(context);mContext &＃61; context;}public ChangePhoneNumberStepView(Context context, &＃64;Nullable AttributeSet attrs) {super(context, attrs);mContext &＃61; context;TypedArray a &＃61; context.obtainStyledAttributes(attrs, R.styleable.changephonenumberstepview);step_array_ids &＃61; a.getResourceId(R.styleable.changephonenumberstepview_step_array_ids, R.array.change_phonenumber_step_name);step_array_ids_strings &＃61; context.getResources().getStringArray(step_array_ids);step_number &＃61; a.getInteger(R.styleable.changephonenumberstepview_step_number, 0);a.recycle();init();}public ChangePhoneNumberStepView(Context context, &＃64;Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext &＃61; context;TypedArray a &＃61; context.obtainStyledAttributes(attrs, R.styleable.changephonenumberstepview);step_array_ids &＃61; a.getResourceId(R.styleable.changephonenumberstepview_step_array_ids, R.array.change_phonenumber_step_name);step_array_ids_strings &＃61; context.getResources().getStringArray(step_array_ids);step_number &＃61; a.getInteger(R.styleable.changephonenumberstepview_step_number, 0);a.recycle();init();}private void init() {setWillNotDraw(false);Log.d("sssss", "step_number " &＃43; step_number);Log.d("sssss", "step_array_ids_strings " &＃43; step_array_ids_strings[0]);textsize &＃61; dp2px(mContext, 14);padding &＃61; dp2px(mContext, 40);dotmargin &＃61; dp2px(mContext, 20);/*大点 边框*/dotboard &＃61; dp2px(mContext, 4);/*点直径*/dotmaxboard &＃61; dp2px(mContext, 12);/*小点直径*/dotminwidth &＃61; dp2px(mContext, 8);initPaint();}private void initPaint() {color_666666 &＃61; mContext.getResources().getColor(R.color.color_666666);color_999999 &＃61; mContext.getResources().getColor(R.color.color_999999);color_ffb93E &＃61; mContext.getResources().getColor(R.color.color_FFB93E);color_4DFFB93E &＃61; mContext.getResources().getColor(R.color.color_4DFFB93E);dotPaint &＃61; new Paint();dotPaint.setStyle(Paint.Style.FILL);dotPaint &＃61; new Paint(color_ffb93E);textPaint &＃61; new TextPaint();textPaint.setColor(color_999999);textPaint.setTextSize(textsize);}public static int dp2px(Context context, float dpVal) {return (int) TypedValue.applyDimension(1, dpVal, context.getResources().getDisplayMetrics());}private float getTextH(TextPaint pFont, String text) {Rect rect &＃61; new Rect();pFont.getTextBounds(text, 0, text.length(), rect);return rect.height();}private float getTextW(TextPaint pFont, String text) {return pFont.measureText(text);}public int getStep_number() {return step_number;}public void next() {if (step_number < step_array_ids_strings.length - 1) {this.step_number&＃43;&＃43;;if (null !&＃61; stepListener) {stepListener.step(step_number);}if (step_number &＃61;&＃61; step_array_ids_strings.length - 1)if (null !&＃61; stepListener) {stepListener.complete();}} else {if (null !&＃61; stepListener) {stepListener.complete();}}invalidate();}&＃64;Overridepublic void draw(Canvas canvas) {super.draw(canvas);float width &＃61; fatherRectF.width();float height &＃61; fatherRectF.height();int length &＃61; step_array_ids_strings.length;float delta/*大球间隙*/ &＃61; (width - padding * 2/*边距*/ - dotmaxboard - 2 * dotboard) / (length - 1);int mindotSize &＃61; 3;float deltamin &＃61; (delta - padding /*边距*/ - dotminwidth * mindotSize) / mindotSize;float y &＃61; height / 2f - dotmaxboard / 2f;canvas.save();canvas.translate(padding &＃43; dotmaxboard / 2 &＃43; dotboard, 0);for (int i &＃61; 0; i < length; i&＃43;&＃43;) {if (i <&＃61; step_number) {//外环dotPaint.setColor(color_4DFFB93E);canvas.drawCircle(delta * i, y, dotmaxboard / 2f &＃43; dotboard, dotPaint);//内环dotPaint.setColor(color_ffb93E);canvas.drawCircle(delta * i, y, dotmaxboard / 2f, dotPaint);//大环文字textPaint.setColor(color_ffb93E);String name &＃61; step_array_ids_strings[i];float textW &＃61; getTextW(textPaint, name);float textH &＃61; getTextH(textPaint, name);canvas.drawText(name, delta * i - textW / 2f, y &＃43; textH &＃43; padding / 2f, textPaint);} else {//外环dotPaint.setColor(color_999999);canvas.drawCircle(delta * i, y, dotmaxboard / 2f &＃43; dotboard, dotPaint);//内环dotPaint.setColor(color_666666);canvas.drawCircle(delta * i, y, dotmaxboard / 2f, dotPaint);//大环文字textPaint.setColor(color_999999);String name &＃61; step_array_ids_strings[i];float textW &＃61; getTextW(textPaint, name);float textH &＃61; getTextH(textPaint, name);canvas.drawText(name, delta * i - textW / 2f, y &＃43; textH &＃43; padding / 2f, textPaint);}}for (int i &＃61; 0; i < length - 1; i&＃43;&＃43;) {if (i < step_number) {dotPaint.setColor(color_ffb93E);} else {dotPaint.setColor(color_666666);}//环间 小点for (int j &＃61; 1; j <&＃61; mindotSize; j&＃43;&＃43;) {canvas.drawCircle(padding / 2f &＃43; delta * i &＃43; deltamin * j, y, dotminwidth / 2f, dotPaint);}}canvas.restore();}&＃64;Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthMode &＃61; MeasureSpec.getMode(widthMeasureSpec);int heightMode &＃61; MeasureSpec.getMode(heightMeasureSpec);int widthSize &＃61; MeasureSpec.getSize(widthMeasureSpec);int heightSize &＃61; MeasureSpec.getSize(heightMeasureSpec);if (heightMode &＃61;&＃61; MeasureSpec.EXACTLY) {fatherHeight &＃61; heightSize;}if (widthMode &＃61;&＃61; MeasureSpec.EXACTLY) {fatherWidth &＃61; widthSize;}fatherRectF &＃61; new RectF(0, 0, fatherWidth, fatherHeight);Log.d("ssss", "heightMode " &＃43; heightMode);Log.d("ssss", "widthMode " &＃43; widthMode);Log.d("ssss", "widthSize " &＃43; widthSize);Log.d("ssss", "heightSize " &＃43; heightSize);setMeasuredDimension(widthSize, heightSize);}
}