Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android自定義控件之圓形/圓角的實現代碼

Android自定義控件之圓形/圓角的實現代碼

編輯：關於Android編程

一、問題在哪裡？

問題來源於app開發中一個很常見的場景——用戶頭像要展示成圓的：

 二、怎麼搞？

機智的我，第一想法就是，切一張中間圓形透明、四周與底色相同、尺寸與頭像相同的蒙板圖片，蓋在頭像上不就完事了嘛，哈哈哈！

在背景純色的前提下，這的確能簡單解決問題，但是如果背景沒有這麼簡單呢？

在這種不規則背景下，有兩個問題：

1)、背景圖常常是適應手機寬度縮放，而頭像的尺寸又是固定寬高DP的，所以固定的蒙板圖片是沒法保證在不同機型上都和背景圖案吻合的。

2)、在這種非純色背景下，哪天想調整一下頭像位置就得重新換圖片蒙板，實在是太難維護了……

所以呢，既然頭像圖片肯定是方的，那就就讓ImageView圓起來吧。

三、開始干活

基本思路是，自定義一個ImageView，通過重寫onDraw方法畫出一個圓形的圖片來：

public class ImageViewPlus extends ImageView{
 private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
 private Bitmap mRawBitmap;
 private BitmapShader mShader;
 private Matrix mMatrix = new Matrix();
 
 public ImageViewPlus(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 Bitmap rawBitmap = getBitmap(getDrawable());
 if (rawBitmap != null){
  int viewWidth = getWidth();
  int viewHeight = getHeight();
  int viewMinSize = Math.min(viewWidth, viewHeight);
  float dstWidth = viewMinSize;
  float dstHeight = viewMinSize;
  if (mShader == null || !rawBitmap.equals(mRawBitmap)){
  mRawBitmap = rawBitmap;
  mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
  }
  if (mShader != null){
  mMatrix.setScale(dstWidth / rawBitmap.getWidth(), dstHeight / rawBitmap.getHeight());
  mShader.setLocalMatrix(mMatrix);
  }
  mPaintBitmap.setShader(mShader);
  float radius = viewMinSize / 2.0f;
  canvas.drawCircle(radius, radius, radius, mPaintBitmap);
 } else {
  super.onDraw(canvas);
 }
 }

 private Bitmap getBitmap(Drawable drawable){
 if (drawable instanceof BitmapDrawable){
  return ((BitmapDrawable)drawable).getBitmap();
 } else if (drawable instanceof ColorDrawable){
  Rect rect = drawable.getBounds();
  int width = rect.right - rect.left;
  int height = rect.bottom - rect.top;
  int color = ((ColorDrawable)drawable).getColor();
  Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
  return bitmap;
 } else {
  return null;
 }
 }
}

分析一下代碼：

 canvas.drawCircle 決定了畫出來的形狀是圓形，而圓形的內容則是通過 mPaintBitmap.setShader 搞定的。

其中，BitmapShader需要設置Bitmap填充ImageView的方式(CLAMP：拉伸邊緣, MIRROR：鏡像, REPEAT：整圖重復)。

這裡其實設成什麼不重要，因為我們實際需要的是將Bitmap按比例縮放成跟ImageView一樣大，而不是預置的三種效果。

所以，別忘了 mMatrix.setScale 和 mShader.setLocalMatrix 一起用，將圖片縮放一下。

四、更多玩法 —— 支持邊框

看下面的效果圖，如果想給圓形的頭像上加一個邊框，該怎麼搞呢？

public class ImageViewPlus extends ImageView{
 private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
 private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
 private Bitmap mRawBitmap;
 private BitmapShader mShader;
 private Matrix mMatrix = new Matrix();
 private float mBorderWidth = dip2px(15);
 private int mBorderColor = 0xFF0080FF;
 
