自定义View系列（六）

最新推荐文章于 2024-11-13 18:49:56 发布

原创最新推荐文章于 2024-11-13 18:49:56 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#自定义View #实现数字提示功能的ImageView

Android开发总结专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一种自定义实现数字提示功能的ImageView方法。通过创建NumberHintView类继承ImageView，并在其中定义绘制圆形背景和数字的方法，实现了数字提示效果。文章详细介绍了setNum方法和onDraw方法的具体实现。

自定义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方法，分别画圆和写字。