Android 圆形/圆角图片的方法

Android 圆形/圆角图片的方法

眼下网上有非常多圆角图片的实例，Github上也有一些成熟的项目。之前做项目，为了稳定高效都是选用Github上的项目直接用。但这样的结束也是Android开发必备技能 。所以今天就来简单研究一下该技术，分享给大家。

预备知识：

Xfermode介绍：

以下是Android ApiDemo里的“Xfermodes”实例，效果图。

Android 圆形/圆角图片的方法

Xfermode有三个子类。结构例如以下：

view sourceprint?

1.publicclass
2.Xfermode
3.extendsObject
4.java.lang.Object
5.?

    android.graphics.Xfermode
6.Known Direct Subclasses
7.AvoidXfermode, PixelXorXfermode, PorterDuffXfermode

AvoidXfermode 指定了一个颜色和容差，强制Paint避免在它上面画图(或者仅仅在它上面画图)。

PixelXorXfermode 当覆盖已有的颜色时。应用一个简单的像素异或操作。

PorterDuffXfermode 这是一个很强大的转换模式，使用它，能够使用图像合成的16条Porter-Duff规则的随意一条来控制Paint怎样与已有的Canvas图像进行交互。


上面图片种显示的16种模式介绍例如以下：

1.PorterDuff.Mode.CLEAR

所绘制不会提交到画布上。


2.PorterDuff.Mode.SRC

显示上层绘制图片
3.PorterDuff.Mode.DST

显示下层绘制图片
4.PorterDuff.Mode.SRC_OVER

正常绘制显示。上下层绘制叠盖。
5.PorterDuff.Mode.DST_OVER

上下层都显示。

下层居上显示。


6.PorterDuff.Mode.SRC_IN

取两层绘制交集。显示上层。
7.PorterDuff.Mode.DST_IN

取两层绘制交集。显示下层。
8.PorterDuff.Mode.SRC_OUT

取上层绘制非交集部分。


9.PorterDuff.Mode.DST_OUT

取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP

取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP

取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR

异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN

取两图层所有区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN

取两图层所有。点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY

取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN

取两图层所有区域，交集部分变为透明色


了解了上面的知识点后，我们依据上面的知识点先来实现第一种圆角图片制作方式：

原图：

Android 圆形/圆角图片的方法

先看这一段代码

view sourceprint?
01.privateImageView mImg;
02. 
03.@Override
04.protectedvoid onCreate(Bundle savedInstanceState) {
05.super.onCreate(savedInstanceState);
06.setContentView(R.layout.activity_main);
07.mImg = (ImageView) findViewById(R.id.img);
08. 
09.//获得imageview中设置的图片
10.BitmapDrawable drawable = (BitmapDrawable) mImg.getDrawable();
11.Bitmap bmp = drawable.getBitmap();
12.//获得图片的宽，并创建结果bitmap
13.intwidth = bmp.getWidth();
14.Bitmap resultBmp = Bitmap.createBitmap(width, width,
15.Bitmap.Config.ARGB_8888);
16.Paint paint =new Paint();
17.Canvas canvas =new Canvas(resultBmp);
18.//画圆
19.canvas.drawCircle(width /2, width / 2, width /2, paint);
20.paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_IN));// 选择交集去上层图片
21.canvas.drawBitmap(bmp,0, 0, paint);
22.mImg.setImageBitmap(resultBmp);
23.bmp.recycle();
24. 
25.}

通过执行上面的代码，我们得出的结果例如以下：

Android 圆形/圆角图片的方法

大家看到这是我们须要的结果。但是这样做可能导致OutOfMomery异常。假如图片非常大或者你可能并不是通过ImageView的getDrawable获得图像，而是直接Decode一张非常大的图片载入到内存，你会发现可能会出现异常。我们做一下改变。