 public ImageViewPlus(Context context, AttributeSet attrs) {
 super(context, attrs);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 Bitmap rawBitmap = getBitmap(getDrawable());
 if (rawBitmap != null){
  int viewWidth = getWidth();
  int viewHeight = getHeight();
  int viewMinSize = Math.min(viewWidth, viewHeight);
  float dstWidth = viewMinSize;
  float dstHeight = viewMinSize;
  if (mShader == null || !rawBitmap.equals(mRawBitmap)){
  mRawBitmap = rawBitmap;
  mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
  }
  if (mShader != null){
  mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
  mShader.setLocalMatrix(mMatrix);
  }
  mPaintBitmap.setShader(mShader);
  mPaintBorder.setStyle(Paint.Style.STROKE);
  mPaintBorder.setStrokeWidth(mBorderWidth);
  mPaintBorder.setColor(mBorderColor);
  float radius = viewMinSize / 2.0f;
  canvas.drawCircle(radius, radius, radius - mBorderWidth / 2.0f, mPaintBorder);
  canvas.translate(mBorderWidth, mBorderWidth);
  canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
 } else {
  super.onDraw(canvas);
 }
 }

 private Bitmap getBitmap(Drawable drawable){
 if (drawable instanceof BitmapDrawable){
  return ((BitmapDrawable)drawable).getBitmap();
 } else if (drawable instanceof ColorDrawable){
  Rect rect = drawable.getBounds();
  int width = rect.right - rect.left;
  int height = rect.bottom - rect.top;
  int color = ((ColorDrawable)drawable).getColor();
  Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
  return bitmap;
 } else {
  return null;
 }
 }
 
 private int dip2px(int dipVal)
 {
 float scale = getResources().getDisplayMetrics().density;
 return (int)(dipVal * scale + 0.5f);
 }
}

看代碼中，加邊框實際上就是用實心純色的 Paint 畫了一個圓邊，在此基礎上畫上原來的頭像即可。

需要的注意的地方有三個：

1)、圓框的半徑不是 radius ，而應該是 radius - mBorderWidth / 2.0f 。想象著拿著筆去畫線，線其實是畫在右圖中白色圈的位置，只不過它很粗。

2)、在ImageView大小不變的基礎上，頭像的實際大小要比沒有邊框的時候小了，所以 mMatrix.setScale 的時候要把邊框的寬度去掉。

3)、畫頭像Bitmap的時候不能直接 canvas.drawCircle(radius, radius, radius - mBorderWidth, mPaintBitmap) ，這樣你會發現頭像的右側和下方邊緣被拉伸了（右圖）

   　　為什麼呢？因為 Paint 默認是以左上角為基准開始繪制的，此時頭像的實際區域是右圖中的紅框，而超過紅框的部分（圓形的右側和下方），自然被 TileMode.CLAMP效果沿邊緣拉伸了。

   　　所以，需要通過挪動坐標系的位置和調整圓心，才能把頭像畫在正確的區域（右圖綠框）中。

五、更多玩法 —— 支持xml配置

既然有了邊框，那如果想配置邊框的寬度和顏色該如何是好呢？

基本上兩個思路：

1)給ImageViewPlus加上set接口，設置完成之後通過 invalidate(); 重繪一下即可；

2)在xml裡就支持配置一些自定義屬性，這樣用起來會方便很多。

這裡重點說一下支持xml配置自定義屬性。

自定義控件要支持xml配置自定義屬性的話，首先需要在 \res\values 裡去定義屬性： 

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <attr name="borderColor" format="color" />
 <attr name="borderWidth" format="dimension" />

 <declare-styleable name="ImageViewPlus"> 
 <attr name="borderColor" />
 <attr name="borderWidth" />
 </declare-styleable> 
</resources>

View attrs_imageviewplus.xml
 然後在ImageViewPlus的構造函數中去讀取這些自定義屬性：

