本篇文章給大家分享的是有關(guān)Android中怎么通過(guò)自定義View實(shí)現(xiàn)圓形切圖效果，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)專注于蘆淞網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供蘆淞營(yíng)銷型網(wǎng)站建設(shè)，蘆淞網(wǎng)站制作、蘆淞網(wǎng)頁(yè)設(shè)計(jì)、蘆淞網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造蘆淞網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蘆淞網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

實(shí)現(xiàn)思路

使用一個(gè)Paint,將得到的Bitmap設(shè)置成paint的Shader,設(shè)置完成后,使用Matrix調(diào)整圖片至居中,使用RectF約束邊框,最后完成繪制

初始化Paint,設(shè)置Shader

private void init() {
  getBitmapFromDrawable();
  if (mBitmap == null) {
   return;
  }
  mShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

  // bitmap paint
  mFillPaint = new Paint();
  mFillPaint.setAntiAlias(true);
  mFillPaint.setStyle(Paint.Style.FILL);
  mFillPaint.setShader(mShader);

  // border paint
  mBoundPaint = new Paint();
  mBoundPaint.setAntiAlias(true);
  mBoundPaint.setStyle(Paint.Style.STROKE);
  mBoundPaint.setStrokeWidth(mBorderWidth);
  mBoundPaint.setColor(mBorderColor);

  // border rectF
  mBorderBound.set(calculateBitmapBound());

  // bitmap rectF
  mBitmapBound.set(calculateBitmapBound());
  mBitmapBound.inset(mBorderWidth - 10, mBorderWidth - 10);
  updateShaderMatrix();

 }

獲取Drawable

private Bitmap getBitmapFromDrawable() {
  Drawable drawable = getDrawable();
  if (drawable instanceof BitmapDrawable) {
   mBitmap = ((BitmapDrawable) drawable).getBitmap();
   mBitmapWidth = mBitmap.getWidth();
   mBitmapHeight = mBitmap.getHeight();
   return mBitmap;
  }
  return null;
 }

計(jì)算邊距

 /**
  * 計(jì)算Bitmap邊距
  */
 private RectF calculateBitmapBound() {
  int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
  int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
  int sideLength = Math.min(availableWidth, availableHeight); // 可用的直徑
  mRadius = sideLength / 2;

  int left = getPaddingLeft() + (availableWidth - sideLength) / 2;
  int top = getPaddingTop() + (availableHeight - sideLength) / 2;

  Log.d(TAG, "calculateBitmapBound: left >>> " + left + " top >>> " + top + " right >>> "
    + (left + sideLength) + " right >>> " + top + " bottom >>> " + (top + sideLength));
  return new RectF(left, top, left + sideLength, top + sideLength);
 }

調(diào)整Matrix,防止只顯示圖片邊角

 /**
  * 調(diào)整圖片縮放,目前只支持CenterCrop
  */
 private void updateShaderMatrix() {
  float scale;
  float dx = 0;
  float dy = 0;

  mShaderMatrix.set(null);

  // 調(diào)整縮放,使圖片居中
  if (mBitmapWidth * mBitmapBound.height() > mBitmapBound.width() * mBitmapHeight) {
   scale = mBitmapBound.height() / (float) mBitmapHeight;
   dx = (mBitmapBound.width() - mBitmapWidth * scale) * 0.5f;
  } else {
   scale = mBitmapBound.width() / (float) mBitmapWidth;
   dy = (mBitmapBound.height() - mBitmapHeight * scale) * 0.5f;
  }

  Log.d(TAG, "updateShaderMatrix: scale >>> " + scale);
  mShaderMatrix.setScale(scale, scale);
  // TODO: 16-10-15 http://chroya.iteye.com/blog/713869
  // 回到中心點(diǎn),便于下次縮放
  mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBitmapBound.left, (int) (dy + 0.5f) + mBitmapBound.top);

  mShader.setLocalMatrix(mShaderMatrix);
 }

onDraw

 @Override
 protected void onDraw(Canvas canvas) {
  if (mBitmap == null) {
   super.onDraw(canvas);
  }
  Log.d(TAG, "onDraw: centerX >>> " + mBitmapBound.centerX() + " centerY >>> " + mBitmapBound.centerY());
  canvas.drawCircle(mBitmapBound.centerX(), mBitmapBound.centerY(), mRadius, mFillPaint);
  // 繪制邊框
  canvas.drawCircle(mBorderBound.centerX(), mBorderBound.centerY(), mRadius, mBoundPaint);
 }

完整代碼

/**
 * Created by shixi_tianrui1 on 16-10-7.
 * 顯示圓形圖片的ImageView
 */

public class CircleImageView extends ImageView {

 private static final String TAG = "LOGGER";

 private BitmapShader mShader;
 private Paint mFillPaint; // 繪圖
 private Paint mBoundPaint; // 繪制圓邊

