Android自定义View（一）：基础篇

前言

在平常的开发工作中，由于各种特殊业务的需求，以及UI的各种脑洞设计，在这种场景下，Android中的基本控件就有些力不从心了。由此，掌握自定义View已慢慢变成大家必备的技能之一了。今天，就带大家进入自定义View的基础篇。

下边就是我们今天要实现的简单自定义View的效果图：

其中，蓝色的为CustomView背景色，中间红色区域为CustomView的内容显示区域，我们暂称为ContentView。

概括

自定义View的基本步骤如下：

1、继承View类或View的子类
2、实现自定义View属性
3、重写onMeasure()方法
4、重写onDraw()方法

小注：以上步骤2、3、4可以根据自己的需求定制，非必需实现步骤。

具体实现

1. 继承View类或View的子类

这一步比较简单，只需要实现一个继承自View或View子类的类,并实现构造方法即可。
若我们要完全自己定义View控件，可如下操作：


public class CustomView extends View {

    public CustomView(Context context) {
        this(context, null);
    }
    
    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        
        //...其它初始化操作    
    }
}

此外，如果我们是在View子类的基础上进行自定义控件，类似操作如下：


public class CustomImageView extends ImageView {

    public CustomImageView(Context context) {
        this(context, null);
    }
    
    public CustomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        
        //...其它初始化操作    
    }
}

2. 实现自定义View属性

①. 在项目res/values/下新建attrs.xml(当然其它名称也是可以的)，在其中声明相关属性如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!--自定义View属性-->
    <declare-styleable name="CustomView">
        <attr name="contentWidth" format="dimension" />
        <attr name="contentHeight" format="dimension" />
        <attr name="contentColor" format="color" />
        <attr name="gravity" format="enum">
            <enum name="left" value="0" />
            <enum name="right" value="1" />
            <enum name="center" value="2" />
        </attr>
    </declare-styleable>

</resources>

其中，attar的格式即单位有：dimension(尺寸)、boolean(布尔)、color(颜色)、enum(枚举)、flag（位或）、float（浮点）、fraction(百分比)、integer(整型)、reference(资源引用)、string(字符串)。

②. 在布局文件res/layout/activity_mian.xml的用法如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:shorr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <cn.shorr.customview.CustomView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/holo_blue_light"
        shorr:contentColor="@android:color/holo_red_light"
        shorr:contentHeight="200dp"
        shorr:contentWidth="200dp"
        shorr:gravity="center" />

</RelativeLayout>

注意：引用自定义属性，需要声明命名空间：xmlns:shorr="http://schemas.android.com/apk/res-auto"

③. 然后，在CustomView的构造方法中初始化相关自定义属性：

/**
 * 初始化View相关自定义属性
 *
 * @param context
 * @param attrs
 */
private void initFromAttributes(Context context, AttributeSet attrs) {
    //获取相关View属性
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, 0, 0);

    try {
        mContentWidth = a.getDimensionPixelSize(R.styleable.CustomView_contentWidth, 0);
        mContentHeight = a.getDimensionPixelSize(R.styleable.CustomView_contentHeight, 0);
        mContentColor = a.getColor(R.styleable.CustomView_contentColor, Color.TRANSPARENT);
        mGravity = a.getInteger(R.styleable.CustomView_gravity, -1);
    } finally {
        //回收TypedArray
        a.recycle();
    }
}

注意：TypedArray对象是一个共享资源，使用后必须调用recycle()回收。目的是为了缓存资源，这样每次调用TypedArray的时候都不再需要重新分配内存，方便了其它地方的复用。

3. 重写onMeasure()方法

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //获取宽高的尺寸
    int width = getMeasureSize(MeasureOrientation.WIDTH, mContentWidth, widthMeasureSpec);
    int height = getMeasureSize(MeasureOrientation.HEIGHT, mContentHeight, heightMeasureSpec);
    //设置测量尺寸
    setMeasuredDimension(width, height);
}

/**
 * 得到宽度测量的尺寸大小
 *
 * @param orientation 测量的方向（宽高）
 * @param defalutSize 默认尺寸大小
 * @param measureSpec 测量的规则
 * @return 返回测量的尺寸
 */
