Android自定義View之繪制圓形頭像功能

更新時(shí)間：2019年09月17日 09:35:58 作者：黃林晴

這篇文章主要介紹了Android自定義View之繪制圓形頭像功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

做APP應(yīng)用開發(fā)的時(shí)候，用戶頭像肯定是必不可少的，但是90%以上的需求頭像都是圓形的。那么，如何通過自定義View的方式實(shí)現(xiàn)圓形頭像呢，那么，本片博文會(huì)告訴你不僅僅是實(shí)現(xiàn)過程。一定會(huì)有意想不到的收獲哦！

最終效果

國際慣例，我們先來看最終實(shí)現(xiàn)的效果圖

自定義RoundImageView繼承自ImageView

public class RoundImageView extends ImageView {
  public RoundImageView(Context context) {
    super(context);
  }
  public RoundImageView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
  }
  public RoundImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }
}

不知你是否注意過每當(dāng)我們繼承自View的時(shí)候，系統(tǒng)都會(huì)提示我們覆蓋重寫4個(gè)構(gòu)造方法，這里我們只覆蓋了三個(gè)，然后就開始在每個(gè)構(gòu)造方法中進(jìn)行初始化，那么，是不是每次都會(huì)調(diào)用所有的構(gòu)造方法呢，如果不是，這三個(gè)構(gòu)造方法又會(huì)什么時(shí)候調(diào)用呢？下面我們來通過例子來驗(yàn)證。

使用自定義View無非就兩種情況下，第一種就是直接在xml布局中使用，另一種就是在Activity中new出來，下面我們分別使用上述兩種方式，為了便于觀察我們?cè)谌齻€(gè)構(gòu)造方法中分別加入一行打印。

首先我們?cè)趚ml直接使用，運(yùn)行打印如下:

com.example.roundimageview D/RoundImageView: RoundImageView: 兩個(gè)參數(shù)的構(gòu)造方法

然后我們?cè)贏ctivity中，new一個(gè)RoundImageView

roundImageView = RoundImageView(this@MainActivity)
roundImageView = RoundImageView(this@MainActivity, null)
roundImageView = RoundImageView(this@MainActivity, null,0)

運(yùn)行打印日志如下：

結(jié)論：自定義View當(dāng)在xml中使用，使用的是第二個(gè)構(gòu)造方法，當(dāng)在Activity中使用時(shí)，實(shí)例化時(shí)傳入幾個(gè)參數(shù)調(diào)用的就是含有幾個(gè)參數(shù)的構(gòu)造方法。

實(shí)現(xiàn)圓形頭像的思想

我始終認(rèn)為自定義View的難度只在于它的實(shí)現(xiàn)思想，通常我們遇到問題的時(shí)候，并不是Google不到，而是壓根就不知道這個(gè)問題該去如何Google，如果知道了問題所產(chǎn)生的原因，其實(shí)問題已經(jīng)迎刃而解了，最怕的是不知道問題為什么會(huì)產(chǎn)生。

實(shí)現(xiàn)圓形頭像的思想一個(gè)簡單的圖就可以表示了。

矩形區(qū)域是完整的圖片，圓形區(qū)域就是我們最終顯示的頭像區(qū)域，那么就很簡單了，圓形區(qū)域與矩形區(qū)域相交，取并集區(qū)域？在矩形中畫一個(gè)與矩形長或?qū)捪嗲械膱A，而圓的直徑是長或?qū)捿^短的一邊。

編碼實(shí)現(xiàn)

獲取原有頭像的bitmap

首先我們需要獲取設(shè)置頭像的bitmap，我們可以直接通過API來獲取設(shè)置的圖片資源，

drawable = this.getDrawable();

再將圖片資源轉(zhuǎn)化為bitmap

首先我們判斷drawable是否為空，如果為空說明用戶沒有設(shè)置，拋出資源未找到的異常。

if (drawable == null) {
  throw new Resources.NotFoundException("Image resource not set");
}

如果不為空，我們創(chuàng)建一個(gè)與圖片資源大小相等的bitmap，并將bitmap繪制出來，代碼如下所示：

bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(),
    Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(),
    drawable.getIntrinsicHeight());
drawable.draw(canvas);

繪制圓形bitmap

通過上面的代碼，我們得到了原有的bitmap圖像，緊接著我們需要繪制圓形的bitmap，與上面類似，首先創(chuàng)建一個(gè)和bitmap大小一致的位圖

circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);

我們畫一個(gè)與bitmap等大的矩形

Paint paint = new Paint();
Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
canvas.drawRect(rect,paint);
RectF rectF = new RectF(rect);

將較短的一邊設(shè)置圓的半徑

float roundRa = 0.0f;
if (bitmap.getWidth() > bitmap.getHeight()) {
  roundRa = bitmap.getHeight() / 2.0f;
} else {
  roundRa = bitmap.getWidth() / 2.0f;
}

設(shè)置paint和canvas屬性

paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.WHITE);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

canvas.drawARGB將繪制裁剪設(shè)為透明，paint.setXfermode中的PorterDuffXfermode類很強(qiáng)大，后面我們會(huì)單獨(dú)一篇文章講解。

最終我們重新將bitmap繪制出來即可

canvas.drawBitmap(bitmap, rect, rect, paint);

繪制部分完整代碼如下所示：

* 獲取圓形裁剪的bitmap
 *
 * @param bitmap 原bitmap
 */
private Bitmap getCircleBitmap(Bitmap bitmap) {
  circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(circleBitmap);
  Paint paint = new Paint();
  Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  RectF rectF = new RectF(rect);
  float roundRa = 0.0f;
  if (bitmap.getWidth() > bitmap.getHeight()) {
    roundRa = bitmap.getHeight() / 2.0f;
  } else {
    roundRa = bitmap.getWidth() / 2.0f;
  }
  paint.setAntiAlias(true);
  canvas.drawARGB(0, 0, 0, 0);
  paint.setColor(Color.GRAY);
  canvas.drawRoundRect(rectF, roundRa, roundRa, paint);
  paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  canvas.drawBitmap(bitmap, rect, rect, paint);
  return circleBitmap;
}

設(shè)置最終的bitmap

得到bitma后我們直接重新設(shè)置即可顯示

 setImageBitmap(getCircleBitmap(bitmap));

本實(shí)例較為簡單，就不貼所有代碼了，如有需要留言郵箱即可，如有紕漏之處，歡迎指正！晚安！

9.15 22:17 更新

代碼已上傳github：https://github.com/huanglinqing123/RoundImageView

總結(jié)

以上所述是小編給大家介紹的Android自定義View之繪制圓形頭像功能,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: