Android自定义控件及属性

在开发中，现有的控件并不能完全满足我们的需求，往往需要我们去进行自定义控件的设计。

在这里我们先了解一个属性，attrs中发 format。

format有多种可选值设置：

1. reference：参考某一资源ID。

（1）属性定义：

<declare-styleable name = "名称">

<attr name = "background" format = "reference" />

</declare-styleable>

（2）属性使用：

<ImageView

android:layout_width = "42dip"

android:layout_height = "42dip"

android:background = "@drawable/图片ID"/>

2. color：颜色值

<declare-styleable name = "名称">

<attr name = "textColor" format = "color" />

</declare-styleable>

3. boolean：布尔值

<declare-styleable name = "名称">

<attr name = "focusable" format = "boolean" />

</declare-styleable>

4. dimension：尺寸值。

<declare-styleable name = "名称">

<attr name = "layout_width" format = "dimension" />

</declare-styleable>

5. float：浮点值。

6. integer：整型值。

7. string：字符串

8. fraction：百分数。

9. enum：枚举值

10. flag：位或运算

注意：

属性定义时可以指定多种类型值。

（1）属性定义：

<declare-styleable name = "名称">

<attr name = "background" format = "reference|color" />

</declare-styleable>

（2）属性使用：

<ImageView

android:layout_width = "42dip"

android:layout_height = "42dip"

android:background = "@drawable/图片ID|#00FF00"/>

接下来我们就可以正式进行XML属性的自定义了

一、在res/values/attrs文件中定义属性

<declare-styleable name="PasswordInputView">
        <!--边框圆角值-->
        <attr name="pivBorderRadius" format="dimension"/>
        <!--边框颜色-->
        <attr name="pivBorderColor" format="color|reference"/>
        <!--边框宽度-->
        <attr name="pivBorderWidth" format="dimension"/>
        <!--圆角尺寸-->
        <attr name="pivPasswordRadius" format="dimension"/>
        <!--密码颜色-->
        <attr name="pivPasswordColor" format="color"/>
        <!--密码大小-->
        <attr name="pivPasswordWidth" format="dimension"/>
        <!--密码长度-->
        <attr name="pivPasswordLength" format="integer"/>
        <!--密码文本-->
        <attr name="pivTextSize" format="dimension"/>
        <attr name="pivTextColor" format="color"/>
        <attr name="pivIsPass" format="boolean"/>
    </declare-styleable>

二、定义MyView继承View与自定义属性相关联（在构造方法中关联）

public PasswordInputView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PasswordInputView, 0, 0);
        borderColor = a.getColor(R.styleable.PasswordInputView_pivBorderColor, borderColor);
        borderWidth = a.getDimension(R.styleable.PasswordInputView_pivBorderWidth, borderWidth);
        borderRadius = a.getDimension(R.styleable.PasswordInputView_pivBorderRadius, borderRadius);
        passwordLength = a.getInt(R.styleable.PasswordInputView_pivPasswordLength, passwordLength);
        passwordColor = a.getColor(R.styleable.PasswordInputView_pivPasswordColor, passwordColor);
        passwordWidth = a.getDimension(R.styleable.PasswordInputView_pivPasswordWidth, passwordWidth);
        passwordRadius = a.getDimension(R.styleable.PasswordInputView_pivPasswordRadius, passwordRadius);

        textSize = (int) a.getDimension(R.styleable.PasswordInputView_pivTextSize, textSize);
        textColor = a.getColor(R.styleable.PasswordInputView_pivTextColor, textColor);
        isPass = a.getBoolean(R.styleable.PasswordInputView_pivIsPass, isPass);

        a.recycle();

        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setColor(borderColor);
        passwordPaint.setStrokeWidth(passwordWidth);
        passwordPaint.setStyle(Paint.Style.FILL);
        passwordPaint.setColor(passwordColor);

        InputFilter[] filters = {new InputFilter.LengthFilter(passwordLength)};
        setFilters(filters);
    }

注意：为防止使用时属性值未设置，在初始化时将个属性进行默认值的设定

PasswordInputView的具体代码如下

package com.laobai.view;

import android.annotation.SuppressLint;
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.text.InputFilter;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.widget.EditText;

import com.laobai.R;

import static android.graphics.Paint.ANTI_ALIAS_FLAG;
/**
*改控件为自定义的密码输入框，可设置明文及密码
*/
@SuppressLint("AppCompatCustomView")
public class PasswordInputView extends EditText {

    private static final int defaultContMargin = 5;
    private static final int defaultSplitLineWidth = 3;
    /**
     * 边框颜色
     */
    private int borderColor = 0xFFCCCCCC;
    private float borderWidth = 2;
    private float borderRadius = 0;

    private int passwordLength = 4;
    private int passwordColor = 0xFFCCCCCC;
    private float passwordWidth = 8;
    private float passwordRadius = 3;

    int textSize = 15;
    int textColor = Color.BLACK;

    boolean isPass = true;

    private Paint passwordPaint = new Paint(ANTI_ALIAS_FLAG);
    private Paint borderPaint = new Paint(ANTI_ALIAS_FLAG);

    private int textLength;
    String passText;

