Android 自定义View(API解析+Demo)

Android 自定义View(API解析+Demo)

一、理解API

1.首先来看View的类关系：

View直接继承java.lang.Object类，实现了Drawable.Callback和KeyEvent.Callback接口。Object类不用说，Drawable.Callback是用来响应图形绘制的接口，KeyEvent.Callback是响应按键事件的接口。

Drawable.Callback：

其中，invalidateDrawable 方法用于视图重新绘制，scheduleDrawable方法用于绘制动画的下一帧，unscheduleDrawable方法是用来取消scheduleDrawable这一动作的。

KeyEvent.Callback：

其中，键盘按下时调用onKeyDown方法，键盘抬起时调用onKeyUp方法，多次连续点击时调用OnKeyMultiple方法。

2.再来看看View实现：

重要函数说明：

1）构造函数：

3个构造方法，默认的布局文件调用的是两个参数的构造方法，所以在自定义View时记得让所有的构造调用我们的三个参数的构造，这样我们只需要在在三个参数的构造中获得自定义属性来设置属性值就可以了。

2）onDraw()函数：视图呈现内容时，调用此函数。里面包含了具体的视图绘制代码。当自定义View时，必须重写onDraw()函数绘制自定义的视图。

3）onMesure()函数：调用此函数可以获得该View以及子View的大小要求。当自定义View时，这个函数也是要重写的，不然设置wrap_content属性时会出现问题，问题现象可以自己尝试。

相信上面对API的解读之后你也能看出来我要讲什么，对，就是自定义View-Android程序员进阶的必经之路。

二、自定义View （源码下载地址：https://github.com/conghongjie/Android_Elvis_Note）

首先说明一下，本文参考过的文献，读者可以选读：

自定义TitleView : http://blog.csdn.net/lmj623565791/article/details/24252901

自定义SendEmailButton : http://blog.csdn.net/ddwhan0123/article/details/50628494

其次，官方API中写道：实现一个自定义View，你可能需要重写以下的方法，但不一定所有的都要重写，甚至你只需要重写onDraw()方法。

1.我们先来讲一下自定义View我们需要做什么：

1）利用attr.xml资源文件自定义View属性

2）自定义CustomTitleView类，继承View类

3）在CustomTitleView的构造方法中获得我们自定义的属性

4）重写onDraw函数

5）重写onMesure函数

6）其他函数的重写演示

2.具体实现：

1）利用attr.xml资源文件自定义View属性：

自定义View的属性，首先在res/values/ 下建立一个attrs.xml ，在里面定义我们的属性和声明我们的整个样式。

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


    <attr name="titleText" format="string" />
    <attr name="titleTextColor" format="color" />
    <attr name="titleTextSize" format="dimension" />


    <declare-styleable name="CustomTitleView">
        <attr name="titleText" />
        <attr name="titleTextColor" />
        <attr name="titleTextSize" />
    </declare-styleable>

</resources>
2）自定义CustomTitleView类，继承View类

3）在CustomTitleView的构造方法中获得我们自定义的属性：

这里要注意，就像前面解析API所说的，我们应该保证这三种构造方法都能调用到我们自定义的构造方法。这里获得我自定义的样式属性，当然遵从原作者的写法，这里实现了onClick改变文字的特性。

4）重写onDraw函数，利用canvas绘制view

5）重写onMesure函数，此处需要详细讲解：

如果不重写onMesure方法，并把布局文件的宽和高写成wrap_content，会发现效果并不是我们的预期，它会是布满全屏的。系统帮我们测量的高度和宽度都是MATCH_PARNET，当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。所以，当设置了WRAP_CONTENT时，我们需要自。己进行测量，即重写onMesure方法”

先了解MeasureSpec的specMode,一共三种类型：EXACTLY：一般是设置了明确的值或者是MATCH_PARENT；AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT；UNSPECIFIED：表示子布局想要多大就多大，很少使用。

package com.elvis.view.tests;

import java.util.HashSet;
import java.util.Random;
import java.util.Set;
import com.elvis.android_elvis_note.R;
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.util.TypedValue;
import android.view.View;


public class CustomTitleView extends View
{
/**
 * 文本
 */
private String mTitleText;
/**
 * 文本的颜色
 */
private int mTitleTextColor;
/**
 * 文本的大小
 */
private int mTitleTextSize;

/**
 * 绘制时控制文本绘制的范围
 */
private Rect mBound;
private Paint mPaint;

public CustomTitleView(Context context, AttributeSet attrs)
{
this(context, attrs, 0);
}

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

/**
 * 获得我自定义的样式属性
 * 
 * @param context
 * @param attrs
 * @param defStyle
 */
public CustomTitleView(Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
/**
 * 获得我们所定义的自定义样式属性
 */
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomTitleView, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++)
{
int attr = a.getIndex(i);
switch (attr)
{
case R.styleable.CustomTitleView_titleText:
mTitleText = a.getString(attr);
break;
case R.styleable.CustomTitleView_titleTextColor:
// 默认颜色设置为黑色
mTitleTextColor = a.getColor(attr, Color.BLACK);
break;
case R.styleable.CustomTitleView_titleTextSize:
// 默认设置为16sp，TypeValue也可以把sp转化为px
mTitleTextSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;

}

}
a.recycle();

/**
 * 获得绘制文本的宽和高
 */
mPaint = new Paint();
mPaint.setTextSize(mTitleTextSize);
// mPaint.setColor(mTitleTextColor);
mBound = new Rect();
mPaint.getTextBounds(mTitleText, 0, mTitleText.length(), mBound);

this.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{
mTitleText = randomText();
postInvalidate();
}

});

}
private String randomText()
{
Random random = new Random();
Set<Integer> set = new HashSet<Integer>();
while (set.size() < 4)
{
int randomInt = random.nextInt(10);
set.add(randomInt);
}
StringBuffer sb = new StringBuffer();
for (Integer i : set)
{
sb.append("" + i);
}

return sb.toString();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int width = 0;
int height = 0;

/**
 * 设置宽度
 */
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);
switch (specMode)
{
case MeasureSpec.EXACTLY:// 明确指定了
width = getPaddingLeft() + getPaddingRight() + specSize;
break;
case MeasureSpec.AT_MOST:// 一般为WARP_CONTENT
width = getPaddingLeft() + getPaddingRight() + mBound.width();
break;
}

/**
 * 设置高度
 */
specMode = MeasureSpec.getMode(heightMeasureSpec);
specSize = MeasureSpec.getSize(heightMeasureSpec);
switch (specMode)
{
case MeasureSpec.EXACTLY:// 明确指定了
height = getPaddingTop() + getPaddingBottom() + specSize;
break;
case MeasureSpec.AT_MOST:// 一般为WARP_CONTENT
height = getPaddingTop() + getPaddingBottom() + mBound.height();
break;
}

setMeasuredDimension(width, height);

}

@Override
protected void onDraw(Canvas canvas)
{
mPaint.setColor(Color.YELLOW);
canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);

mPaint.setColor(mTitleTextColor);
canvas.drawText(mTitleText, getWidth() / 2 - mBound.width() / 2, getHeight() / 2 + mBound.height() / 2, mPaint);
}
}

这样，你就可以放心的调用这个自定义View了，如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res/com.elvis.android_elvis_note"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.elvis.view.tests.CustomTitleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        custom:titleText="3712"
        android:padding="10dp"
        custom:titleTextColor="#ff0000"
        android:layout_centerInParent="true"
        custom:titleTextSize="40sp" />

</RelativeLayout>

6）其他函数的重写演示：

onTouchEvent方法的使用：（此处为按下操作添加“猜猜看”的式样）
@Override
public boolean onTouchEvent(MotionEvent event) {
//如果是按下操作
if (event.getAction()==MotionEvent.ACTION_DOWN) {
mTitleText = "猜猜看";
postInvalidate();
}
return super.onTouchEvent(event);
}
这里可以说一说postInvalidate()函数和invalidate()函数，这两个函数的作用是调用View的onDraw()方法重绘，但是invalidate()只能在UI线程中调用，postInvalidate()函数可以在其他线程直接调用，当然要想在其他线程调用invalidate()函数,只能通过Handler的方法。

。。。

。。

。

后续文章：Android 自定义ViewGroup (API解析+Demo)

摘要：View与ViewGroup的关系、区别；如何自定义ViewGroup。

// 如果觉得不错，记得顶我哦！顶我！顶我！顶我！

秒客网

Android 自定义View(API解析+Demo)

相关文章