Android自定义View

自定义View的有好几种分类，可以分成4种：
1.特定的View的子类：Android的API已经为我们提供了不少可以使用的View，如TextView、ImageView、Button等等，但是有时候我们需要在这些基础的View上扩展一些功能，例如在Button里绑定一个TextWatch监测若干个EditText的输入情况时，就是继承Button类，在它的子类进行扩展了。这种自定义View实现难度低，不需要自己支持wrap_content和padding等属性，非常常见。
2.特定的ViewGroup子类：Android的API也为我们提供了不少可以使用的ViewGroup，如LinearLayout、RelativeLayout等等，但是有时候我们想把实现同一个需求若干个View组合起来，就可以用这种方式的自定义View来打包了。这种自定义View的实现难度低，也不需要自己处理ViewGroup对每个子View的测量和布局，非常常见。
3.View的子类：View是一个很基础的父类，有一个空的onDraw()方法，继承它首先就是要实现这个方法，在里面利用Canvas画出自己想要的内容，不然View是不会显示任何东西的，使用这种自定义View主要用于实现一些非常规的图形效果，例如一些动态变化的View等等。这种自定义View的实现难度比较高，除了需要自己重写onDraw()，还要自己支持wrap_content和padding等属性，不过这种View也很常见。
4.ViewGroup的子类：ViewGroup是用于实现View的组合布局的基础类，直接继承ViewGroup的子类主要是用于实现一些非常规的布局，即不同于官方API给出的LinearLayout等这些的布局。这种这种自定义View的实现难度高，需要处理好ViewGroup和它子View的测量和布局，比较少见。

** 4种自定义View所需的步骤**


Paste_Image.png

自定义属性
　　想要实现自定义的功能，我们有时候就需要一些自己定义的属性，怎么让这些属性可以通过在xml上设置呢？只需要在res/value文件夹里新建一个attrs.xml(名字随便，建立位置对就行)：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="Color" format="color"/>
<attr name="inVelocityX" format="integer"/>
<attr name="inVelocityY" format="integer"/>
<attr name="Text" format="string"/>
<attr name="TextColor" format="color"/>

<declare-styleable name="BallView">
    <attr name="color"/>
    <attr name="inVelocityX" />
    <attr name="inVelocityY" />
    <attr name="Text" />
    <attr name="TextColor"/>
</declare-styleable>
</resources>

BallView就是我demo里面的自定义View名字，在declare-styleable外面声明一些自定义属性和属性的类型format，在里面申明BallView需要哪些属性（当然也可以直接在declare-styleable里面声明属性的format，这样就不需要在外面声明了，但是这样的话这些属性也不能被另一个自定义View重用）。
关于属性的format有很多种，reference，color，boolean等等，想看全部可以参考这里。

在attrs.xml声明了属性之后，就可以在View的xml里用了，不过首先要在根ViewGroup里声明变量空间： 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cust="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <com.zhjohow.customview.BallView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        cust:color="#ff0000"
        cust:Text="我是一个球"
        cust:TextColor="#ffffff"
        cust:TextSize= "34"
        cust:inVelocityX="6"
        cust:inVelocityY="6"/>

</RelativeLayout>

然后我们就要在自定义View里面获取这些属性了，自定义View的构造函数有4个，自定义View必须重写至少一个构造函数：

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

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

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

//API21之后才使用
public BallView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

4个构造函数中：如果View是在Java代码里面new的，则调用第一个构造函数；如果是在xml里声明的，则调用第二个构造函数，我们所需要的自定义属性也就是从这个AttributeSet参数传进来的；第三第四个构造函数不会自动调用，一般是在第二个构造主动调用（例如View有style属性的时候）。如果想深入了解构造函数，可以参考这里和这里 所以，我们就可以重写第二个构造函数那里获取我们在xml设定的自定义属性：

  //球的x,y方向速度
private int velocityX = 0,velocityY = 0;
//球的颜色
private int color;
//球里面的文字
private String text;
//文字的颜色
private int textColor;

public BallView(Context context, AttributeSet attrs) {
    super(context, attrs);
    //获取自定义属性数组
    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.BallView, 0, 0);
    int n = a.getIndexCount();
    for (int i = 0;i < n;i++){
        int attr = a.getIndex(i);
        switch (attr){
            case R.styleable.BallView_inVelocityX:
                velocityX = a.getInt(attr,0);
                break;
            case R.styleable.BallView_inVelocityY:
                velocityY = a.getInt(attr,0);
                break;
            case R.styleable.BallView_color:
                color = a.getColor(attr,Color.BLUE);
                break;
            case R.styleable.BallView_Text:
                text = a.getString(attr);
                break;
            case R.styleable.BallView_TextColor:
                textColor = a.getColor(attr,Color.RED);
                break;

        }
    }

}

