Android UI 之一步步教你自定義控件(自定義屬性、合理設計onMeasure、合理設計onDraw等)

Android開發做到了一定程度，多少都會用到自定義控件，一方面是更加靈活，另一方面在大資料量的情況下自定義控件的效率比寫布局檔案更高。

一個相對完善的自定義控件在布局檔案中和java代碼中都應能靈活設定屬性。另外在普通的布局中和AdapterView中都應能正确繪制，這就要求合理設計onMeasure方法，下文中會做比較詳細的講解。

本文原創，如需轉載，請注明轉載位址：http://blog.csdn.net/carrey1989/article/details/11757409

接下來我就一步一步來講解如何設計和編寫一個比較完善的自定義控件。

首先要來設計好我們要完成的效果，我們今天來實作下圖所示的這樣一個控件：

Android UI 之一步步教你自定義控件(自定義屬性、合理設計onMeasure、合理設計onDraw等)

用文字來描述一下：我們要定義的控件上方會顯示一張圖檔，我們可以設定這張圖檔的内容，長寬比，透明度，伸縮模式，以及圖檔四周的填充空間大小。圖檔下方會顯示一行文字，作為一級标題，我們可以設定文字的内容，大小，顔色，以及文字區域四周的填充空間的大小。一級标題下方顯示一行二級标題，具體設定内容和一級标題相同。

我們不妨先來直接看一下完成後的效果，這樣可以更直覺的了解要實作的控件的樣子。

Android UI 之一步步教你自定義控件(自定義屬性、合理設計onMeasure、合理設計onDraw等)

左圖的樣子是在正常的布局中自定義控件的樣子，右圖則是在大資料量的情況下自定義控件作為AdapterView的item的時候繪制出來的樣子。

上面我們大體完成了初步的控件設計，下面我們開始編寫代碼。

第一步，我們寫好自定義屬性，根據我們上面所做的設計，我們的自定義屬性涉及到三個方面，分别是圖檔相關的屬性，一級标題相關的屬性，二級标題相關的屬性。

按照慣例，我們首先在res/values檔案目錄下建立一個attrs.xml檔案。

然後我們在attrs.xml檔案中完成我們對屬性的定義，代碼片段如下：

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="imageSrc" format="reference"/>
<attr name="imageAspectRatio" format="float"/>
<attr name="imageAlpha" format="float"/>
<attr name="imagePaddingLeft" format="dimension"/>
<attr name="imagePaddingTop" format="dimension"/>
<attr name="imagePaddingRight" format="dimension"/>
<attr name="imagePaddingBottom" format="dimension"/>
<attr name="imageScaleType">
<enum name="fillXY" value="0"/>
<enum name="center" value="1"/>
</attr>
<attr name="titleText" format="string"/>
<attr name="titleTextSize" format="dimension"/>
<attr name="titleTextColor" format="color"/>
<attr name="titlePaddingLeft" format="dimension"/>
<attr name="titlePaddingTop" format="dimension"/>
<attr name="titlePaddingRight" format="dimension"/>
<attr name="titlePaddingBottom" format="dimension"/>
<attr name="subTitleText" format="string"/>
<attr name="subTitleTextSize" format="dimension"/>
<attr name="subTitleTextColor" format="color"/>
<attr name="subTitlePaddingLeft" format="dimension"/>
<attr name="subTitlePaddingTop" format="dimension"/>
<attr name="subTitlePaddingRight" format="dimension"/>
<attr name="subTitlePaddingBottom" format="dimension"/>
<declare-styleable name="CustomView">
<attr name="imageSrc"/>
<attr name="imageAspectRatio" />
<attr name="imageAlpha" />
<attr name="imagePaddingLeft" />
<attr name="imagePaddingTop" />
<attr name="imagePaddingRight" />
<attr name="imagePaddingBottom" />
<attr name="imageScaleType" />
<attr name="titleText" />
<attr name="titleTextSize" />
<attr name="titleTextColor" />
<attr name="titlePaddingLeft" />
<attr name="titlePaddingTop" />
<attr name="titlePaddingRight" />
<attr name="titlePaddingBottom" />
<attr name="subTitleText" />
<attr name="subTitleTextSize" />
<attr name="subTitleTextColor" />
<attr name="subTitlePaddingLeft" />
<attr name="subTitlePaddingTop" />
<attr name="subTitlePaddingRight" />
<attr name="subTitlePaddingBottom" />
</declare-styleable>
</resources>

