Android自定义View示例（一）直接继承View

本文首先会介绍最简单的自定义View的实现，即直接继承View；然后逐渐完善控件，完善的目的就是为了学习如何解决Android View的工作原理（三）自定义View中提到的注意事项，例如支持wrap_content模式、考虑padding属性；此外我们还要对外提供自定义属性。

public class CircleView extends View {

    private int height;
    private int width;

    private Paint defaultPaint;

    public CircleView(Context context) {
        this(context, null);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefaultPaint();
    }

    private void initDefaultPaint() {
        defaultPaint = new Paint();
        defaultPaint.setStyle(Paint.Style.FILL);
        defaultPaint.setColor(Color.RED);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
        width = w;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //转换坐标系,把坐标原点移到屏幕中间位置
        canvas.translate(width / 2, height / 2);
        int radius = Math.min(width, height) / 2;
        canvas.drawCircle(0, 0, radius/2, defaultPaint);

    }
}

上面的代码很简单，只是对坐标进行了简单的变换，然后调用canvas.drawCircle在中央绘制一个红色的实心圆，接下来我们就可以在布局中使用CircleView。

<test.android.com.testapp.view.CircleView
    android:id="@+id/circleview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

运行程序后效果如下图所示：


实心圆

正如上节的注意事项提到的：wrap_content属性确实达到了match_parent属性的效果，因此我们需要重写View的onMeasure方法，在使用wrap_content的时候给View设置默认宽/高，添加代码如下：

private int defaultWidth = 500;
private int defaultHeight = 500;

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(defaultWidth, defaultHeight);
    } else if (widthMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(defaultWidth, heightSize);
    } else if (heightMode == MeasureSpec.AT_MOST) {
        setMeasuredDimension(widthSize, defaultHeight);
    }
}

再次运行程序后效果如下图所示：


支持wrap_content

根据运行结果我们可以看到，View在使用wrap_content的时候达到了我们所预期的效果。

我们继续调整CircleView的布局参数，设置一个20dp的padding属性。

<test.android.com.testapp.view.CircleView
    android:id="@+id/circleview"
    android:paddingTop="20dp"
    android:paddingLeft="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

运行之后发现padding没有生效，需要自己处理，再次印证了前面提到的结论。我们需要对onDraw方法做一些调整，圆心坐标和半径都需要考虑View四周的padding，从而做相应的调整：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //转换坐标系,把坐标原点移到屏幕中间位置
    canvas.translate(width / 2, height / 2);
    int paddingLeft = getPaddingLeft();
    int paddingRight = getPaddingRight();
    int paddingTop = getPaddingTop();
    int paddingBottom = getPaddingBottom();
    int radius = Math.min(width - paddingLeft - paddingRight, height - paddingTop - paddingBottom) / 2;

    canvas.drawCircle(paddingLeft - paddingRight, paddingTop - paddingBottom, radius / 2, defaultPaint);
}

再次运行程序后效果如下图所示：


支持padding

至此，布局中的wrap_content和padding都生效了。为了让View更容易使用，我们还需要为它提供自定义属性，方便用户快速地定义View的基本样式，接下来以修改实心圆的颜色属性为例介绍View的自定义属性。

第一步：在values目录下创建attrs.xml文件，声明自定义View的自定义属性名称，具体内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleView">
        <attr name="solidColor" format="color"/>
    </declare-styleable>
</resources>

我们定义了一个填充颜色属性，名称是solidColor，格式是color，自定义属性还有许多其他的格式，例如reference是指资源id、dimension是指尺寸、还有一些基本数据类型格式。

第二步：在View的构造方法中解析自定义属性，并根据属性值做出相应处理，代码调整部分如下：

自定义View

……
public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
    solidColor = typedArray.getColor(R.styleable.CircleView_solidColor, Color.RED);
    typedArray.recycle();
    initDefaultPaint();
}

private void initDefaultPaint() {
    defaultPaint = new Paint();
    defaultPaint.setStyle(Paint.Style.FILL);
    defaultPaint.setColor(solidColor);
}

第三步：在布局文件中使用自定义属性：

<test.android.com.testapp.view.CircleView
    android:id="@+id/circleview"
    android:paddingTop="20dp"
    android:paddingLeft="20dp"
    app:solidColor="#000000"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

运行后效果如下所示：


自定义颜色属性

很显然CircleView的自定义属性app:solidColor已经生效了，现在CircleView已经是一个比较规范的自定义View了。下面贴出CircleView的完整代码：

public class CircleView extends View {

    //圆填充颜色
    private int solidColor;

    private int height;
    private int width;

    private Paint defaultPaint;
    private int defaultWidth = 500;
    private int defaultHeight = 500;

    public CircleView(Context context) {
        this(context, null);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //解析自定义属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
        solidColor = typedArray.getColor(R.styleable.CircleView_solidColor, Color.RED);
        typedArray.recycle();
        initDefaultPaint();
    }

    private void initDefaultPaint() {
        defaultPaint = new Paint();
        defaultPaint.setStyle(Paint.Style.FILL);
        defaultPaint.setColor(solidColor);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
        width = w;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //支持wrap_content
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(defaultWidth, defaultHeight);
        } else if (widthMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(defaultWidth, heightSize);
        } else if (heightMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSize, defaultHeight);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //转换坐标系,把坐标原点移到屏幕中间位置
        canvas.translate(width / 2, height / 2);
        //支持padding
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int radius = Math.min(width - paddingLeft - paddingRight, height - paddingTop - paddingBottom) / 2;

        canvas.drawCircle(paddingLeft - paddingRight, paddingTop - paddingBottom, radius / 2, defaultPaint);

    }
}

参考

《Android开发艺术探索》

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335