 private Bitmap mBitmap;
 private Drawable mDrawable;

 private int mBorderColor;  // 邊框顏色
 private float mBorderWidth;  // 邊框?qū)挾?

 private RectF mBorderBound = new RectF();
 private RectF mBitmapBound = new RectF();
 private Matrix mShaderMatrix = new Matrix();

 private int mRadius;
 private int mBitmapWidth;
 private int mBitmapHeight;

 private static final float DEFAULT_BORDER_WIDTH = 5;

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

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

 public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  TypedArray a = getResources().obtainAttributes(attrs, R.styleable.CircleImageView);
  mBorderColor = a.getColor(R.styleable.CircleImageView_borderColor, Color.BLUE);
  mBorderWidth = a.getDimension(R.styleable.CircleImageView_borderWidth, DEFAULT_BORDER_WIDTH);
  mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_borderWidth, 20);
  a.recycle();
 }

 private void init() {
  getBitmapFromDrawable();
  if (mBitmap == null) {
   return;
  }
  mShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

  // bitmap paint
  mFillPaint = new Paint();
  mFillPaint.setAntiAlias(true);
  mFillPaint.setStyle(Paint.Style.FILL);
  mFillPaint.setShader(mShader);

  // border paint
  mBoundPaint = new Paint();
  mBoundPaint.setAntiAlias(true);
  mBoundPaint.setStyle(Paint.Style.STROKE);
  mBoundPaint.setStrokeWidth(mBorderWidth);
  mBoundPaint.setColor(mBorderColor);

  // border rectF
  mBorderBound.set(calculateBitmapBound());

  // bitmap rectF
  mBitmapBound.set(calculateBitmapBound());
  mBitmapBound.inset(mBorderWidth - 10, mBorderWidth - 10);
  updateShaderMatrix();

 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  init();
 }

 /**
  * 計(jì)算Bitmap邊距
  */
 private RectF calculateBitmapBound() {
  int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
  int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
  int sideLength = Math.min(availableWidth, availableHeight); // 可用的直徑
  mRadius = sideLength / 2;

  int left = getPaddingLeft() + (availableWidth - sideLength) / 2;
  int top = getPaddingTop() + (availableHeight - sideLength) / 2;

  Log.d(TAG, "calculateBitmapBound: left >>> " + left + " top >>> " + top + " right >>> "
    + (left + sideLength) + " right >>> " + top + " bottom >>> " + (top + sideLength));
  return new RectF(left, top, left + sideLength, top + sideLength);
 }


 private Bitmap getBitmapFromDrawable() {
  Drawable drawable = getDrawable();
  if (drawable instanceof BitmapDrawable) {
   mBitmap = ((BitmapDrawable) drawable).getBitmap();
   mBitmapWidth = mBitmap.getWidth();
   mBitmapHeight = mBitmap.getHeight();
   return mBitmap;
  }
  return null;
 }

 @Override
 protected void onDraw(Canvas canvas) {
  if (mBitmap == null) {
   super.onDraw(canvas);
  }
  Log.d(TAG, "onDraw: centerX >>> " + mBitmapBound.centerX() + " centerY >>> " + mBitmapBound.centerY());
  canvas.drawCircle(mBitmapBound.centerX(), mBitmapBound.centerY(), mRadius, mFillPaint);
  // 繪制邊框
  canvas.drawCircle(mBorderBound.centerX(), mBorderBound.centerY(), mRadius, mBoundPaint);
 }


 /**
  * 調(diào)整圖片縮放,目前只支持CenterCrop
  */
 private void updateShaderMatrix() {
  float scale;
  float dx = 0;
  float dy = 0;

  mShaderMatrix.set(null);

  // 調(diào)整縮放,使圖片居中
  if (mBitmapWidth * mBitmapBound.height() > mBitmapBound.width() * mBitmapHeight) {
   scale = mBitmapBound.height() / (float) mBitmapHeight;
   dx = (mBitmapBound.width() - mBitmapWidth * scale) * 0.5f;
  } else {
   scale = mBitmapBound.width() / (float) mBitmapWidth;
   dy = (mBitmapBound.height() - mBitmapHeight * scale) * 0.5f;
  }

  Log.d(TAG, "updateShaderMatrix: scale >>> " + scale);
  mShaderMatrix.setScale(scale, scale);
  // TODO: 16-10-15 http://chroya.iteye.com/blog/713869
  // 回到中心點(diǎn),便于下次縮放
  mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBitmapBound.left, (int) (dy + 0.5f) + mBitmapBound.top);

  mShader.setLocalMatrix(mShaderMatrix);
 }
}

以上就是Android中怎么通過(guò)自定義View實(shí)現(xiàn)圓形切圖效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：Android中怎么通過(guò)自定義View實(shí)現(xiàn)圓形切圖效果
文章出自：http://www.chinadenli.net/article26/peeocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)、電子商務(wù)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)