這裡需要說明幾點：<attr>标簽的format屬性值代表屬性的類型，這個類型值一共有10種，分别是：reference,float,color,dimension,boolean,string,enum,integer,fraction,flag

。但是我們作為開發者常用的基本上隻有reference,float,color,dimension,boolean,string,enum這7種。在attrs.xml檔案中的<declare-styleable>标簽的name屬性的值，按照慣例我們都是寫成自定義控件類的名字。一個同名的<attr>在attrs.xml中隻可以定義一次。

除此之外，上面的代碼都是針對前面的設計來定義了各種屬性，相信各位同學都能看懂。

第二步就是編寫我們自定義控件的java類了，我們首先将之前做的自定義屬性在自定義控件類中做好聲明：

[java] view plain copy

private Bitmap imageBitmap;
private float imageAspectRatio;
private float imageAlpha;
private int imagePaddingLeft;
private int imagePaddingTop;
private int imagePaddingRight;
private int imagePaddingBottom;
private int imageScaleType;
private static final int SCALE_TYPE_FILLXY = 0;
private static final int SCALE_TYPE_CENTER = 1;
private String titleText;
private int titleTextSize;
private int titleTextColor;
private int titlePaddingLeft;
private int titlePaddingTop;
private int titlePaddingRight;
private int titlePaddingBottom;
private String subTitleText;
private int subTitleTextSize;
private int subTitleTextColor;
private int subTitlePaddingLeft;
private int subTitlePaddingTop;
private int subTitlePaddingRight;
private int subTitlePaddingBottom;
private Paint paint;
private TextPaint textPaint;
private Rect rect;
private static final int MIN_SIZE = 12;
private int mViewWidth;
private int mViewHeight;

然後我們要在構造方法中，将從布局檔案中讀取的自定義屬性解析出來。

[java] view plain copy

TypedArray a = context.getTheme().obtainStyledAttributes(
attrs, R.styleable.CustomView, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CustomView_imageSrc:
imageBitmap = BitmapFactory.decodeResource(
getResources(), a.getResourceId(attr, 0));
break;
case R.styleable.CustomView_imageAspectRatio:
imageAspectRatio = a.getFloat(attr, 1.0f);//預設長寬相等
break;
case R.styleable.CustomView_imageAlpha:
imageAlpha = a.getFloat(attr, 1.0f);//預設不透明
if (imageAlpha > 1.0f) imageAlpha = 1.0f;
if (imageAlpha < 0.0f) imageAlpha = 0.0f;
break;
case R.styleable.CustomView_imagePaddingLeft:
imagePaddingLeft = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_imagePaddingTop:
imagePaddingTop = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_imagePaddingRight:
imagePaddingRight = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_imagePaddingBottom:
imagePaddingBottom = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_imageScaleType:
imageScaleType = a.getInt(attr, 0);
break;
case R.styleable.CustomView_titleText:
titleText = a.getString(attr);
break;
case R.styleable.CustomView_titleTextSize:
titleTextSize = a.getDimensionPixelSize(
attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 25, getResources().getDisplayMetrics()));//預設标題字型大小25sp
break;
case R.styleable.CustomView_titleTextColor:
titleTextColor = a.getColor(attr, 0x00000000);//預設黑色字型
break;
case R.styleable.CustomView_titlePaddingLeft:
titlePaddingLeft = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_titlePaddingTop:
titlePaddingTop = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_titlePaddingRight:
titlePaddingRight = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_titlePaddingBottom:
titlePaddingBottom = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_subTitleText:
subTitleText = a.getString(attr);
break;
case R.styleable.CustomView_subTitleTextSize:
subTitleTextSize = a.getDimensionPixelSize(attr,
(int) TypedValue.applyDimension(
20, TypedValue.COMPLEX_UNIT_SP, getResources().getDisplayMetrics()));//預設子标題字型大小20sp
break;
case R.styleable.CustomView_subTitleTextColor:
subTitleTextColor = a.getColor(attr, 0x00000000);
break;
case R.styleable.CustomView_subTitlePaddingLeft:
subTitlePaddingLeft = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_subTitlePaddingTop:
subTitlePaddingTop = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_subTitlePaddingRight:
subTitlePaddingRight = a.getDimensionPixelSize(attr, 0);
break;
case R.styleable.CustomView_subTitlePaddingBottom:
subTitlePaddingBottom = a.getDimensionPixelSize(attr, 0);
break;
}
}
a.recycle();

