1. 簡介
前面分析了一大堆原理：
自定義View原理篇（1）- measure過程
自定義View原理篇（2）- layout過程
自定義View原理篇（3）- draw過程
現(xiàn)在來看看是如何實(shí)現(xiàn)自定義View：
2.自定義View的分類
自定義View可以分為兩大類，一種是自定義單一View，另一種是自定義ViewGroup。具體如下圖所示：
| 類型 | 實(shí)現(xiàn) | 目的 |
|---|---|---|
| 自定義單一View | 繼承系統(tǒng)已有View 如：TextView |
擴(kuò)展已有View的功能 |
| 繼承View | 實(shí)現(xiàn)一些不規(guī)則效果 | |
| 自定義ViewGroup | 繼承系統(tǒng)已有ViewGroup 如：LinearLayout |
擴(kuò)展已有ViewGroup的功能 組合View功能 |
| 繼承ViewGroup | 實(shí)現(xiàn)自定義布局 |
本章主要介紹一下自定義單一View，自定義ViewGroup下一章來說明。
3.自定義單一View
自定義單一View又分為兩類，一類是繼承系統(tǒng)已有View，另一類是直接繼承View類，我們分開來看下。
3.1 繼承系統(tǒng)已有View
這種方式可以去擴(kuò)展系統(tǒng)已有View的功能，比如要顯示一個圓形的ImageView等等，都可以通過這種方式去實(shí)現(xiàn)。
我們這里的例子就簡單點(diǎn)，給一個ImageView加一個水印：
public class WatermarkImageView extends ImageView {//繼承ImageView
private Paint mPaint;
public WatermarkImageView(Context context) {
super(context);
init();
}
public WatermarkImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public WatermarkImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
//畫筆初始化
private void init() {
mPaint = new Paint();//創(chuàng)建畫筆
mPaint.setColor(Color.RED);// 設(shè)置畫筆顏色
mPaint.setTextSize(100);//創(chuàng)建字體大小
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫上水印
canvas.drawText("四月葡萄園博客", 20, getHeight() - 20, mPaint);
}
}
在布局中引用這個WatermarkImageView，引用自定義的View需要包名+View名：
<com.april.view.WatermarkImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/tuseji"/>
運(yùn)行程序看看效果：
自定義View-WatermarkImageView.png
簡單總結(jié)一下：繼承系統(tǒng)已有View去擴(kuò)展功能還是比較簡單的，這種方法一般只需重寫onDraw()即可，同時也無需支持wrap_content和padding。
3.2 繼承View類
繼承View類可以用來實(shí)現(xiàn)一些不規(guī)則效果，但是需要注意的是，這種方式不僅需要重寫onDraw()，還需要自己去支持wrap_content和padding，否則wrap_content和padding將不起效。另外，為了方便使用這個自定義View，我們通常還會提供一些自定義的屬性。
這里我們以畫一個圓角矩形為例：
public class RoundRectView extends View {//繼承View
private Paint mPaint;
private int mColor=Color.RED;
public RoundRectView(Context context) {
super(context);
init();
}
public RoundRectView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RoundRectView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint();//創(chuàng)建畫筆
mPaint.setColor(mColor);//設(shè)置畫筆顏色
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//獲取View的寬高
int width = getWidth();
int height = getHeight();
//畫圓角矩形
RectF rectF = new RectF(0, 0, width, height);
canvas.drawRoundRect(rectF, 50, 50, mPaint);
}
}
在布局中引用這個RoundRectView：
<com.april.view.RoundRectView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"/>
需要注意的是，我們這里使用了wrap_content和padding，我們先來看看效果：
自定義View-RoundRectView.png
可以看到，wrap_content沒有起到效果，這里跟match_parent一樣了，至于原因，可以看下這篇文章的分析：自定義View原理篇（1）- measure過程。
同樣，padding也沒有生效。
所以，我們需要自己去支持wrap_content和padding。
3.2.1 支持wrap_content
支持wrap_content需重寫onMeasure():
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲取寬的測量模式和大小
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
// 獲取高的測量模式和大小
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 設(shè)置wrap_content的默認(rèn)寬高值
// 默認(rèn)寬高的設(shè)定并無固定依據(jù),根據(jù)需要靈活設(shè)置
// 類似TextView,ImageView等針對wrap_content均在onMeasure()對設(shè)置默認(rèn)寬高值有特殊處理,具體細(xì)節(jié)請自行查看
int mWidth = 400;
int mHeight = 400;
// 當(dāng)測量模式是AT_MOST（即wrap_content）時設(shè)置默認(rèn)值
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(mWidth, mHeight);
// 寬或高其中一個模式為AT_MOST（即wrap_content）時，設(shè)置為默認(rèn)值
} else if (widthMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(mWidth, heightSize);
} else if (heightMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSize, mHeight);
}
}
再來看看效果：
自定義View-RoundRectView-支持wrap_content.png
wrap_content生效了。
3.2.2 支持padding
支持padding需要在onDraw()方法作相應(yīng)的修改：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//獲取左右上下的padding值
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
int paddingTop = getPaddingTop();
int paddingBottom = getPaddingBottom();
//View的寬高需要減去padding
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddingBottom;
//畫圓角矩形
RectF rectF = new RectF(0 + paddingLeft, 0 + paddingTop, width + paddingRight, height + paddingBottom);
canvas.drawRoundRect(rectF, 50, 50, mPaint);
}
再來看看效果：
自定義View-RoundRectView-支持padding.png
padding也生效了。
3.2.3 自定義View屬性
Android系統(tǒng)的控件以android開頭的比如android:layout_width等等，這些都是系統(tǒng)自帶的屬性。
為了方便使用自定義View，通常我們都會加上一些自定義屬性，比如：為RoundRectView增加一個設(shè)置顏色的屬性。
自定義View屬性可以分為三個步驟：
- 在
values目錄下創(chuàng)建自定義屬性的xml文件- 在自定義
View的構(gòu)造方法中解析自定義屬性的值- 在布局文件中使用自定義屬性
下面對每個步驟來進(jìn)行詳細(xì)的講解：
3.2.3.1 在values目錄下創(chuàng)建自定義屬性的xml文件
在values目錄下創(chuàng)建attrs_round_rect_view.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--自定義屬性集合:RoundRectView-->
<!--在該集合下,可以設(shè)置不同的自定義屬性-->
<declare-styleable name="RoundRectView">
<!--在attr標(biāo)簽下設(shè)置需要的自定義屬性-->
<!--此處定義了一個設(shè)置圖形的顏色:round_rect_color屬性,格式是color,代表顏色-->
<!--格式有很多種,如資源id(reference)等等-->
<attr name="round_rect_color" format="color"/>
</declare-styleable>
</resources>
3.2.3.2 在自定義View的構(gòu)造方法中解析自定義屬性的值
我們修改一下RoundRectView的構(gòu)造方法：
public RoundRectView(Context context, AttributeSet attrs) {
super(context, attrs);
// 加載自定義屬性集合RoundRectView
TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.RoundRectView);
//解析RoundRectView屬性集合的round_rect_color屬性，如果沒設(shè)置默認(rèn)值為Color.RED
mColor=typedArray.getColor(R.styleable.RoundRectView_round_rect_color,Color.RED);
//獲取資源后要及時釋放
typedArray.recycle();
init();
}
3.2.3.3 在布局文件中使用自定義屬性
最后，在布局中用上：
<?xml version="1.0" encoding="utf-8"?>
<!--必須添加schemas聲明才能使用自定義屬性-->
<!--添加的是xmlns:app="http://schemas.android.com/apk/res-auto"-->
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<com.april.view.RoundRectView
app:round_rect_color="#00ffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"/>
</FrameLayout>
需要注意的是：使用自定義屬性需要添加schemas： xmlns:app=”http://schemas.android.com/apk/res-auto”，其中app是我們自定義的名字，也可以使用其他名字。使用時需要加上這個名字作為額前綴，如：app:round_rect_color="#00ffff"。
我們再來看看效果：
自定義View-RoundRectView-自定義屬性.png
至此，一個功能比較完善的自定義
View就完成了。
3.2.4 完整代碼
最后貼一下完整的代碼：
RoundRectView.java :
public class RoundRectView extends View {//繼承View
private Paint mPaint;
private int mColor = Color.RED;
public RoundRectView(Context context) {
super(context);
init();
}
public RoundRectView(Context context, AttributeSet attrs) {
super(context, attrs);
// 加載自定義屬性集合RoundRectView
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundRectView);
//解析RoundRectView屬性集合的round_rect_color屬性，如果沒設(shè)置默認(rèn)值為Color.RED
mColor = typedArray.getColor(R.styleable.RoundRectView_round_rect_color, Color.RED);
//獲取資源后要及時釋放
typedArray.recycle();
init();
}
public RoundRectView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint();//創(chuàng)建畫筆
mPaint.setColor(mColor);//設(shè)置畫筆顏色
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 獲取寬的測量模式和大小
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
// 獲取高的測量模式和大小
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// 設(shè)置wrap_content的默認(rèn)寬高值
// 默認(rèn)寬高的設(shè)定并無固定依據(jù),根據(jù)需要靈活設(shè)置
// 類似TextView,ImageView等針對wrap_content均在onMeasure()對設(shè)置默認(rèn)寬高值有特殊處理,具體細(xì)節(jié)請自行查看
int mWidth = 400;
int mHeight = 400;
// 當(dāng)測量模式是AT_MOST（即wrap_content）時設(shè)置默認(rèn)值
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(mWidth, mHeight);
// 寬或高其中一個模式為AT_MOST（即wrap_content）時，設(shè)置為默認(rèn)值
} else if (widthMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(mWidth, heightSize);
} else if (heightMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(widthSize, mHeight);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//獲取左右上下的padding值
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
int paddingTop = getPaddingTop();
int paddingBottom = getPaddingBottom();
//View的寬高需要減去padding
int width = getWidth() - paddingLeft - paddingRight;
int height = getHeight() - paddingTop - paddingBottom;
//畫圓角矩形
RectF rectF = new RectF(0 + paddingLeft, 0 + paddingTop, width + paddingRight, height + paddingBottom);
canvas.drawRoundRect(rectF, 50, 50, mPaint);
}
}
values/attrs_round_rect_view.xml :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--自定義屬性集合:RoundRectView-->
<!--在該集合下,可以設(shè)置不同的自定義屬性-->
<declare-styleable name="RoundRectView">
<!--在attr標(biāo)簽下設(shè)置需要的自定義屬性-->
<!--此處定義了一個設(shè)置圖形的顏色:round_rect_color屬性,格式是color,代表顏色-->
<!--格式有很多種,如資源id(reference)等等-->
<attr name="round_rect_color" format="color"/>
</declare-styleable>
</resources>
activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<!--必須添加schemas聲明才能使用自定義屬性-->
<!--添加的是xmlns:app="http://schemas.android.com/apk/res-auto"-->
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<com.april.view.RoundRectView
app:round_rect_color="#00ffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"/>
</FrameLayout>
