Android学习——自定义控件（一）

由于之前在实习生面试的时候，被面试官问到有关自定义控件的问题，但没有回答上来，于是回来后便学习了关于自定义控件的相关知识。

 

自定义控件介绍

---

自定义控件，按我的理解，大体上分为两种。一种是自己绘图或者加入动画，产生的单一的自定义控件。一种是利用已有的控件进行组合，产生的组合控件。这篇博文主要介绍第一种。

在进行单一的自定义控件编写时，主要需要重写三个方法：onMeasure(),onLayout()和onDraw()，在介绍这三个方法之前，先来展示一下我自己设计的一个简单的自定义控件，然后根据图片，依次对这三个方法进行讲解

这个自定义控件是一个2048方块的模型，对于一个2048方块来说，我们需要能够设置他的大小、方块上的数字以及方块的颜色。对于Android的自带控件来说，我们可以通过XML文件来静态设置这些属性，那么对于自定义控件来说，当然也可以这样做，接下来先来介绍自定义控件如何设置自定义属性

 

自定义属性

---

1.创建自定义属性

在values文件中，创建attrs.xml(如果有多个自定义控件，可以创建多个XML文件来定义自定义属性)，在XML中按如下格式，声明自定义属性：

xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Code">
        <attr name="size" format="dimension"/> 
        <attr name="text" format="string"/>
        <attr name="codecolor" format="color"/>
        <attr name="textcolor" format="color"/>
        <attr name="textsize" format="dimension"/>
        <attr name="gravity">
            <flag name="left" value="0"/>
            <flag name="top" value="1"/>
            <flag name="right" value="2"/>
            <flag name="bottom" value="3"/>
            <flag name="center" value="4"/>
        attr>
    declare-styleable>
resources>

 

2.使用自定义属性

在使用普通控件的属性时，我们的格式为android：*****=*****，在自定义控件中，我们需要人为地定义一个名称，来表示我们的自定义属性，在XML文件的头部进行声明，代码如下：

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:code="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
                android:gravity="center"
    tools:context="com.example.administrator.service.MainActivity">

    <com.example.administrator.service.Code
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        code:gravity="center"
        code:text="2048"
        code:textsize="20sp"
        code:size="100dp"
        code:codecolor="@color/colorPrimaryDark"
        />
RelativeLayout>

其中RelativeLayout下的xmlns:code=http://schemas.android.com/apk/res-auto，即为声明的自定义属性的名称

 

3.在Java文件中获取自定义属性

属性在存储过程中，实际上利用的是键值对存储方式，因此，在Java文件中获取相关属性时，只需要根据声明的属性名称作为key值，获取对应的values值即可。其中，用户获取键值对的类为TypedArray,代码如下：

private void initParams(Context context, AttributeSet attrs) {
        TypedArray typedArray =context.obtainStyledAttributes(attrs,R.styleable.Code);
        if(typedArray!=null)
        {
            codecolor=typedArray.getColor(R.styleable.Code_codecolor,Color.YELLOW);
            text=typedArray.getString(R.styleable.Code_text);
            textsize=typedArray.getDimension(R.styleable.Code_textsize,20);
            length=typedArray.getDimension(R.styleable.Code_size,100);
            textcolor=typedArray.getColor(R.styleable.Code_textcolor,Color.GRAY);
            position=typedArray.getInt(R.styleable.Code_gravity,LEFT);

            typedArray.recycle();
        }
    }

在获取的属性中，有些需要设置默认值，有些则不需要，这点需要注意。其次，在使用完TypedArray后，不要忘记回收。

 

onMeasure()

---

接下来开始介绍文章开头提到的三个方法，先来介绍onMeasure()方法。我们知道，在声明一个控件时，我们需要声明该控件的宽、高，而onMeasure()方法的作用，便是根据用户声明的宽高，计算出相应的宽高，并把该数值传递给View。

 

1.MeasureSpec类

 

 

 

 