可以看到输出：

System.out: text:球
System.out: textColor:-1
System.out: velocityX:3
System.out: velocityY:3
System.out: color:-65536

重写onMeasure()
　　关于重写onMeasure()的解释，我觉得用BallView不合适，于是就另外开了个TestMeasureView进行测试： 　　下面是没有重写onMeasure()来支持wrap_content的例子：

public class TestMeasureView extends View {
private Paint paint;
public TestMeasureView(Context context) {
    super(context);
}

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

}

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

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.BLUE);

}

}

在xml上使用这个View：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cust="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.zhjh.customview.TestMeasureView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</RelativeLayout>

得出的结果是这样的：

　　这就是为什么View的之类要自己支持wrap_parent的原因了，如果不重写wrap_parent就被当成match_parent。具体原因可以看一下View的Measure过程，这个是必须了解的，下面的图（从链接里面盗的）是关键。
　　了解Measure过程之后我们发现我们现在这个TestMeasureView的长宽参数是由父View的测量模式（RelativeLayout的EXACTLY）和自身的参数（wrap_content）决定的（AT_MOST），所以我们就可以重写onMeasure()让View支持wrap_content了，下面网上流传很广的方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int hSpeSize = MeasureSpec.getSize(heightMeasureSpec);
    int hSpeMode = MeasureSpec.getMode(heightMeasureSpec);
    int wSpeSize = MeasureSpec.getSize(widthMeasureSpec);
    int wSpeMode = MeasureSpec.getMode(widthMeasureSpec);
    int width = wSpeSize;
    int height = hSpeSize;

    if (wSpeMode == MeasureSpec.AT_MOST){
        //在这里实现计算需要wrap_content时需要的宽度，这里我直接当作赋值处理了
        width =200;
    }
    if (hSpeMode == MeasureSpec.AT_MOST){
        //在这里实现计算需要wrap_content时需要的高度，这里我直接当作赋值处理了
        height = 200;
    }
    //传入处理后的宽高
    setMeasuredDimension(width,height);
}

结果是成功的：

网上的很多都是这样做,通过判断测量模式是否AT_MOST来判断View的参数是否是wrap_content，然而，通过上面的表我们发现View的AT_MOST模式对应的不只是wrap_content，还有当父View是AT_MOST模式的时候的match_parent，如果我们这样做的话，父View是AT_MOST的时候这个自定义View的match_parent不就失效了吗。 　　
测试一下,我们把TestMeasureView长宽参数设置为match_parent，然后在外面再包一个模式为AT_MOST的父View（把父View的宽高都设为wrap_content，这样就确保了模式是AT_MOST，UNSPECIFIED因为不会出现在这里可以忽略）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cust="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <com.zhjh.customview.TestMeasureView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
</RelativeLayout>

运行一下，结果果然是match_parent失效：

　　所以说看到的东西要思考一下，才能真正地转化为自己的，然后这个怎么解决呢，很简单，直接在onMeasure里面判断参数是否wrap_content就好：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int hSpeSize = MeasureSpec.getSize(heightMeasureSpec);
    int hSpeMode = MeasureSpec.getMode(heightMeasureSpec);
    int wSpeSize = MeasureSpec.getSize(widthMeasureSpec);
    int wSpeMode = MeasureSpec.getMode(widthMeasureSpec);
    int width = wSpeSize;
    int height = hSpeSize;
    if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT){
        //在这里实现计算需要wrap_content时需要的宽
        width =200;
    }
    if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT){
        //在这里实现计算需要wrap_content时需要的高
        height =200;
    }
    //传入处理后的宽高
    setMeasuredDimension(width,height);
}

然后我把参数设回wrap_content（xml就不贴代码了），结果是正确的：

　　但是这种方法有一个缺陷，就是可能会将UNSPECIFIED的情况也覆盖掉，但是UNSPECIFIED一般只出现在系统内部的View，不会出现在自定义View，而且当它出现的时候也可以加个判断按情况解决。

重写onDraw()
　　这里就是利用onDraw()给出的Canvas画出各种东西了，这里是BallView的onMeasure()方法和onDraw()，通过以下代码，可以实现在wrap_content的时候根据字的内容长度画出相应的圆，然后可以根据给出的速度移动，遇到“墙会碰撞”。

  @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int wSpeSize = MeasureSpec.getSize(widthMeasureSpec);
    int hSpeSize = MeasureSpec.getSize(heightMeasureSpec);
    int width = wSpeSize ;
    int height = hSpeSize;


    if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT){
        //在这里实现计算需要wrap_content时需要的宽高
        width = bounds.width();

    }else if(getLayoutParams().width != ViewGroup.LayoutParams.MATCH_PARENT){
        width = getLayoutParams().width;
    }
    if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT){
        //在这里实现计算需要wrap_content时需要的宽高
        height =bounds.height();
    }else if(getLayoutParams().height != ViewGroup.LayoutParams.MATCH_PARENT){
        height = getLayoutParams().height;
    }
    //计算半径
    radius = Math.max(width,height)/2;

    //传入处理后的宽高
    setMeasuredDimension((int) (radius*2+1), (int) (radius*2+1));
}


@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(getWidth()/2,getHeight()/2,radius,paintFill);
    //让字体处于球中间
    canvas.drawText(text,getWidth()/2,getHeight()/2+bounds.height()/2,paintText);
    checkCrashScreen();
    offsetLeftAndRight(velocityX);
    offsetTopAndBottom(velocityY);
    postInvalidateDelayed(10);
}

//检测碰撞，有碰撞就反弹
private void checkCrashScreen(){
    if ((getLeft() <= 0 && velocityX < 0)){
        velocityX = -velocityX ;

    }
    if (getRight() >= screenWidth && velocityX > 0){
        velocityX = -velocityX ;
    }
    if ((getTop() <= 0 && velocityY < 0)) {
        velocityY = -velocityY ;

    }
    if (getBottom() >= screenHeight -sbHeight && velocityY > 0){
        velocityY = -velocityY ;
    }
}

最后结果：


　　
重写自身和子类的onMesure()和onLayout()
　　 　　上面是以自定义View为例子，这次就以一个自定义ViewGroup做为例子，做一个很简单的可以按照斜向下依次排列View的ViewGroup，类似于LinearLayout。要做一个新的ViewGroup，首先就是要重写它的onMesure()方法，让它可以按照需求测量子View和自身的宽高，还可以在这里支持wrap_content。
　　 　　onMesure()和onLayout()是干什么的呢？为什么需要重写的是它们？因为View的绘制过程大概是Measure(测量)→Layout(定位)→Draw(绘图)三个过程，至于具体是怎样的呢？可以看工匠若水的这篇文章，看不懂没关系，可以看图。。。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);


    // 计算出所有的childView的宽和高
    measureChildren(widthMeasureSpec, heightMeasureSpec);
    int cCount = getChildCount();
    int width = 0;
    int height = 0;
    //处理WRAP_CONTENT情况，把所有子View的宽高加起来作为自己的宽高
    if (getLayoutParams().width == ViewGroup.LayoutParams.WRAP_CONTENT){
        for (int i = 0; i < cCount; i++){
            View childView = getChildAt(i);
            width += childView.getMeasuredWidth();
        }
    }else {
        width = sizeWidth;
    }
    if (getLayoutParams().height == ViewGroup.LayoutParams.WRAP_CONTENT){
        for (int i = 0; i < cCount; i++){
            View childView = getChildAt(i);
            height += childView.getMeasuredHeight();
        }
    }else {
        height =sizeHeight;
    }
    //传入处理后的宽高
    setMeasuredDimension(width,height);
}

还有通过重写onLayout()把子View一个个排序斜向放好：

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int cCount = getChildCount();
    int sPointX = 0;
    int sPointY = 0;
    int cWidth = 0;
    int cHeight = 0;
    //遍历子View，根据它们的宽高定位
    for (int i = 0; i < cCount; i++){
        View childView = getChildAt(i);
        //这里使用getMeasuredXXX()方法是因为还没layout完，使用getWidth()和getHeight()获取会得不到正确的宽高
        cWidth = childView.getMeasuredWidth();
        cHeight = childView.getMeasuredHeight();
        //定位
        childView.layout(sPointX,sPointY,sPointX + cWidth,sPointY + cHeight);
        sPointX += cWidth;
        sPointY += cHeight;
    }
}

结果： 参数为WRAP_CONTENT的时候，成功地显示了：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cust="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.zhjh.customview.InclinedLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000fff">
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="1"
        android:background="#fff000"/>
    <TextView
        android:layout_width="20dp"
        android:layout_height="50dp"
        android:text="2"
        android:background="#00ff00"/>
    <TextView
        android:layout_width="50dp"
        android:layout_height="30dp"
        android:text="3"
        android:background="#ff0000"/>
 </com.zhjh.customview.InclinedLayout>

</RelativeLayout>

还有match_parent的时候：

　　这样斜向下排列的ViewGroup就完成了，这些只是最简单的一个demo，用于我们熟悉自定义View的步骤，掌握了这些，复杂的自定义View也可以一步一步地完成了。

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

推荐阅读更多精彩内容