美文网首页
自定义view 验证码 密码输入框 edittext

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

作者: 丶完美 | 来源:发表于2018-09-10 19:20 被阅读0次
    这是正常状态下 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>
    

    相关文章

      网友评论

          本文标题:自定义view 验证码 密码输入框 edittext

          本文链接:https://www.haomeiwen.com/subject/tjkegftx.html