EditText 输入背景框的定制(炒鸡简单的自定义View)

EditText在项目中有不同的需求,输入验证码,或者输入密码的情况,这些需要自定义EditText 的一些背景框例如下面

思路:

    1.隐藏掉EditText 录入的文字

    2.绘确定需要绘制背景框的个数,计算好间距,大小,并绘制背景框

    3.获取到录入的文字,并重新绘制在界面上

代码:

public class BorderEditTextextends AppCompatEditText {

private PaintmPaint;

    private ContextmContext;

    private int count =6;

    private int width =44;//默认单位dp

    private int margin =8;

    private int radius =2;

    public BorderEditText(Context context) {

this(context, null);

    }

public BorderEditText(Context context, AttributeSet attrs) {

super(context, attrs);

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.BorderEditText);

        count = array.getInt(R.styleable.BorderEditText_border_Count, 6);

        width = array.getInt(R.styleable.BorderEditText_border_Width, 44);

        margin = array.getInt(R.styleable.BorderEditText_border_Margin, 8);

        array.recycle();

        mContext = context;

        initView();

    }

private void initView() {

width = AppTools.dp2px(mContext, width);

        margin = AppTools.dp2px(mContext, margin);

        /**

        * 这个可以自定义属性 放在资源文件中设置 懒的加了

        */

        radius = AppTools.dp2px(mContext, 10);

        mPaint =new Paint();

        mPaint.setColor(Color.parseColor("#eeeeee"));

        mPaint.setStrokeWidth(AppTools.dp2px(mContext, 1));

        mPaint.setAntiAlias(true);

        mPaint.setDither(true);

    }

@Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int _width =width *count + AppTools.dp2px(mContext, (count -1) *8 +4);

        super.onMeasure(MeasureSpec.makeMeasureSpec(_width, MeasureSpec.EXACTLY), heightMeasureSpec);

    }

@Override

    protected void onDraw(Canvas canvas) {

mPaint.setStyle(Paint.Style.FILL);

        mPaint.setColor(Color.parseColor("#eeeeee"));

        /**

        * 此处可以自己绘制 想要的效果图

        */

        for (int a =0; a

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

canvas.drawRoundRect(a *width + a *margin, 0, (a +1) *width + a *margin, getMeasuredHeight(), radius, radius, mPaint);

            }else {

canvas.drawRoundRect(new RectF(a *width + a *margin, 0, (a +1) *width + a *margin, getMeasuredHeight()), radius, radius, mPaint);

            }

}

mPaint.setColor(getResources().getColor(R.color.colorNormalIndecator));

        mPaint.setTextSize(getTextSize());

        mPaint.setStyle(Paint.Style.FILL);

        /**

        * 计算文字的宽高

        */

        Rect textRect =new Rect();

        float v =mPaint.measureText("9");

        mPaint.getTextBounds("9", 0, 1, textRect);

        String trim = getText().toString().trim();

        if (!TextUtils.isEmpty(trim)) {

for (int a =0; a < trim.length(); a++) {

canvas.drawText(String.valueOf(trim.charAt(a)), a *width + a *margin +width /2 - v /2, getMeasuredHeight() /2 + textRect.height() /2, mPaint);

            }

}

}

@Override

    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {

super.onTextChanged(text, start, lengthBefore, lengthAfter);

        invalidate();

    }

}

定义的styleable

<declare-styleable name="BorderEditText">

<attr name="border_Count" format="integer"/>

<attr name="border_Width" format="integer"/>

<attr name="border_Margin" format="integer"/>

</declare-styleable>


AppTools 类 中的方法  dp2px

public class AppTools{

public static int dp2px(Context context,int value){

return (int) (context.getResources().getDisplayMetrics().density * value +0.5f);

}

}

使用:

<wedgit.BorderEditText

    android:layout_width="wrap_content"

    android:layout_height="38dp"

    android:background="@null"

    android:inputType="number"

    android:maxLength="6"

    android:textSize="23sp"

    app:border_Width="38" />

到这里就全部完成了.主要是绘制背景框和绘制文字

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容