view sourceprint?
01.privatestatic final String TAG = "RoundImage";
02.privateImageView mImg;
03. 
04.@Override
05.protectedvoid onCreate(Bundle savedInstanceState) {
06.super.onCreate(savedInstanceState);
07.setContentView(R.layout.activity_main);
08.mImg = (ImageView) findViewById(R.id.img);
09.// 裁剪图片
10.BitmapFactory.Options options =new BitmapFactory.Options();
11.options.inJustDecodeBounds =true;
12.BitmapFactory
13..decodeResource(getResources(), R.drawable.avatar, options);
14.Log.d(TAG,"original outwidth: " + options.outWidth);
15.// 此宽度是目标ImageView希望的大小，你能够自己定义ImageView。然后获得ImageView的宽度。
16.intdstWidth = 150;
17.// 我们须要载入的图片可能非常大，我们先对原有的图片进行裁剪
18.intsampleSize = calculateInSampleSize(options, dstWidth, dstWidth);
19.options.inSampleSize = sampleSize;
20.options.inJustDecodeBounds =false;
21.Log.d(TAG,"sample size: " + sampleSize);
22.Bitmap bmp = BitmapFactory.decodeResource(getResources(),
23.R.drawable.avatar, options);
24. 
25.// 绘制图片
26.Bitmap resultBmp = Bitmap.createBitmap(dstWidth, dstWidth,
27.Bitmap.Config.ARGB_8888);
28.Paint paint =new Paint();
29.paint.setAntiAlias(true);
30.Canvas canvas =new Canvas(resultBmp);
31.// 画圆
32.canvas.drawCircle(dstWidth /2, dstWidth / 2, dstWidth /2, paint);
33.// 选择交集去上层图片
34.paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.SRC_IN));
35.canvas.drawBitmap(bmp,new Rect(0,0, bmp.getWidth(), bmp.getWidth()),
36.newRect(0,0, dstWidth, dstWidth), paint);
37.mImg.setImageBitmap(resultBmp);
38.bmp.recycle();
39.}
40. 
41.privateint calculateInSampleSize(BitmapFactory.Options options,
42.intreqWidth, int reqHeight) {
43.// Raw height and width of image
44.finalint height = options.outHeight;
45.finalint width = options.outWidth;
46.intinSampleSize = 1;
47. 
48.if(height > reqHeight || width > reqWidth) {
49. 
50.finalint halfHeight = height / 2;
51.finalint halfWidth = width / 2;
52. 
53.// Calculate the largest inSampleSize value that is a power of 2 and
54.// keeps both
55.// height and width larger than the requested height and width.
56.while((halfHeight / inSampleSize) > reqHeight
57.&& (halfWidth / inSampleSize) > reqWidth) {
58.inSampleSize *=2;
59.}
60.}
61.returninSampleSize;
62.}

再来看一下效果：

Android 圆形/圆角图片的方法

上面提供了一种方式，很多其它细节，须要你自己去优化，以下介绍另外一种绘制圆角图片的方式。

首先我们须要了解一个类BitmapShader

引用的介绍例如以下：

public BitmapShader(Bitmap bitmap,Shader.TileMode tileX,Shader.TileMode tileY)

调用这种方法来产生一个画有一个位图的渲染器（Shader）。

bitmap 在渲染器内使用的位图

tileX The tiling mode for x to draw the bitmap in. 在位图上X方向花砖模式

tileY The tiling mode for y to draw the bitmap in. 在位图上Y方向花砖模式

TileMode：（一共同拥有三种）

CLAMP ：假设渲染器超出原始边界范围。会复制范围内边缘染色。

REPEAT ：横向和纵向的反复渲染器图片，平铺。

MIRROR ：横向和纵向的反复渲染器图片，这个和REPEAT 反复方式不一样，他是以镜像方式平铺。

知道这个原理后，我们贴出相应的代码：
view sourceprint?

01.publicclass CircleImageView extendsImageView {
02. 
03.privatestatic final String TAG = CircleImageView.class.getSimpleName();
04.privatePaint mBitmapPaint = new Paint();
05.privateint mRadius;
06. 
07.publicCircleImageView(Context context, AttributeSet attrs, intdefStyleAttr) {
08.super(context, attrs, defStyleAttr);
09.init();
10.}
11. 
12.publicCircleImageView(Context context, AttributeSet attrs) {
13.super(context, attrs);
14.init();
15.}
16. 
17.publicCircleImageView(Context context) {
18.super(context);
19.init();
20.}
21. 
22.privatevoid init() {
23.BitmapDrawable drawable = (BitmapDrawable) getDrawable();
24.if(drawable == null) {
25.Log.i(TAG,"drawable: null");
26.return;
27.}
28.Bitmap bmp = drawable.getBitmap();
29.BitmapShader shader =new BitmapShader(bmp, TileMode.CLAMP,
30.TileMode.CLAMP);
31.mBitmapPaint.setShader(shader);
32.mBitmapPaint.setAntiAlias(true);
33.invalidate();
34.}
35. 
36.@Override
37.protectedvoid onDraw(Canvas canvas) {
38.if(getDrawable() == null) {
39.return;
40.}
41.mRadius = Math.min(getWidth()/2, getHeight()/2);
42.canvas.drawCircle(getWidth() /2, getHeight() / 2, mRadius,
43.mBitmapPaint);
44.}
45. 
46.}