private static final int DEFAULT_BORDER_COLOR = Color.TRANSPARENT;
 private static final int DEFAULT_BORDER_WIDTH = 0;
 
 public ImageViewPlus(Context context, AttributeSet attrs) {
 super(context, attrs);
 //取xml文件中設定的參數
 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ImageViewPlus);
 mBorderColor = ta.getColor(R.styleable.ImageViewPlus_borderColor, DEFAULT_BORDER_COLOR);
 mBorderWidth = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_borderWidth, dip2px(DEFAULT_BORDER_WIDTH));
 ta.recycle();
 }

 在xml布局中使用自定義屬性：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/wallpaper"
 android:orientation="vertical"
 tools:context="${relativePackage}.${activityClass}" >
 
 <cc.snser.imageviewplus.ImageViewPlus
 android:id="@+id/imgplus"
 android:layout_width="200dp"
 android:layout_height="300dp"
 android:layout_marginBottom="50dp"
 android:layout_centerHorizontal="true"
 android:layout_alignParentBottom="true"
 android:src="@drawable/img_square"
 snser:borderColor="#FF0080FF"
 snser:borderWidth="15dp" />
 
</RelativeLayout>

六、更多玩法 —— 圓角ImageView

搞定了圓形ImageView以及對應的邊框，那如何實現下面這種圓角的ImageView呢？

 

其實原理上一樣，把 canvas.drawCircle 對應改成 canvas.drawRoundRect 就OK了，直接貼代碼吧：

public class ImageViewPlus extends ImageView{
 /**
 * android.widget.ImageView
 */
 public static final int TYPE_NONE = 0;
 /**
 * 圓形
 */
 public static final int TYPE_CIRCLE = 1;
 /**
 * 圓角矩形
 */
 public static final int TYPE_ROUNDED_RECT = 2; 
 
 private static final int DEFAULT_TYPE = TYPE_NONE;
 private static final int DEFAULT_BORDER_COLOR = Color.TRANSPARENT;
 private static final int DEFAULT_BORDER_WIDTH = 0;
 private static final int DEFAULT_RECT_ROUND_RADIUS = 0;
 
 private int mType;
 private int mBorderColor;
 private int mBorderWidth;
 private int mRectRoundRadius;
 
 private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
 private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
 
 private RectF mRectBorder = new RectF();
 private RectF mRectBitmap = new RectF();
 
 private Bitmap mRawBitmap;
 private BitmapShader mShader;
 private Matrix mMatrix = new Matrix();
 
 public ImageViewPlus(Context context, AttributeSet attrs) {
 super(context, attrs);
 //取xml文件中設定的參數
 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ImageViewPlus);
 mType = ta.getInt(R.styleable.ImageViewPlus_type, DEFAULT_TYPE);
 mBorderColor = ta.getColor(R.styleable.ImageViewPlus_borderColor, DEFAULT_BORDER_COLOR);
 mBorderWidth = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_borderWidth, dip2px(DEFAULT_BORDER_WIDTH));
 mRectRoundRadius = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_rectRoundRadius, dip2px(DEFAULT_RECT_ROUND_RADIUS));
 ta.recycle();
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
 Bitmap rawBitmap = getBitmap(getDrawable());
 
 if (rawBitmap != null && mType != TYPE_NONE){
  int viewWidth = getWidth();
  int viewHeight = getHeight();
  int viewMinSize = Math.min(viewWidth, viewHeight);
  float dstWidth = mType == TYPE_CIRCLE ? viewMinSize : viewWidth;
  float dstHeight = mType == TYPE_CIRCLE ? viewMinSize : viewHeight;
  float halfBorderWidth = mBorderWidth / 2.0f;
  float doubleBorderWidth = mBorderWidth * 2;
  
  if (mShader == null || !rawBitmap.equals(mRawBitmap)){
  mRawBitmap = rawBitmap;
  mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
  }
  if (mShader != null){
  mMatrix.setScale((dstWidth - doubleBorderWidth) / rawBitmap.getWidth(), (dstHeight - doubleBorderWidth) / rawBitmap.getHeight());
  mShader.setLocalMatrix(mMatrix);
  }
  
  mPaintBitmap.setShader(mShader);
  mPaintBorder.setStyle(Paint.Style.STROKE);
  mPaintBorder.setStrokeWidth(mBorderWidth);
  mPaintBorder.setColor(mBorderWidth > 0 ? mBorderColor : Color.TRANSPARENT);
  
  if (mType == TYPE_CIRCLE){
  float radius = viewMinSize / 2.0f;
  canvas.drawCircle(radius, radius, radius - halfBorderWidth, mPaintBorder);
  canvas.translate(mBorderWidth, mBorderWidth);
  canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
  } else if (mType == TYPE_ROUNDED_RECT){
  mRectBorder.set(halfBorderWidth, halfBorderWidth, dstWidth - halfBorderWidth, dstHeight - halfBorderWidth);
  mRectBitmap.set(0.0f, 0.0f, dstWidth - doubleBorderWidth, dstHeight - doubleBorderWidth);
  float borderRadius = mRectRoundRadius - halfBorderWidth > 0.0f ? mRectRoundRadius - halfBorderWidth : 0.0f;
  float bitmapRadius = mRectRoundRadius - mBorderWidth > 0.0f ? mRectRoundRadius - mBorderWidth : 0.0f;
  canvas.drawRoundRect(mRectBorder, borderRadius, borderRadius, mPaintBorder);
  canvas.translate(mBorderWidth, mBorderWidth);
  canvas.drawRoundRect(mRectBitmap, bitmapRadius, bitmapRadius, mPaintBitmap);
  }
 } else {
  super.onDraw(canvas);
 }
 }

 private int dip2px(int dipVal)
 {
 float scale = getResources().getDisplayMetrics().density;
 return (int)(dipVal * scale + 0.5f);
 }
 
 private Bitmap getBitmap(Drawable drawable){
 if (drawable instanceof BitmapDrawable){
  return ((BitmapDrawable)drawable).getBitmap();
 } else if (drawable instanceof ColorDrawable){
  Rect rect = drawable.getBounds();
  int width = rect.right - rect.left;
  int height = rect.bottom - rect.top;
  int color = ((ColorDrawable)drawable).getColor();
  Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);
  canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
  return bitmap;
 } else {
  return null;
 }
 }
}