在介绍具体的计算方法前，我们先了解一下MeasureSpec类，找到其源代码，提取出我们需要的部分：

public static class MeasureSpec {
        private static final int MODE_SHIFT = 30;
        private static final int MODE_MASK  = 0x3 << MODE_SHIFT;


        /**
         * Measure specification mode: The parent has not imposed any constraint
         * on the child. It can be whatever size it wants.
         */
        public static final int UNSPECIFIED = 0 << MODE_SHIFT;

        /**
         * Measure specification mode: The parent has determined an exact size
         * for the child. The child is going to be given those bounds regardless
         * of how big it wants to be.
         */
        public static final int EXACTLY     = 1 << MODE_SHIFT;

        /**
         * Measure specification mode: The child can be as large as it wants up
         * to the specified size.
         */
        public static final int AT_MOST     = 2 << MODE_SHIFT;

        public static int makeMeasureSpec(int size,
                                          int mode) {
                return size + mode;

        }



        public static int getMode(int measureSpec) {
            //noinspection ResourceType
            return (measureSpec & MODE_MASK);
        }

        public static int getSize(int measureSpec) {
            return (measureSpec & ~MODE_MASK);
        }

在这个代码中，我们可以看到，一个View的尺寸值是一个32位的二进制数，并由两部分组成。其中，高两位，表示的是尺寸值的模式，分为三种：EXACTLY、UNSPECIFIED和AT_MOST，而低30位，则表示这个View的大小。所以，当我们获取一个View的尺寸值时，便可以利用MeasureSpec类的getMode方法和getSize方法，获取对应的模式和大小。那么这三种模式又分别代表了什么呢，继续查看如下源码：

privatestaticintgetRootMeasureSpec(intwindowSize,introotDimension){
    int measureSpec;
    switch (rootDimension) {

    case ViewGroup.LayoutParams.MATCH_PARENT:
        // Window can't resize. Force root view to be windowSize.
        measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.EXACTLY);
        break;
    case ViewGroup.LayoutParams.WRAP_CONTENT:
        // Window can resize. Set max size for root view.
        measureSpec = MeasureSpec.makeMeasureSpec(windowSize, MeasureSpec.AT_MOST);
        break;
    default:
        // Window wants to be an exact size. Force root view to be that size.
        measureSpec = MeasureSpec.makeMeasureSpec(rootDimension, MeasureSpec.EXACTLY);
        break;
    }
    return measureSpec;
}

由这段代码可以看到，当我们定义的宽高为MATCH_PARENT时，模式为EXACTLY，即根据父布局剩余的可填充大小，返回一个准确值。当宽高为WRAP_CONTENT时，模式为AT_MOST，即最大限度地填充父布局。而当为其他值时，如100dp，则为EXACTLY，为用户自定义的准确值。而UNSPECIFIED，则是当该控件大小不确定时（如在ScrollView的子控件），返回的模式值。

 

2.onMeasure方法的编写

在看了前一段介绍后，大家可能会有疑问，既然系统已经根据XML中定义的属性，给出了相应的尺寸值，那么onMeasure又有什么作用呢。实际上是这样，由于自定义控件使我们自己定义的控件，因此我们想让他多大就多大，有时候系统给出的尺寸值，并不是我们实际想要的尺寸值。如当宽高为WRAP_CONTENT时，系统让我们的模式为AT_MOST，即完全填充父布局，但显然，我们并不一定希望是这样。甚至，我们有时候会希望，无论用户定义的宽高为多少，我们都希望我们的View只会显示出一种给定好的宽高。这个时候，onMeasure的作用就显示出来了。换言之，系统给出的尺寸值，只是系统推荐的值，而我们真正希望这个View的尺寸值为多少，则是我们在onMeasure方法中，自己实现的。下面，以我的这个自定义控件举例。代码如下：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        int widthMode=MeasureSpec.getMode(widthMeasureSpec);
        int heightMode=MeasureSpec.getMode(heightMeasureSpec);
        //////////设定控件的长宽
        switch (widthMode)
        {
            case MeasureSpec.EXACTLY:
                break;
            case MeasureSpec.UNSPECIFIED:
                widthMeasureSpec=MeasureSpec.makeMeasureSpec((int)length,MeasureSpec.EXACTLY);
                break;
            case MeasureSpec.AT_MOST:
                widthMeasureSpec=MeasureSpec.makeMeasureSpec((int)length,MeasureSpec.EXACTLY);
                break;
        }
        switch (heightMode)
        {
            case MeasureSpec.EXACTLY:
                break;
            case MeasureSpec.UNSPECIFIED:
                heightMeasureSpec=MeasureSpec.makeMeasureSpec((int)length,MeasureSpec.EXACTLY);
                break;
            case MeasureSpec.AT_MOST:
                heightMeasureSpec=MeasureSpec.makeMeasureSpec((int)length,MeasureSpec.EXACTLY);
                break;
        }


        super.onMeasure(widthMeasureSpec, heightMeasureSpec);   //传输长宽数据

这段代码很容易读懂，我们首先利用MeasureSpec的getMode方法，获取到相应的模式值。我希望，当宽高为WRAP_CONTENT时，View的大小和我的方块大小一样，而其他时刻，则和用户定义的宽高相同，因此，便可以在CASE语句中，对尺寸值进行修改，并用makeMeasureSpec重新生成32位数字，最后，通过super.onMeasure方法，传输相应的尺寸值。

 

3.在onMeasure进行相应的初始化操作

当然，onMeasure方法，除了可以传输尺寸值以外，还可以进行相应的初始化操作，如在我的控件中，有gravity属性，那么在设置方块中心的位置时，便自然需要用到整个控件的宽高属性，这个操作自然也就需要在onMeasure中实现，具体代码如下：

int width=MeasureSpec.getSize(widthMeasureSpec);
        int height=MeasureSpec.getSize(heightMeasureSpec);
        X=width/2;
        Y=height/2;
        Log.i("X1",X+"");
        switch (position)
        {
            case LEFT:
                X=length/2+getPaddingLeft();
                Log.i("X2",X+"");
                break;
            case RIGHT:
                X=width-getPaddingLeft()-length/2;
                break;
            case TOP:
                Y=length/2+getPaddingTop();
                break;
            case BOTTOM:
                Y=height-getPaddingBottom()-length/2;
                break;
            case CENTER:
                break;
        }
        float left=X-length/2;
        float right=X+length/2;
        float top=Y-length/2;
        float bottom=Y+length/2;
        rectf.set(left,top,right,bottom);   //获取绘图区域
    }

 

onLayout()

---

onlayout方法，主要作用是设置该View在父布局中的位置，比如你在该View控件中声明了自定义属性layout_gravity，那么你便需要在onLayout中指定该控件的位置。由于这个自定义控件中，未涉及相关属性，故在这个不多介绍这个方法。

 

onDraw()

---

onDraw方法，主要是用Canvas和Paint类，来绘制相关的View图像。其中，Paint类相当于是画笔，当你每次进行绘制前，需要先对画笔进行修改和描述。而Canvas类，相当于你对画笔进行的动作，如画圆、画矩形、书写文字等等。而这相配合，便可以绘制出想要的图形。具体代码如下：

protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        mPaint.setColor(codecolor);
        canvas.drawRoundRect(rectf,length/10,length/10,mPaint);
        mPaint.setColor(textcolor);
        mPaint.setTextSize(textsize);
        Log.d("Jinx",text);
        canvas.drawText(text,X-length/5*2,Y-length/2+textsize,mPaint);
    }

相关的Canvas的绘制方法，在网上可以搜索到相关数据。

 

GitHub地址

---

https://github.com/gtxjinx/Custom-View/ 

有需要的朋友可以自行下载。