自定义view 验证码 密码输入框 edittext

这是正常状态下
1.png

这是文字模式下


2.png

这是密码模式1
3.png

这是密码模式2


4.png

输入位数可调节
5.png

因为要保持正方形 所以 高度即为item的宽度 默认居中.
当高度达到一定程度 固定数量下的item大小不再变化
具体可自己修改
样式参考了这位兄弟 https://blog.csdn.net/qq_33553515/article/details/73344155
逻辑参考了这个兄弟 https://www.jb51.net/article/136258.htm

    <com.xxx.xxx.xxx.InputMessageCodeView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@null"
        app:isOval="false"
        app:isPassword="false"
        app:itemNumber="6"
        app:layout_constraintTop_toTopOf="parent"/>
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.v7.widget.AppCompatEditText;
import android.text.InputFilter;
import android.text.InputType;
import android.util.AttributeSet;
import android.util.TypedValue;

import com.jack.mysnake_demo.R;

/**
 * Class for: 输入验证码的view
 * Created by   jack.马
 * Date: 2018/9/10
 * Time: 16:03
 */
public class InputMessageCodeView extends AppCompatEditText {


    private Paint mPaintBg;//画圆角矩形的背景
    private Paint mPaintStroke;//画圆角矩形的边框
    private Paint mPaintText;//画字 非密码框的时候

    private int mItemWidth = 0;//每个item的宽度

    private int mInterval = dp2px(5);//每个item的间隔大小  px

    private int mStrokeSize = dp2px(1); //边框大小 也是上下边距 px

    private int mitemSize = 6;//字数的个数

    private boolean mIsPassWordMode = false;//是否是密码模式 是  则使用圆点
    private int mPasswordRadius = dp2px(8); //密码的半径 px
    private boolean mIsOvalMode = false;//是否使用圆点  默认为使用*字符  只有密码模式下有效


    private int mBaseLineY = 0;//文字的y下笔点

    private float mBeginX = 0;//开始画的坐标x
    private int mBeginY = 0;//开始画的坐标y


    //颜色
    private int mBgColor = Color.parseColor("#FFF0EAEC");
    private int mUnSelectColor = Color.parseColor("#FFC3C1C2");
    private int mSelectColor = Color.parseColor("#FF65A1DD");
    private int mTextColor = Color.parseColor("#FF413F40");

    public InputMessageCodeView(Context context) {
        this(context, null);
    }

    public InputMessageCodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setMinHeight(dp2px(35)); //最小35dp
        setInputType(InputType.TYPE_CLASS_NUMBER);//默认只能输入数字
        initAttr(context, attrs);

        initPaint();

        setFilters(new InputFilter[]{new InputFilter.LengthFilter(mitemSize)});

        // 不显示光标
        setCursorVisible(false);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        mItemWidth = getHeight() - mStrokeSize * 2; //宽度等于高度减去上下边距

        if (mItemWidth * mitemSize > getWidth()) {//当item个数*宽度 ,大于view的宽度的时候 重新设置item宽度保证完整显示
            mItemWidth = getWidth() / mitemSize - mInterval * 3;
        }

        float a = mItemWidth * mitemSize; //每一个输入框的宽度
        float b = mInterval * (mitemSize + 1); //所有框的间距和  数量+1
        float abw = getWidth() - (a + b); //剩余可用宽度
        mBeginX = abw / 2 + mInterval;//开始画的位置,加上第一个间距