View ImageViewPlus.java 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/wallpaper"
 android:orientation="vertical"
 tools:context="${relativePackage}.${activityClass}" >
 
 <cc.snser.imageviewplus.ImageViewPlus
 android:id="@+id/imgplus"
 android:layout_width="200dp"
 android:layout_height="300dp"
 android:layout_marginBottom="50dp"
 android:layout_centerHorizontal="true"
 android:layout_alignParentBottom="true"
 android:src="@drawable/img_rectangle"
 snser:type="rounded_rect"
 snser:borderColor="#FF0080FF"
 snser:borderWidth="10dp"
 snser:rectRoundRadius="30dp" />
 
</RelativeLayout>

View layout 



<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <attr name="type"> 
 <enum name="none" value="0" /> 
 <enum name="circle" value="1" /> 
 <enum name="rounded_rect" value="2" />
 </attr>
 <attr name="borderColor" format="color" />
 <attr name="borderWidth" format="dimension" />
 <attr name="rectRoundRadius" format="dimension" />

 <declare-styleable name="ImageViewPlus"> 
 <attr name="type" />
 <attr name="borderColor" />
 <attr name="borderWidth" />
 <attr name="rectRoundRadius" />
 </declare-styleable>
</resources> 

View attrs_imageviewplus.xml

以上就是本文的全部內容，希望對大家學習Android軟件編程有所幫助。

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
微信被人舉報後怎麼解除 微信被舉報解除方法 關於android自定義view的方法 Android逆向之旅---Android中的sharedUserId屬性詳解 Android多線程研究（2）——定時器 Android自定義ViewGroup實現受邊界限制的滾動操作（3） Android系統服務
4.1、Android Stuido配置你的Build Variant

每個版本的build variant代表了你可以構建的每一個版本。雖然你
Android ViewPager畫廊效果詳解及實例

Android ViewPager 畫廊效果從上面的圖片可以看到，當添加
Android進階 MVP設計模式實例

MVP（Model View Presenter）的設計模式是從MVC中
Android下拉刷新控件SwipeRefreshLayout源碼解析

SwipeRefreshLayout是Android官方的下拉刷新控件，
閱讀排行版
Copyright © Android教程網 All Rights Reserved