Android自定義View圓形圖片控件代碼詳解

更新時(shí)間：2020年12月10日 10:57:15 作者：milovetingting

這篇文章主要介紹了Android自定義View圓形圖片控件代碼詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

在日常開發(fā)中，圓形的圖片效果還是很常見的?？梢酝ㄟ^給Paint設(shè)置Xfermode來實(shí)現(xiàn)，這里簡(jiǎn)單記錄如下。

實(shí)現(xiàn)

實(shí)現(xiàn)圓形效果的核心是PorterDuffXfermode,對(duì)于PorterDuffXfermode,這里不展開，可以查詢相關(guān)資料。

核心代碼

//繪制背景
canvas.drawCircle(mSize / 2, mSize / 2, mSize / 2, mPaint);
//設(shè)置模式為:顯示背景層和上層的交集，且顯示上層圖像
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//繪制要顯示的圖像
canvas.drawBitmap(mSrcBitmap, 0, 0, mPaint);
//重置Xfermode
mPaint.setXfermode(null);

自定義屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="CircleView">
    <!--定義資源-->
    <attr name="src" format="reference" />
    <!--定義類型-->
    <attr name="type" format="enum">
      <!--圓形-->
      <enum name="round" value="1" />
      <!--矩形-->
      <enum name="rect" value="2" />
    </attr>
  </declare-styleable>
</resources>

自定義控件

public class CircleView extends View {

  private static final int DEFAULT_SIZE = 200;

  private static final int DEFAULT_RADIUS = 20;

  private static final int TYPE_ROUND = 1;

  private static final int TYPE_RECT = 2;

  private int mSize;

  private int mResourceId;

  private int mType;

  private Paint mPaint;

  private Bitmap mSrcBitmap;

  public CircleView(Context context) {
    this(context, null);
  }

  public CircleView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleView);
    mResourceId = ta.getResourceId(R.styleable.CircleView_src, R.mipmap.ic_launcher);
    mType = ta.getInt(R.styleable.CircleView_type, TYPE_ROUND);
    ta.recycle();
    init();
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = getMeasureSize(widthMeasureSpec);
    int height = getMeasureSize(heightMeasureSpec);
    mSize = Math.min(width, height);
    setMeasuredDimension(mSize, mSize);
  }

  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //繪制背景
    if (mSrcBitmap == null) {
      mSrcBitmap = getScaleBitmap();
    }
    if (mType == TYPE_ROUND) {
      canvas.drawCircle(mSize / 2, mSize / 2, mSize / 2, mPaint);
    } else if (mType == TYPE_RECT) {
      canvas.drawRoundRect(0, 0, mSize, mSize, DEFAULT_RADIUS, DEFAULT_RADIUS, mPaint);
    }
    //設(shè)置模式為:顯示背景層和上層的交集，且顯示上層圖像
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    //繪制要顯示的圖像
    canvas.drawBitmap(mSrcBitmap, 0, 0, mPaint);
    //重置Xfermode
    mPaint.setXfermode(null);
  }

  private void init() {
    //禁用硬件加速,否則可能無法繪制圓形
    setLayerType(LAYER_TYPE_HARDWARE, null);
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
  }

  private int getMeasureSize(int measureSpec) {
    int mode = MeasureSpec.getMode(measureSpec);
    int size = MeasureSpec.getSize(measureSpec);
    return mode == MeasureSpec.EXACTLY ? size : DEFAULT_SIZE;
  }

  /**
   * 獲取縮放后的Bitmap
   *
   * @return
   */
  private Bitmap getScaleBitmap() {
    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeResource(getResources(), mResourceId, options);
    options.inSampleSize = calcSampleSize(options, mSize, mSize);
    options.inJustDecodeBounds = false;
    return BitmapFactory.decodeResource(getResources(), mResourceId, options);
  }

  /**
   * 計(jì)算縮放比例
   *
   * @param option
   * @param width
   * @param height
   * @return
   */
  private int calcSampleSize(BitmapFactory.Options option, int width, int height) {
    int originWidth = option.outWidth;
    int originHeight = option.outHeight;
    int sampleSize = 1;
    while ((originWidth = originWidth >> 1) > width && (originHeight = originHeight >> 1) > height) {
      sampleSize = sampleSize << 1;
    }
    return sampleSize;
  }
}

注意：如果沒有圓形的效果，那么可能需要禁用硬件加速：setLayerType(LAYER_TYPE_HARDWARE, null)

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center_horizontal"
  android:orientation="vertical"
  tools:context=".MainActivity">

  <com.wangyz.custom.CircleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    app:src="@drawable/image" />

  <com.wangyz.custom.CircleView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:src="@drawable/image" />

  <com.wangyz.custom.CircleView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp"
    app:src="@drawable/image"
    app:type="rect" />

</LinearLayout>

效果