private int getMeasureSize(MeasureOrientation orientation, int defalutSize, int measureSpec) {
    int result = defalutSize;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);

    switch (specMode) {
        case MeasureSpec.UNSPECIFIED:  //无限制大小
            result = defalutSize;
            break;
        case MeasureSpec.AT_MOST:  //对应wrap_content
            //如果设置了gravity属性，则忽略padding属性
            if (mGravity != -1) {
                result = defalutSize;
                break;
            }
            if (orientation == MeasureOrientation.WIDTH) {
                //测量的宽
                result = getPaddingLeft() + defalutSize + getPaddingRight();
            } else if (orientation == MeasureOrientation.HEIGHT) {
                //测量的高
                result = getPaddingTop() + defalutSize + getPaddingBottom();
            }
            break;
        case MeasureSpec.EXACTLY:  //对应match_parent or dp/px
            result = specSize;
            break;
    }
    return result;
}

在getMeasureSize()方法中，我们通过measureSpec得到当前测量的大小和模式。并通过不同的模式我们计算得到了最终的CustomeView的尺寸大小。

SpecMode有三种类型：

UNSPECIFIED：父容器对View没有任何限制。多用于系统内部的测量中。
AT_MOST：父容器给View的最大可用尺寸。它对应于View的wrap_content属性。
EXACTLY：父容器给View的具体可用尺寸。它对应于View的match_parent或dp/px(具体的尺寸)。

注意：在AT_MOST模式，即wrap_content属性下，要处理好View的padding属性。

此外，MeasureOrientation为自定义的枚举，为了区分记录View测量的方向（宽、高）：

private enum MeasureOrientation {  //View测量方向（宽、高）的枚举
    WIDTH, HEIGHT
}

最后，得到测量后的值后，我们需要通过setMeasuredDimension(width, height);来为CustomeView设置测量值。

4. 重写onDraw()方法

@Override
protected void onDraw(Canvas canvas) {
    //获取测量后的宽高
    int width = getWidth();
    int height = getHeight();
    //获取View的Padding
    int paddingLeft = getPaddingLeft();
    int paddingRight = getPaddingRight();
    int paddingTop = getPaddingTop();
    int paddingBottom = getPaddingBottom();

    //设置ContentView的Rect
    Rect rect = null;
    if (mGravity == -1) {  //如果没有设置gravity属性，设置padding属性
        rect = new Rect(paddingLeft, paddingTop, width - paddingRight, height - paddingBottom);
    } else {  //如果设置gravity属性，不设置padding属性
        rect = getContentRect(width, height, mGravity);
    }
    //绘制ContentView
    canvas.drawRect(rect, mPaint);
}

在onDraw()方法中，我们首先获取了CustomView的宽高、padding值，并根据有无设置gravity属性来分别处理了ContentView要显示矩形范围。最后，通过drawRect()方法绘制出了要显示的ContentView。

效果展示

设置padding属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:shorr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <cn.shorr.customview.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_blue_light"
        android:paddingBottom="30dp"
        android:paddingLeft="20dp"
        android:paddingRight="5dp"
        android:paddingTop="10dp"
        shorr:contentColor="@android:color/holo_red_light"
        shorr:contentHeight="200dp"
        shorr:contentWidth="200dp" />

</RelativeLayout>

效果图：

设置gravity属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:shorr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <cn.shorr.customview.CustomView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/holo_blue_light"
        shorr:contentColor="@android:color/holo_red_light"
        shorr:contentHeight="200dp"
        shorr:contentWidth="200dp"
        shorr:gravity="center" />

</RelativeLayout>

效果图：

CustomView完整代码

package cn.shorr.customview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;

/**
 * 自定义简易View
 * Created by Shorr on 2016/11/20.
 */

public class CustomView extends View {

    /*自定义属性*/
    private int mContentWidth;  //默认宽度,单位px
    private int mContentHeight;  //默认高度,单位px
    private int mContentColor;  //View的颜色
    private int mGravity;  //View的Gravity属性

    private enum MeasureOrientation {  //View测量方向（宽、高）的枚举
        WIDTH, HEIGHT
    }

    private Paint mPaint;  //定义一个画笔

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

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

