自定義控件 幾乎是 Android 開(kāi)發(fā)者進(jìn)階必修課蒋搜，然而因?yàn)檫^(guò)程比較考驗(yàn)基本功（源碼解讀和數(shù)學(xué)知識(shí)），不少朋友會(huì)感覺(jué)比較苦惱，尤其像筆者這樣半路出家的醋寝。踩過(guò)一些坑后搞挣，筆者總結(jié)的經(jīng)驗(yàn)如下——
- 對(duì)理論知識(shí)，要著眼大局音羞，把目標(biāo)定為弄清它整體的運(yùn)轉(zhuǎn)流程囱桨，而不是拘泥于某個(gè)細(xì)節(jié)的實(shí)現(xiàn)內(nèi)容。因?yàn)楹芏嘞到y(tǒng)性的知識(shí)（比如控件的繪制全程）嗅绰，都不是一個(gè)人總結(jié)出來(lái)的舍肠，非要把每一行代碼都弄清楚，結(jié)果就像是盲人摸象窘面，永遠(yuǎn)也摸不透翠语。
- 對(duì)具體實(shí)踐，要抽絲剝繭财边，把目標(biāo)定為弄清它每一步做了什么事肌括，而不是簡(jiǎn)單把實(shí)現(xiàn)死記硬背下來(lái)。因?yàn)樽远x控件千變?nèi)f化酣难，單純?nèi)ビ浤骋粋€(gè)的實(shí)現(xiàn)內(nèi)容谍夭，結(jié)果就像是猴子掰苞谷，學(xué)啥忘啥憨募。
以上兩點(diǎn)慧库，其實(shí)也適用于信息時(shí)代很多新知識(shí)的學(xué)習(xí)。
下面我們來(lái)實(shí)現(xiàn)一個(gè) 自定義控件馋嗜，需求如下：
- 圓形控件齐板，能將圖片內(nèi)切成一張圓圖，然后展示出來(lái)
- 能在 xml 文件里設(shè)定有無(wú)邊框葛菇，邊框有多寬甘磨，是什么顏色
定義所需屬性
打開(kāi)死丟丟，新建一個(gè)項(xiàng)目 RoundImageViewTest眯停，然后在 res/values/ 目錄下新建一個(gè)配置文件 attrs.xml济舆。
然后在里面定義我們要寫(xiě)的 自定義控件 的配置屬性——
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RoundImageView">
<attr name="border_width" format="dimension" />
<attr name="border_color" format="color" />
</declare-styleable>
</resources>
首先我們想要的是一個(gè)圖片控件，因此可以直接繼承 ImageView 或者它的子類莺债，這樣可以少寫(xiě)很多實(shí)現(xiàn)過(guò)程滋觉，只須考慮 切圖 和 邊框 兩點(diǎn)。切圖是在代碼里面做的齐邦，于是要定義的椎侠，只剩下邊框相關(guān)的內(nèi)容了。
邊框的 寬度 如果設(shè)成 0措拇，就相當(dāng)于沒(méi)有我纪，所以只定義 寬度 與 顏色 2 個(gè)屬性即可，border_width和border_color。
至于format浅悉，它的取值不少趟据，除了圖示的 dimension 和 color，常用的還有 string 术健，integer 和 boolean汹碱。具體怎么取荞估？溫故知新一番吧咳促。
<!-- 從上到下 6 個(gè)屬性的 format 分別是 dimension，dimension泼舱，color等缀，
string，integer 和 boolean娇昙。-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorPrimary"
android:text="Hello world!"
android:lines="3"
android:clickable="false"/>
配置寫(xiě)好了尺迂，下一步就是自定義 View 類了。
獲取已定義的屬性
新建一個(gè)類 RoundImageView冒掌，繼承 AppCompatImageView噪裕。
public class RoundImageView extends AppCompatImageView {
private Context mContext;//上下文
private int mBorderWidth;//邊框?qū)挾? private int mBorderColor;//邊框顏色
private int mDefaultWidth = 0;//默認(rèn)邊框?yàn)?，也就是沒(méi)有邊框
private int mDefaultColor = 0xffffffff;//默認(rèn)顏色為純白
public RoundImageView(Context context) {
this(context, null);//在代碼里new實(shí)例時(shí)股毫，會(huì)調(diào)用這個(gè)構(gòu)造器
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);//在xml里配置view時(shí)膳音，會(huì)調(diào)用這個(gè)構(gòu)造器
}
public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mContext = context;
setAttributes(attrs);
}
//從配置文件中獲取屬性值
private void setAttributes(AttributeSet attrs) {
TypedArray ta = mContext.obtainStyledAttributes(attrs,
R.styleable.RoundImageView);
mBorderWidth = ta.getDimensionPixelSize(
R.styleable.RoundImageView_border_width, mDefaultWidth);
mBorderColor = ta.getColor(
R.styleable.RoundImageView_border_color, mDefaultColor);
ta.recycle();//賦值完后記得回收
}
}
構(gòu)造器一般 重寫(xiě)前三個(gè)，讓前兩個(gè)都指向第三個(gè)铃诬。在第三個(gè)構(gòu)造器里祭陷，獲取我們之前在配置文件里定義的屬性即可。
下一步就是重寫(xiě)onMeasure()和onDraw()趣席，完成 測(cè)量 和 繪制 了兵志。不過(guò)某些時(shí)候onMeasure()并不是必須的——你問(wèn)什么時(shí)候？
- 系統(tǒng)會(huì)在
onMeasure()里面幫我們測(cè)量控件的寬高宣肚。
- 當(dāng)你給寬高設(shè)定了具體的值想罕，測(cè)量出來(lái)的就是那個(gè)值。
- 當(dāng)你給寬高設(shè)定的是類似
MATCH_PARENT或者WRAP_CONTENT霉涨，測(cè)量出來(lái)的默認(rèn)是MATCH_PARENT按价。 - 因此，當(dāng)我們需要讓自定義控件能夠自適應(yīng)內(nèi)容寬高時(shí)笙瑟，就要重寫(xiě)
onMeasure楼镐；如果沒(méi)有這個(gè)需求，可以不重寫(xiě)逮走。
考慮到圓形圖片一般被用來(lái)顯示 頭像 或者 縮略圖鸠蚪，而這些在實(shí)際開(kāi)發(fā)中往往都是指定大小的今阳，此處我們就不重寫(xiě)onMeasure ()了师溅，直接開(kāi)始onDraw()茅信。
重寫(xiě)繪制流程
記得去掉父類的繪制流程。
因?yàn)槲覀冏罱K繪上去的圖要和控件 內(nèi)切墓臭，所以增加兩個(gè)成員變量mWidth和mHeight蘸鲸，用于記錄控件的寬和高，方便后面的計(jì)算窿锉。
private int mWidth;//自定義view的寬度
private int mHeight;//自定義view的高度
@Override
protected void onDraw(Canvas canvas) {
//super.onDraw(canvas);
if (getWidth() == 0 || getHeight() == 0) {
return;
}
if (mWidth == 0) {
mWidth = getWidth();
}
if (mHeight == 0) {
mHeight = getHeight();
}
}
下一步做什么呢酌摇？不少新手都容易摸不清頭腦，包括筆者嗡载。
這個(gè)時(shí)候最好的方法是開(kāi)個(gè)記事本寫(xiě) 偽碼窑多，相當(dāng)于學(xué)生時(shí)代寫(xiě)作文打提綱。
if (有邊框) {
畫(huà)邊框();
} else {
}
畫(huà)圓圖();
有無(wú)邊框很好判斷洼滚，寬度 0 就是沒(méi)有埂息。
邊框也很好畫(huà)，就是一個(gè)圓遥巴，只是注意要畫(huà)在控件 居中 的位置千康。
圓圖稍微難辦一點(diǎn)，首先我們要把圖片資源拿到铲掐，并且和控件的寬高進(jìn)行 適配拾弃；其次要裁剪它，最好是按資源的 內(nèi)切圓 裁剪摆霉，可以顯示盡量多的內(nèi)容豪椿；最后同樣把它畫(huà)在控件 居中 的位置。
這么一來(lái)又分兩種情況——
資源是 正方形：這個(gè)好辦携栋，直接按內(nèi)切圓裁剪搭盾。
資源是 矩形：需要先將其居中裁剪成一個(gè)正方形，然后再按內(nèi)切圓裁剪刻两。不對(duì)增蹭，矩形有兩種！還得再分出「寬 > 高」和「高 > 寬」兩種情況磅摹。
因此我們「畫(huà)圓圖」方法的偽碼應(yīng)該是——
畫(huà)圓圖() {
if (寬 > 高) {
居中裁剪邊長(zhǎng) = 高的正方形();
} else if (高 > 寬) {
居中裁剪邊長(zhǎng) = 寬的正方形();
} else {
}
裁剪正方形的內(nèi)切圓();
}
矩形變正方形很好辦滋迈，Bitmap.createBitmap(矩形圖, 橫坐標(biāo), 縱坐標(biāo), 邊長(zhǎng), 邊長(zhǎng))即可；正方形變圓形的話户誓，需要用到 圖像混合 知識(shí)饼灿。
這里你暫時(shí)只需要知道這么做——
- 先畫(huà)一個(gè)圓。
- 然后調(diào)用
paint.setXferMode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN))帝美。 - 再畫(huà)你圖像碍彭，這樣最終顯示的就是「圖像與這個(gè)圓相交的部分」。
對(duì) 圖像混合 的其它知識(shí)有興趣的朋友，推薦看這篇文——
目標(biāo)明確了庇忌，我們的代碼就好寫(xiě)了舞箍，直接上——
@Override
protected void onDraw(Canvas canvas) {
//獲取控件的寬與高
if (getWidth() == 0 || getHeight() == 0) {
return;
}
if (mWidth == 0) {
mWidth = getWidth();
}
if (mHeight == 0) {
mHeight = getHeight();
}
//根據(jù)是否有邊框，進(jìn)行處理
int radius;
boolean b = mWidth < mHeight;
if (mBorderWidth == 0) {//沒(méi)有邊框時(shí)皆疹，半徑為寬高較小值的一半
radius = b ? mWidth / 2 : mHeight / 2;
} else {//有邊框時(shí)疏橄，半徑為寬高較小值的一半，減去邊框?qū)挾? radius = b ? mWidth / 2 - mBorderWidth : mHeight / 2 - mBorderWidth;
//然后先繪制邊框
drawBorder(canvas, radius, mBorderColor);
}
//獲取資源圖片略就，裁剪成圓形
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
Bitmap resource = ((BitmapDrawable) drawable).getBitmap();
if (resource == null) {
return;
}
Bitmap result = getRoundBitmap(
resource.copy(Bitmap.Config.ARGB_8888, true), radius);
//繪制到view的正中央
canvas.drawBitmap(result, mWidth / 2 - radius, mHeight / 2 - radius, null);
}
//獲取裁剪后的圓形圖片
public Bitmap getRoundBitmap(Bitmap bmp, int radius) {
Bitmap squareBmp, scaledBmp;//正方形圖捎迫，適配后的正方形圖
int x, y, squareSize;//橫坐標(biāo)，縱坐標(biāo)表牢，正方形邊長(zhǎng)
//將原圖片裁剪成正方形窄绒，邊長(zhǎng)為長(zhǎng)與寬的較小值
int bmpWidth = bmp.getWidth();
int bmpHeight = bmp.getHeight();
if (bmpWidth > bmpHeight) {
squareSize = bmpHeight;
x = (bmpWidth - bmpHeight) / 2;
y = 0;
squareBmp = Bitmap.createBitmap(bmp, x, y, squareSize, squareSize);
} else if (bmpHeight > bmpWidth) {
squareSize = bmpWidth;
x = 0;
y = (bmpHeight - bmpWidth) / 2;
squareBmp = Bitmap.createBitmap(bmp, x, y, squareSize, squareSize);
} else {
squareBmp = bmp;
}
//將正方形圖片與view的半徑適配
int diameter = radius * 2;
if (squareBmp.getWidth() != diameter || squareBmp.getHeight() != diameter) {
scaledBmp = Bitmap.createScaledBitmap(
squareBmp, diameter, diameter, true);
} else {
scaledBmp = squareBmp;
}
//繪制圓環(huán)
Bitmap result = Bitmap.createBitmap(
scaledBmp.getWidth(), scaledBmp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawCircle(scaledBmp.getWidth() / 2, scaledBmp.getHeight() / 2,
radius, paint);
//繪制混合圖像，這樣最終顯示的就是圖像與圓環(huán)相交的部分崔兴，即圓形圖片
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
Rect rect = new Rect(0, 0, scaledBmp.getWidth(), scaledBmp.getHeight());
canvas.drawBitmap(scaledBmp, rect, rect, paint);
//記得回收
bmp.recycle();
squareBmp.recycle();
scaledBmp.recycle();
return result;
}
//繪制邊框
private void drawBorder(Canvas canvas, int radius, int color) {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setFilterBitmap(true);
paint.setDither(true);
paint.setColor(color);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(mBorderWidth);
canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paint);
}
大功告成彰导！可以測(cè)試了。
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#cccccc"
android:padding="16dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jin.roundimageviewtest.MainActivity">
<com.example.jin.roundimageviewtest.RoundImageView
android:src="@mipmap/test"
android:layout_width="100dp"
android:layout_height="100dp" />
<com.example.jin.roundimageviewtest.RoundImageView
android:src="@mipmap/test"
android:layout_marginTop="16dp"
android:layout_width="100dp"
android:layout_height="100dp"
app:border_width="8dp"/>
<com.example.jin.roundimageviewtest.RoundImageView
android:src="@mipmap/test"
android:layout_marginTop="16dp"
android:layout_width="100dp"
android:layout_height="100dp"
app:border_width="8dp"
app:border_color="@color/colorAccent"/>
</LinearLayout>
展示效果
本文結(jié)束恼布，歡迎拍磚指教螺戳。
文章代碼下載
