Android自定义View实现圆形切图效果

更新时间：2021年01月28日 15:28:40 作者：yangtianrui95

这篇文章主要为大家详细介绍了Android自定义View实现圆形切图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用自定义View实现圆形ImageView的效果，具体内容如下

目前圆形边框还需要调整,这里有点问题

实现思路

使用一个Paint,将得到的Bitmap设置成paint的Shader,设置完成后,使用Matrix调整图片至居中,使用RectF约束边框,最后完成绘制

初始化Paint,设置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;
 }

计算边距

 /**
 * 计算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);
 }

调整Matrix,防止只显示图片边角

 /**
 * 调整图片缩放,目前只支持CenterCrop
 */
 private void updateShaderMatrix() {
 float scale;
 float dx = 0;
 float dy = 0;

 mShaderMatrix.set(null);

 // 调整缩放,使图片居中
 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
 // 回到中心点,便于下次缩放
 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; // 边框宽度

 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();
 }

 /**
 * 计算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);
 }


 /**
 * 调整图片缩放,目前只支持CenterCrop
 */
 private void updateShaderMatrix() {
 float scale;
 float dx = 0;
 float dy = 0;

 mShaderMatrix.set(null);

 // 调整缩放,使图片居中
 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
 // 回到中心点,便于下次缩放
 mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBitmapBound.left, (int) (dy + 0.5f) + mBitmapBound.top);

 mShader.setLocalMatrix(mShaderMatrix);
 }
}

目前仍有点问题，解决后会及时更新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Android自定义View用切图显示字符串

Kotlin Flow数据流的3种使用场景详解
这篇文章主要为大家详细介绍了Kotlin中Flow数据流的几种使用场景，文中的示例代码讲解详细，具有一定的借鉴价值，需要的可以参考一下
2023-04-04
Android shape与selector标签使用详解
Android中提供一种xml的方式，让我们可以自由地定义背景，比较常用的就是shape标签和selector标签，这篇文章主要介绍了Android shape与selector标签使用,需要的朋友可以参考下
2022-05-05
android实现App活动定时自动跳转效果
本篇文章主要介绍了android实现App活动定时自动跳转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
Android用Scroller实现一个可向上滑动的底部导航栏
本篇文章主要介绍了Android用Scroller实现一个可上滑的底部导航栏，具有一定的参考价值，有兴趣的小伙伴们可以参考一下
2017-07-07
Android图片上传实现预览效果
这篇文章主要介绍了Android图片上传实现预览效果的相关资料,需要的朋友可以参考下
2016-01-01
Android中利用动态加载实现手机淘宝的节日特效
这篇文章主要介绍了Android中利用动态加载实现手机淘宝的节日特效,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12
Android中的缓存与文件存储目录详解
在Android应用开发中,合理管理应用的数据存储至关重要,本文将详细介绍cacheDir, filesDir, externalCacheDir, 以及getExternalFilesDir(Environment.DIRECTORY_PICTURES)这几个目录的用途和区别,感兴趣的朋友跟随小编一起看看吧
2024-07-07
基于VSTS的Xamarin.Android持续集成步骤详解
这篇文章主要介绍了基于VSTS的Xamarin.Android持续集成步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
Android转场效果实现示例浅析
这篇文章主要为大家介绍了Android转场效果实现示例浅析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
android studio2.3如何编译动态库的过程详解
这篇文章主要给大家介绍了关于android studio 2.3如何编译动态库的过程，文中通过示例代码介绍的非常详细，对各位Android开发者们具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-08-08

Android自定义View实现圆形切图效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具