    public PasswordInputView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.PasswordInputView, 0, 0);
        borderColor = a.getColor(R.styleable.PasswordInputView_pivBorderColor, borderColor);
        borderWidth = a.getDimension(R.styleable.PasswordInputView_pivBorderWidth, borderWidth);
        borderRadius = a.getDimension(R.styleable.PasswordInputView_pivBorderRadius, borderRadius);
        passwordLength = a.getInt(R.styleable.PasswordInputView_pivPasswordLength, passwordLength);
        passwordColor = a.getColor(R.styleable.PasswordInputView_pivPasswordColor, passwordColor);
        passwordWidth = a.getDimension(R.styleable.PasswordInputView_pivPasswordWidth, passwordWidth);
        passwordRadius = a.getDimension(R.styleable.PasswordInputView_pivPasswordRadius, passwordRadius);

        textSize = (int) a.getDimension(R.styleable.PasswordInputView_pivTextSize, textSize);
        textColor = a.getColor(R.styleable.PasswordInputView_pivTextColor, textColor);
        isPass = a.getBoolean(R.styleable.PasswordInputView_pivIsPass, isPass);

        a.recycle();

        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setColor(borderColor);
        passwordPaint.setStrokeWidth(passwordWidth);
        passwordPaint.setStyle(Paint.Style.FILL);
        passwordPaint.setColor(passwordColor);

        InputFilter[] filters = {new InputFilter.LengthFilter(passwordLength)};
        setFilters(filters);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int width = getWidth();
        int height = getHeight();

        // 外边框
        RectF rect = new RectF(0, 0, width, height);
        borderPaint.setColor(borderColor);
        canvas.drawRoundRect(rect, borderRadius, borderRadius, borderPaint);

        // 内容区
        RectF rectIn = new RectF(rect.left + defaultContMargin, rect.top + defaultContMargin,
                rect.right - defaultContMargin, rect.bottom - defaultContMargin);
        borderPaint.setColor(Color.WHITE);
        canvas.drawRoundRect(rectIn, borderRadius, borderRadius, borderPaint);

        // 分割线
        borderPaint.setColor(borderColor);
        borderPaint.setStrokeWidth(defaultSplitLineWidth);
        for (int i = 1; i < passwordLength; i++) {
            float x = width * i / passwordLength;
            canvas.drawLine(x, 0, x, height, borderPaint);
        }

        float cx, cy = height / 2;
        float half = width / passwordLength / 2;
        if (isPass) {
            // 密码
            for (int i = 0; i < textLength; i++) {
                cx = width * i / passwordLength + half;
                canvas.drawCircle(cx, cy, passwordWidth, passwordPaint);
            }
        } else {
            passwordPaint.setTextSize(textSize);
            passwordPaint.setColor(textColor);
            passwordPaint.setTextAlign(Paint.Align.CENTER);

            Paint.FontMetrics fontMetrics = passwordPaint.getFontMetrics();
            float top = fontMetrics.top;//为基线到字体上边框的距离,即上图中的top
            float bottom = fontMetrics.bottom;//为基线到字体下边框的距离,即上图中的bottom

            int baseLineY = (int) (rect.centerY() - top / 2 - bottom / 2);//基线中间点的y轴计算公式
            if (!TextUtils.isEmpty(passText)) {
                for (int i = 0; i < textLength; i++) {
                    cx = width * i / passwordLength + half;
                    canvas.drawText(String.valueOf(passText.charAt(i)), cx, baseLineY, passwordPaint);
                }
            }
        }
    }

    @Override
    protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
        super.onTextChanged(text, start, lengthBefore, lengthAfter);
        passText = text.toString();
        textLength = passText.length();
        invalidate();
    }

    public int getBorderColor() {
        return borderColor;
    }

    public void setBorderColor(int borderColor) {
        this.borderColor = borderColor;
        borderPaint.setColor(borderColor);
        invalidate();
    }

    public float getBorderWidth() {
        return borderWidth;
    }

    public void setBorderWidth(float borderWidth) {
        this.borderWidth = borderWidth;
        borderPaint.setStrokeWidth(borderWidth);
        invalidate();
    }

    public float getBorderRadius() {
        return borderRadius;
    }

    public void setBorderRadius(float borderRadius) {
        this.borderRadius = borderRadius;
        invalidate();
    }

    public int getPasswordLength() {
        return passwordLength;
    }

    public void setPasswordLength(int passwordLength) {
        this.passwordLength = passwordLength;
        invalidate();
    }

    public int getPasswordColor() {
        return passwordColor;
    }

    public void setPasswordColor(int passwordColor) {
        this.passwordColor = passwordColor;
        passwordPaint.setColor(passwordColor);
        invalidate();
    }

    public float getPasswordWidth() {
        return passwordWidth;
    }

    public void setPasswordWidth(float passwordWidth) {
        this.passwordWidth = passwordWidth;
        passwordPaint.setStrokeWidth(passwordWidth);
        invalidate();
    }

    public float getPasswordRadius() {
        return passwordRadius;
    }

    public void setPasswordRadius(float passwordRadius) {
        this.passwordRadius = passwordRadius;
        invalidate();
    }

    public void setIsPass(boolean isPass){
        this.isPass = isPass;
        invalidate();
    }
    public void setTextSize(int textSize){
        this.textSize = textSize;
        invalidate();
    }
    public void setTextColor(int textColor){
        this.textColor = textColor;
        invalidate();
    }
}

三、XML布局文件中的应用

要使用自定义属性必须加上前缀：xmlns:app="http://schemas.android.com/apk/res-auto"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/backcolor_white"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <com.view.PasswordInputView
        android:id="@+id/code_edit"
        android:layout_width="270dp"
        android:layout_height="45dp"
        android:layout_marginTop="10dp"
        android:inputType="number"
        android:lines="1"
        android:visibility="gone"
        app:pivBorderColor="#dddddd"
        app:pivBorderWidth="0.5dp"
        app:pivIsPass="false"
        app:pivPasswordLength="6"
        app:pivPasswordWidth="10dp"
        app:pivTextColor="#333333"
        app:pivTextSize="@dimen/sp_text_16"
        tools:text="125635"
        tools:visibility="visible" />

</LinearLayout>