這裡需要說明幾點，TypedArray對象在使用完畢後一定要調用recycle()方法。我之前曾在一篇文章中總結過在java代碼中進行px與dip(dp)、px與sp機關值的轉換。實際上，android中也提供了機關轉換的函數，我們也可以使用TypedValue.applyDimension(int unit, float value, DisplayMetrics metrics)方法來進行機關的互換，其中，第一個參數是你想要得到的機關，第二個參數是你想得到的機關的數值，比如：我要得到一個25sp，那麼我就用TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 25,getResources().getDisplayMetrics())，傳回的就是25sp對應的px數值了。

接下來我們要開始設計onMeasure方法，再設計onMeasure之前我們簡單了解幾個概念。

MeasureSpec的三種模式：

EXACTLY:表示我們設定了MATCH_PARENT或者一個準确的數值，含義是父布局要給子布局一個确切的大小。

AT_MOST:表示子布局将被限制在一個最大值之内，通常是子布局設定了wrap_content。

UNSPECIFIED:表示子布局想要多大就可以要多大，通常出現在AdapterView中item的heightMode中。

了解了上面幾個概念，我們就可以開始設計onMeasure了，具體代碼如下：

[java] view plain copy

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width;
int height;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
int desired = getPaddingLeft() + getPaddingRight() +
imagePaddingLeft + imagePaddingRight;
desired += (imageBitmap != null) ? imageBitmap.getWidth() : 0;
width = Math.max(MIN_SIZE, desired);
if (widthMode == MeasureSpec.AT_MOST) {
width = Math.min(desired, widthSize);
}
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
int rawWidth = width - getPaddingLeft() - getPaddingRight();
int desired = (int) (getPaddingTop() + getPaddingBottom() + imageAspectRatio * rawWidth);
if (titleText != null) {
paint.setTextSize(titleTextSize);
FontMetrics fm = paint.getFontMetrics();
int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
desired += (textHeight + titlePaddingTop + titlePaddingBottom);
}
if (subTitleText != null) {
paint.setTextSize(subTitleTextSize);
FontMetrics fm = paint.getFontMetrics();
int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
desired += (textHeight + subTitlePaddingTop + subTitlePaddingBottom);
}
height = Math.max(MIN_SIZE, desired);
if (heightMode == MeasureSpec.AT_MOST) {
height = Math.min(desired, heightSize);
}
}
setMeasuredDimension(width, height);
}

思路是這樣的：我們首先判斷是不是EXACTLY模式，如果是，那就可以直接設定值了，如果不是，我們先按照UNSPECIFIED模式處理，讓子布局得到自己想要的最大值，然後判斷是否是AT_MOST模式，來做最後的限制。

完成onMeasure過程之後，我們需要開始onDraw的設計，在onDraw中我們需要考慮各個部分設定的padding值，然後對應做出坐标的處理，整體的思路是從下向上繪制。具體的代碼如下：

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
rect.left = getPaddingLeft();
rect.top = getPaddingTop();
rect.right = mViewWidth - getPaddingRight();
rect.bottom = mViewHeight - getPaddingBottom();
paint.setAlpha(255);
if (subTitleText != null) {
paint.setTextSize(subTitleTextSize);
paint.setColor(subTitleTextColor);
paint.setTextAlign(Paint.Align.LEFT);
FontMetrics fm = paint.getFontMetrics();
int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
int left = getPaddingLeft() + subTitlePaddingLeft;
int right = mViewWidth - getPaddingRight() - subTitlePaddingRight;
int bottom = mViewHeight - getPaddingBottom() - subTitlePaddingBottom;
String msg = TextUtils.ellipsize(subTitleText, textPaint, right - left, TextUtils.TruncateAt.END).toString();
float textWidth = paint.measureText(msg);
float x = textWidth < (right - left) ? left + (right - left - textWidth) / 2 : left;
canvas.drawText(msg, x, bottom - fm.descent, paint);
rect.bottom -= (textHeight + subTitlePaddingTop + subTitlePaddingBottom);
}
if (titleText != null) {
paint.setTextSize(titleTextSize);
paint.setColor(titleTextColor);
paint.setTextAlign(Paint.Align.LEFT);
FontMetrics fm = paint.getFontMetrics();
int textHeight = (int) Math.ceil(fm.descent - fm.ascent);
float left = getPaddingLeft() + titlePaddingLeft;
float right = mViewWidth - getPaddingRight() - titlePaddingRight;
float bottom = rect.bottom - titlePaddingBottom;
String msg = TextUtils.ellipsize(titleText, textPaint, right - left, TextUtils.TruncateAt.END).toString();
float textWidth = paint.measureText(msg);
float x = textWidth < right - left ? left + (right - left - textWidth) / 2 : left;
canvas.drawText(msg, x, bottom - fm.descent, paint);
rect.bottom -= (textHeight + titlePaddingTop + titlePaddingBottom);
}
if (imageBitmap != null) {
paint.setAlpha((int) (255 * imageAlpha));
rect.left += imagePaddingLeft;
rect.top += imagePaddingTop;
rect.right -= imagePaddingRight;
rect.bottom -= imagePaddingBottom;
if (imageScaleType == SCALE_TYPE_FILLXY) {
canvas.drawBitmap(imageBitmap, null, rect, paint);
} else if (imageScaleType == SCALE_TYPE_CENTER) {
int bw = imageBitmap.getWidth();
int bh = imageBitmap.getHeight();
if (bw < rect.right - rect.left) {
int delta = (rect.right - rect.left - bw) / 2;
rect.left += delta;
rect.right -= delta;
}
if (bh < rect.bottom - rect.top) {
int delta = (rect.bottom - rect.top - bh) / 2;
rect.top += delta;
rect.bottom -= delta;
}
canvas.drawBitmap(imageBitmap, null, rect, paint);
}
}
}

