[Android]一个简单的支付密码输入框(半成品)

仿造一个钱包密码输入框

xiaomi.gif
demo.gif

08-24 04:07:45.217 4059-4059/com.jjkopen.demo E/---------: 1
08-24 04:07:45.532 4059-4059/com.jjkopen.demo E/---------: 12
08-24 04:07:45.833 4059-4059/com.jjkopen.demo E/---------: 125
08-24 04:07:46.111 4059-4059/com.jjkopen.demo E/---------: 1256
08-24 04:07:46.376 4059-4059/com.jjkopen.demo E/---------: 12563
08-24 04:07:46.799 4059-4059/com.jjkopen.demo E/---------: 125635
08-24 04:07:47.838 4059-4059/com.jjkopen.demo E/---------: 12563
08-24 04:07:48.026 4059-4059/com.jjkopen.demo E/---------: 1256
08-24 04:07:48.245 4059-4059/com.jjkopen.demo E/---------: 125
08-24 04:07:48.560 4059-4059/com.jjkopen.demo E/---------: 12
08-24 04:07:48.771 4059-4059/com.jjkopen.demo E/---------: 1

demo为实现基本功能的半成品,根据需求自己添加/完善功能

/**
 * 密码输入框
 *
 * 关于输入完后触发,自己加接口或者enentbus发送
 */

@SuppressLint("AppCompatCustomView")
public class PayEditText extends EditText {
    private Context context;
    private int mCount, index; //总数 当前输入数
    private int width, height;
    private String mText; //输入内容
    private Paint paint, paint2; //默认画笔 白色圆点画笔

    public PayEditText(Context context) {
        super(context);
    }

    public PayEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;

        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PayEditText, 0, 0);
        int n = array.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.PayEditText_count:
                    mCount = array.getInt(attr, 6);
                    break;
            }
        }
        array.recycle();
        setBackgroundResource(R.drawable.shape_payedittext_background);
        setCursorVisible(false);

        paint = new Paint();
        paint.setAntiAlias(true);//设置抗锯齿

        paint2 = new Paint();
        paint2.setAntiAlias(true);//设置抗锯齿
        paint2.setStyle(Paint.Style.FILL);
        paint2.setColor(Color.WHITE);

        this.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                setData(charSequence.toString().length(), charSequence.toString());
                Log.e("---------", charSequence.toString());
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = measureDimension(widthMeasureSpec, "w");
        height = measureDimension(heightMeasureSpec, "h");

        Log.e("--------", "width---" + width + ":height---" + height);
    }

    private int measureDimension(int measureSpec, String tag) {
        int result, defaultValue;
        if (tag.equals("w")) {
            defaultValue = dp2px(context, 50f * mCount);
        } else {
            defaultValue = dp2px(context, 50f);
        }
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {  //match or 具体值
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {  //wrap
            result = Math.min(defaultValue, specSize);
        } else {
            result = defaultValue;
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for (int i = 0; i < mCount; i++) {
            if (i > 0 && i < mCount) {
                float w = width * i * 1f / mCount;
                canvas.drawLine(w, 0, w, height, paint);
            }
        }

        float w = width * 1f / mCount;
        if (index <= 0) {
            canvas.drawCircle(w / 2, height / 2, 10, paint2);
        } else if (index <= mCount) {
            for (int i = 1; i <= index; i++) {
                canvas.drawCircle(w / 2 + w * (i - 1), height / 2, 10, paint);
            }
        } else {
        }
    }

    public void setData(int index, String data) {
        this.index = index;
        this.mText = data;
        invalidate();
    }

    public void setCount(int count) {
        this.mCount = count;
        invalidate();
    }

    public String getData() {
        return mText;
    }

    public int dp2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

}

shape画的倒角边框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="5dp" />
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray" />
</shape>

增加的最大输入数量参数

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PayEditText">
        <attr name="count" format="integer" />
    </declare-styleable>
</resources>

xml

<com.jjkopen.demo.widget.PayEditText
            android:id="@+id/pay"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:digits="0123456789"
            android:inputType="number"
            android:maxLength="6"
            android:textSize="0dp"
            app:count="6" />

因为没做判断,maxlength必须加上,不然超出位数会出BUG,有需要自己完善

---

    private OnFinishListener listener;
    public interface OnFinishListener {
        void onFinish(boolean isfinish);
    }
    public void setOnFinishListener(OnFinishListener listener) {
        this.listener = listener;
    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        setData(charSequence.toString().length(), charSequence.toString());
        if (charSequence.toString().length() >= mCount) {
            listener.onFinish(true);
        } else {
            listener.onFinish(false);
        }
        Log.e("---------", charSequence.toString());
    }

    mPayEdt.setOnFinishListener(isfinish -> mBtn.setEnabled(isfinish));