        //初始化相关自定义属性
        initFromAttributes(context, attrs);
        //初始化View
        initView();
    }

    /**
     * 初始化View相关自定义属性
     *
     * @param context
     * @param attrs
     */
    private void initFromAttributes(Context context, AttributeSet attrs) {
        //获取相关View属性
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, 0, 0);

        try {
            mContentWidth = a.getDimensionPixelSize(R.styleable.CustomView_contentWidth, 0);
            mContentHeight = a.getDimensionPixelSize(R.styleable.CustomView_contentHeight, 0);
            mContentColor = a.getColor(R.styleable.CustomView_contentColor, Color.TRANSPARENT);
            mGravity = a.getInteger(R.styleable.CustomView_gravity, -1);
        } finally {
            //回收TypedArray
            a.recycle();
        }
    }

    /**
     * 初始化View操作
     */
    private void initView() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //设置画笔颜色
        mPaint.setColor(mContentColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取宽高的尺寸
        int width = getMeasureSize(MeasureOrientation.WIDTH, mContentWidth, widthMeasureSpec);
        int height = getMeasureSize(MeasureOrientation.HEIGHT, mContentHeight, heightMeasureSpec);
        //设置测量尺寸
        setMeasuredDimension(width, height);
    }

    /**
     * 得到宽度测量的尺寸大小
     *
     * @param orientation 测量的方向（宽高）
     * @param defalutSize 默认尺寸大小
     * @param measureSpec 测量的规则
     * @return 返回测量的尺寸
     */
    private int getMeasureSize(MeasureOrientation orientation, int defalutSize, int measureSpec) {
        int result = defalutSize;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        switch (specMode) {
            case MeasureSpec.UNSPECIFIED:  //无限制大小
                result = defalutSize;
                break;
            case MeasureSpec.AT_MOST:  //对应wrap_content
                //如果设置了gravity属性，则忽略padding属性
                if (mGravity != -1) {
                    result = defalutSize;
                    break;
                }
                if (orientation == MeasureOrientation.WIDTH) {
                    //测量的宽
                    result = getPaddingLeft() + defalutSize + getPaddingRight();
                } else if (orientation == MeasureOrientation.HEIGHT) {
                    //测量的高
                    result = getPaddingTop() + defalutSize + getPaddingBottom();
                }
                break;
            case MeasureSpec.EXACTLY:  //对应match_parent or dp/px
                result = specSize;
                break;
        }
        return result;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获取测量后的宽高
        int width = getWidth();
        int height = getHeight();
        //获取View的Padding
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();

        //设置ContentView的Rect
        Rect rect = null;
        if (mGravity == -1) {  //如果没有设置gravity属性，设置padding属性
            rect = new Rect(paddingLeft, paddingTop, width - paddingRight, height - paddingBottom);
        } else {  //如果设置gravity属性，不设置padding属性
            rect = getContentRect(width, height, mGravity);
        }
        //绘制ContentView
        canvas.drawRect(rect, mPaint);
    }

    /**
     * 获取ContentView的Rect
     *
     * @param width   View的Width
     * @param height  View的Height
     * @param gravity View的Gravity
     * @return
     */
    private Rect getContentRect(int width, int height, int gravity) {
        Rect rect = null;
        switch (gravity) {
            case 0:  //left
                rect = new Rect(0, 0,
                        width - (width - mContentWidth), height - (height - mContentHeight));
                break;
            case 1:  //right
                rect = new Rect(width - mContentWidth, 0,
                        height, height - (height - mContentHeight));
                break;
            case 2:  //center
                rect = new Rect((width - mContentWidth) / 2, (height - mContentHeight) / 2,
                        width - ((width - mContentWidth) / 2), height - ((height - mContentHeight) / 2));
                break;
            default:

                break;
        }

        return rect;
    }

}

结语

今天，主要介绍了要实现一个基础自定义View的步骤，本篇demo只是简单的实现了一个CustomView,具体的实现效果大家可以根据自己的需求进行具体的定制。下一篇，将结合项目具体需求，给大家带来一个自定义View的实例篇，敬请期待~

Demo源码请点击此处下载(https://github.com/shorr/notes_demo/tree/master/CustomView)

最后编辑于：2017.11.20 21:51:34

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