當做完這一步的時候，我們的自定義控件已經能夠在布局檔案中進行使用了，但是我們還不能在AdapterView中用我們設計的布局檔案，因為AdapterView中每一個item屬性都是在java代碼中動态設定的，是以我們就需要給我們的自定義控件開放屬性設定的接口，我們這裡暫時隻開放了設定圖檔和文字内容的接口。

[java] view plain copy

public void setImageBitmap(Bitmap bitmap) {
imageBitmap = bitmap;
requestLayout();
invalidate();
}
public void setTitleText(String text) {
titleText = text;
requestLayout();
invalidate();
}
public void setSubTitleText(String text) {
subTitleText = text;
requestLayout();
invalidate();
}

做到這一步的時候，這個自定義控件基本就算完成了，後續的工作就是一些完善和修補了。

接下來就是自定義控件的使用了，在布局檔案中使用自定義控件的時候我們需要額外做一點工作，如下:

[java] view plain copy

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:carrey="http://schemas.android.com/apk/res/com.carrey.customview"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.carrey.customview.customview.CustomView
android:id="@+id/customview"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#FFD700"
carrey:imageSrc="@drawable/clock"
carrey:imageAspectRatio="1.0"
carrey:imageAlpha="0.5"
carrey:imagePaddingLeft="5dp"
carrey:imagePaddingTop="5dp"
carrey:imagePaddingRight="5dp"
carrey:imagePaddingBottom="5dp"
carrey:imageScaleType="center"
carrey:titleText="這是一級标題"
carrey:titleTextSize="30sp"
carrey:titleTextColor="#1E90FF"
carrey:titlePaddingLeft="4dp"
carrey:titlePaddingTop="4dp"
carrey:titlePaddingRight="4dp"
carrey:titlePaddingBottom="4dp"
carrey:subTitleText="這是二級子标題"
carrey:subTitleTextSize="20sp"
carrey:subTitleTextColor="#00FF7F"
carrey:subTitlePaddingLeft="3dp"
carrey:subTitlePaddingTop="3dp"
carrey:subTitlePaddingRight="3dp"
carrey:subTitlePaddingBottom="3dp"/>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="next page"/>
</RelativeLayout>

我們需要添加一行xmlns:carrey="http://schemas.android.com/apk/res/com.carrey.customview"，其中carrey是一個字首，你可以随意設定，com.carrey.customview是我們的應用的包名，如果拿不準的可以打開Manifest檔案，在<manifest>節點中找到package屬性值即可。

對于在AdapterView中的使用方法就和我們正常使用一個常用控件的方法是一樣的，這裡就不贅述了，如果說到了這裡還有一些不明白的地方，可以下載下傳我下面提供的源碼，然後對照着部落格的思路來看，或者給我留言進行交流。

源碼下載下傳

Android UI 之一步步教你自定義控件(自定義屬性、合理設計onMeasure、合理設計onDraw等)

繼續閱讀

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

Android電視機（機頂盒）初次開發的一些經驗分享

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