        mBeginY = getHeight() / 2 - mItemWidth / 2;
        // 绘制背景矩形 和边框
        drawOutBg(canvas);
//        // 绘制输入时的变化
        drawInput(canvas);
    }


    /**
     * 初始化属性
     */
    private void initAttr(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.input_message_View);

        mitemSize = array.getInt(R.styleable.input_message_View_itemNumber, 6);//默认可输入6个
        mIsPassWordMode = array.getBoolean(R.styleable.input_message_View_isPassword, false); //是否密码模式
        mIsOvalMode = array.getBoolean(R.styleable.input_message_View_isOval, false);
        //颜色设置
        mUnSelectColor = array.getColor(R.styleable.input_message_View_unSelectStrokeColor, mUnSelectColor);//未输入颜色
        mSelectColor = array.getColor(R.styleable.input_message_View_unSelectStrokeColor, mSelectColor);//有输入的颜色
        mTextColor = array.getColor(R.styleable.input_message_View_text_Color, mTextColor);//文字的颜色
        mBgColor = array.getColor(R.styleable.input_message_View_itemBgColor, mBgColor);//item的背景色


        array.recycle();
    }


    /**
     * 初始化画笔
     */
    private void initPaint() {
        //设置背景色画笔 灰色
        mPaintBg = new Paint();
        mPaintBg.setStyle(Paint.Style.FILL);//铺满
        mPaintBg.setColor(mBgColor);
        mPaintBg.setAntiAlias(true);
        mPaintBg.setDither(true);

        //边框色画笔  没输入是灰色 输入是淡蓝色
        mPaintStroke = new Paint();
        mPaintStroke.setStyle(Paint.Style.STROKE);//铺满
        mPaintStroke.setStrokeWidth(mStrokeSize);//边框大小
        mPaintStroke.setColor(mUnSelectColor);
        mPaintStroke.setAntiAlias(true);
        mPaintStroke.setDither(true);


        //文字画笔
        mPaintText = new Paint();
        mPaintText.setStyle(Paint.Style.FILL);//铺满
        mPaintText.setColor(mTextColor);
        mPaintText.setAntiAlias(true);
        mPaintText.setDither(true);
        mPaintText.setTextSize(dp2px(mIsPassWordMode ? 25 : 20));

        //该方法即为设置基线上那个点究竟是left,center,还是right  这里我设置为center
        mPaintText.setTextAlign(Paint.Align.CENTER);
    }


    /**
     * 绘制背景矩形 和边框
     */
    private void drawOutBg(Canvas canvas) {

        mPaintStroke.setColor(Color.GRAY);

        int top = mBeginY;
        int bottom = top + mItemWidth;


        for (int i = 0; i < mitemSize; i++) {
            float left = i == 0 ? mBeginX : mItemWidth * i + mInterval * i + mBeginX;
            float right = left + mItemWidth;
            RectF rect_bg = new RectF(left, top, right, bottom);// 设置个新的长方形
            canvas.drawRoundRect(rect_bg, 10, 10, mPaintBg);//第二个参数是x半径,第三个参数是y半径

            canvas.drawRoundRect(rect_bg, 10, 10, mPaintStroke);//第二个参数是x半径,第三个参数是y半径
        }

    }


    /**
     * 输入时的变化
     *
     * @param canvas
     */
    private void drawInput(Canvas canvas) {

        int passwordLength = getText().length();

        //获取Y轴基准 用于文字居中
        Paint.FontMetrics fontMetrics = mPaintText.getFontMetrics();
        float text_top = fontMetrics.top;//为基线到字体上边框的距离,即上图中的top
        float text_bottom = fontMetrics.bottom;//为基线到字体下边框的距离,即上图中的bottom
        mBaseLineY = (int) (getHeight() / 2 - text_top / 2 - text_bottom / 2);//基线中间点的y轴计算公式

        //画文字
        for (int i = 0; i < passwordLength; i++) {
            float x = i == 0 ? mBeginX : mItemWidth * i + mInterval * i + mBeginX;
            //如果不是密码模式
            if (!mIsPassWordMode) {
                canvas.drawText(String.valueOf(getText().charAt(i)), x + mItemWidth / 2, mBaseLineY, mPaintText);
                continue;
            }


            //如果是密码模式
            if (mIsOvalMode)
                canvas.drawCircle(x + mItemWidth / 2, getHeight() / 2, mPasswordRadius, mPaintText);
            else
                canvas.drawText("*", x + mItemWidth / 2, mBaseLineY, mPaintText);

        }

        //画边框
        int top = mBeginY;
        int bottom = top + mItemWidth;
        for (int i = 0; i < mitemSize; i++) {
            mPaintStroke.setColor(i < passwordLength ? mSelectColor : mUnSelectColor);
            float left = i == 0 ? mBeginX : mItemWidth * i + mInterval * i + mBeginX;
            float right = left + mItemWidth;
            RectF rect_bg = new RectF(left, top, right, bottom);// 设置个新的长方形
            canvas.drawRoundRect(rect_bg, 10, 10, mPaintStroke);//第二个参数是x半径,第三个参数是y半径
        }

    }

    /**
     * dp 转 px
     */
    private int dp2px(int dip) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dip, getResources().getDisplayMetrics());
    }

}

自定义属性

 <declare-styleable name="input_message_View">
        <!-- 密码的个数 -->
        <attr name="itemNumber" format="integer"/>
        <!-- 是否是密码模式 -->
        <attr name="isPassword" format="boolean"/>
        <!-- 未选中的边框颜色-->
        <attr name="unSelectStrokeColor" format="color"/>
        <!-- 选中的边框颜色-->
        <attr name="selectStrokeColor" format="color"/>
        <!-- 文字的颜色-->
        <attr name="text_Color" format="color"/>
        <!--item的背景色-->
        <attr name="itemBgColor" format="color"/>
        <!--是否显示圆点-->
        <attr name="isOval" format="boolean"/>

    </declare-styleable>

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,742评论 24 688
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 23,632评论 1 45
  • 今天我要演讲的题目是:改变 对于我来说,养成一个习惯非常的简单,但是要改变一个习惯,可能会如同登天一样困难,也比如...
    百合花中哥哥阅读 46评论 0 0
  • 今夜怎样过去? 醒来会不会还痛心? 我的软弱会到此为止? 可什么是坚强? 坚强能使人快乐么? 我失意时。 我何时不...
    其田阅读 77评论 0 0
  • 今天听了刘老师的分享,感触颇深。怎样才能赢,要给自己一个逼到绝境的心态,要不断的沟通,要有一个时间的积累,还要有一...
    汇鑫陈家玲阅读 124评论 0 3