是不是挺简单的

结果我就不显示了，跟上面的一样。

上面也是最原始的代码，文章的结尾贴出一份完整优化过的代码共大家參考例如以下：

view sourceprint?

001.publicclass CircleImageView extendsImageView {
002. 
003.privatestatic final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
004. 
005.privatestatic final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
006.privatestatic final int COLORDRAWABLE_DIMENSION = 1;
007. 
008.privatestatic final int DEFAULT_BORDER_WIDTH = 0;
009.privatestatic final int DEFAULT_BORDER_COLOR = Color.BLACK;
010. 
011.privatefinal RectF mDrawableRect = new RectF();
012.privatefinal RectF mBorderRect = new RectF();
013. 
014.privatefinal Matrix mShaderMatrix = new Matrix();
015.privatefinal Paint mBitmapPaint = new Paint();
016.privatefinal Paint mBorderPaint = new Paint();
017. 
018.privateint mBorderColor = DEFAULT_BORDER_COLOR;
019.privateint mBorderWidth = DEFAULT_BORDER_WIDTH;
020. 
021.privateBitmap mBitmap;
022.privateBitmapShader mBitmapShader;
023.privateint mBitmapWidth;
024.privateint mBitmapHeight;
025. 
026.privatefloat mDrawableRadius;
027.privatefloat mBorderRadius;
028. 
029.privateboolean mReady;
030.privateboolean mSetupPending;
031. 
032.publicCircleImageView(Context context) {
033.super(context);
034. 
035.init();
036.}
037. 
038.publicCircleImageView(Context context, AttributeSet attrs) {
039.this(context, attrs,0);
040.}
041. 
042.publicCircleImageView(Context context, AttributeSet attrs, intdefStyle) {
043.super(context, attrs, defStyle);
044. 
045.TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView, defStyle,0);
046. 
047.mBorderWidth = a.getDimensionPixelSize(R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH);
048.mBorderColor = a.getColor(R.styleable.CircleImageView_border_color, DEFAULT_BORDER_COLOR);
049. 
050.a.recycle();
051. 
052.init();
053.}
054. 
055.privatevoid init() {
056.super.setScaleType(SCALE_TYPE);
057.mReady =true;
058. 
059.if(mSetupPending) {
060.setup();
061.mSetupPending =false;
062.}
063.}
064. 
065.@Override
066.publicScaleType getScaleType() {
067.returnSCALE_TYPE;
068.}
069. 
070.@Override
071.publicvoid setScaleType(ScaleType scaleType) {
072.if(scaleType != SCALE_TYPE) {
073.thrownew IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
074.}
075.}
076. 
077.@Override
078.protectedvoid onDraw(Canvas canvas) {
079.if(getDrawable() == null) {
080.return;
081.}
082. 
083.canvas.drawCircle(getWidth() /2, getHeight() / 2, mDrawableRadius, mBitmapPaint);
084.if(mBorderWidth != 0) {
085.canvas.drawCircle(getWidth() /2, getHeight() / 2, mBorderRadius, mBorderPaint);
086.}
087.}
088. 
089.@Override
090.protectedvoid onSizeChanged(intw, int h, int oldw, intoldh) {
091.super.onSizeChanged(w, h, oldw, oldh);
092.setup();
093.}
094. 
095.publicint getBorderColor() {
096.returnmBorderColor;
097.}
098. 
099.publicvoid setBorderColor(intborderColor) {
100.if(borderColor == mBorderColor) {
101.return;
102.}
103. 
104.mBorderColor = borderColor;
105.mBorderPaint.setColor(mBorderColor);
106.invalidate();
107.}
108. 
109.publicint getBorderWidth() {
110.returnmBorderWidth;
111.}
112. 
113.publicvoid setBorderWidth(intborderWidth) {
114.if(borderWidth == mBorderWidth) {
115.return;
116.}
117. 
118.mBorderWidth = borderWidth;
119.setup();
120.}
121. 
122.@Override
123.publicvoid setImageBitmap(Bitmap bm) {
124.super.setImageBitmap(bm);
125.mBitmap = bm;
126.setup();
127.}
128. 
129.@Override
130.publicvoid setImageDrawable(Drawable drawable) {
131.super.setImageDrawable(drawable);
132.mBitmap = getBitmapFromDrawable(drawable);
133.setup();
134.}
135. 
136.@Override
137.publicvoid setImageResource(intresId) {
138.super.setImageResource(resId);
139.mBitmap = getBitmapFromDrawable(getDrawable());
140.setup();
141.}
142. 
143.@Override
144.publicvoid setImageURI(Uri uri) {
145.super.setImageURI(uri);
146.mBitmap = getBitmapFromDrawable(getDrawable());
147.setup();
148.}
149. 
150.privateBitmap getBitmapFromDrawable(Drawable drawable) {
151.if(drawable == null) {
152.returnnull;
153.}
154. 
155.if(drawable instanceof BitmapDrawable) {
156.return((BitmapDrawable) drawable).getBitmap();
157.}
158. 
159.try{
160.Bitmap bitmap;
161. 
162.if(drawable instanceof ColorDrawable) {
163.bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
164.}else {
165.bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
166.}
167. 
168.Canvas canvas =new Canvas(bitmap);
169.drawable.setBounds(0,0, canvas.getWidth(), canvas.getHeight());
170.drawable.draw(canvas);
171.returnbitmap;
172.}catch (OutOfMemoryError e) {
173.returnnull;
174.}
175.}
176. 
177.privatevoid setup() {
178.if(!mReady) {
179.mSetupPending =true;
180.return;
181.}
182. 
183.if(mBitmap == null) {
184.return;
185.}
186. 
187.mBitmapShader =new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
188. 
189.mBitmapPaint.setAntiAlias(true);
190.mBitmapPaint.setShader(mBitmapShader);
191. 
192.mBorderPaint.setStyle(Paint.Style.STROKE);
193.mBorderPaint.setAntiAlias(true);
194.mBorderPaint.setColor(mBorderColor);
195.mBorderPaint.setStrokeWidth(mBorderWidth);
196. 
197.mBitmapHeight = mBitmap.getHeight();
198.mBitmapWidth = mBitmap.getWidth();
199. 
200.mBorderRect.set(0,0, getWidth(), getHeight());
201.mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) /2, (mBorderRect.width() - mBorderWidth) /2);
202. 
203.mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width() - mBorderWidth, mBorderRect.height() - mBorderWidth);
204.mDrawableRadius = Math.min(mDrawableRect.height() /2, mDrawableRect.width() / 2);
205. 
206.updateShaderMatrix();
207.invalidate();
208.}
209. 
210.privatevoid updateShaderMatrix() {
211.floatscale;
212.floatdx = 0;
213.floatdy = 0;
214. 
215.mShaderMatrix.set(null);
216. 
217.if(mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
218.scale = mDrawableRect.height() / (float) mBitmapHeight;
219.dx = (mDrawableRect.width() - mBitmapWidth * scale) *0.5f;
220.}else {
221.scale = mDrawableRect.width() / (float) mBitmapWidth;
222.dy = (mDrawableRect.height() - mBitmapHeight * scale) *0.5f;
223.}
224. 
225.mShaderMatrix.setScale(scale, scale);
226.mShaderMatrix.postTranslate((int) (dx +0.5f) + mBorderWidth, (int) (dy +0.5f) + mBorderWidth);
227. 
228.mBitmapShader.setLocalMatrix(mShaderMatrix);
229.}
230. 
231.}

相关文章：

  • 2021-10-11
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-19
  • 2022-02-09
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-07-03
  • 2021-06-17
  • 2022-12-23
  • 2021-12-02
  • 2022-01-07
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode