自定義View系列（六）

自定義View實戰之

自定義實現數字提示功能的ImageView

先直接上代碼：

public class NumberHintView extends ImageView {
    private int num = 0;  //要顯示的數量
    private float radius;  //圓圈的半徑
    private float textSize;  //數字的大小
    private int paddingRight;  //右邊內邊距
    private int paddingTop;  //上邊內邊距

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

    public NumberHintView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NumberHintView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    /**
     * 設置顯示的數量
     * @param num
     */
    public void setNum(int num) {
        this.num = num;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (num > 0) {
            radius = getWidth() / 5;  //初始化半徑
            textSize = num < 10 ? radius + 5 : radius;  //初始化字體大小
            paddingRight = getPaddingRight();  //初始化右邊內邊距
            paddingTop = getPaddingTop();  //初始化上邊內邊距
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(getResources().getColor(R.color.red));
            paint.setStyle(Paint.Style.FILL);
            canvas.drawCircle(getWidth() - radius - paddingRight / 2, radius + paddingTop / 2, radius, paint);
            paint.setColor(getResources().getColor(R.color.baseColor2));
            paint.setTextSize(textSize);
            String text;
            if (num <= 99) {
                text = "" + num;
            } else {
                text = "...";
            }
            canvas.drawText(text,
                    num < 10 ? getWidth() - radius - textSize / 4 - paddingRight/2
                            : getWidth() - radius - textSize / 2 - paddingRight/2,
                    radius + textSize / 3 + paddingTop/2,
                    paint);
        }
    }
}

然後在xml文件中引用即可。

現在，我們來結合代碼分析：

第一步：聲明所需屬性。

    private int num = 0;  //要顯示的數量
    private float radius;  //圓圈的半徑
    private float textSize;  //數字的大小
    private int paddingRight;  //右邊內邊距
    private int paddingTop;  //上邊內邊距

第二步：創建setNum方法，如下：

    /**
     * 設置顯示的數量
     * @param num
     */
    public void setNum(int num) {
        this.num = num;
        invalidate();
    }

第三步：在draw方法中實現我們的邏輯。其實主要就是draw方法中的實現了，我們主要就是用到了Canvas類和Paint類，使用到

Canvas類的drawCircle方法、drawText方法，分別畫圓和寫字。