Android中实现圆角图片的几种方法

2019-12-12 02:40:54

字体：大中小

来源：转载

供稿：网友

Android中实现圆角图片有多种姿势，不知你解锁了几种？

方法一：setXfermode法

此种方式就是再new一个相同尺寸的bitmap，然后使用paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));先画圆角矩形，再画原始bitmap，然后就得到了一个圆角的bitmap了。

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, float roundPx) {  Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);  Canvas canvas = new Canvas(output);  final int color = 0xff424242;  final Paint paint = new Paint();  final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());  final RectF rectF = new RectF(rect);  paint.setAntiAlias(true);  canvas.drawARGB(0, 0, 0, 0);  paint.setColor(color);  canvas.drawRoundRect(rectF, roundPx, roundPx, paint);  paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  canvas.drawBitmap(bitmap, rect, rect, paint);  return output;}

点评：

早期用得较多，占用bitmap双倍内存。

方法二：使用BitmapShader

此种方式是先将bitmap生成BitmapShader，然后将其绘制到canvas中, 部分关键代码如下，完整代码请参考QuickAF中的RoundImageView

bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);paint.setShader(bitmapShader);@Overridepublic void draw(Canvas canvas) {  Rect bounds = getBounds();  canvas.drawRoundRect(fillRect, radius, radius, paint);  if (mBorderWidth > 0) {    if (mIsCircle) {      canvas.drawCircle(bounds.width() / 2, bounds.height() / 2, radius, strokePaint);    }    else {      canvas.drawRoundRect(fillRect, radius, radius, strokePaint);    }  }}

点评：

占用内存较大，实现有点小复杂。

方法三：图片加载库

目前github上有许多流行的图片加载库，基于上都附带圆角图片功能，只需要稍微配置一下，即可轻松的实现想要的效果。其实在底层，无非也是使用上面的两种方式。比如Android-Universal-Image-Loader 早期的RoundedBitmapDisplayer使用setXfermode来实现，后来使用BitmapShader实现。

DisplayImageOptions options = new DisplayImageOptions.Builder()    .displayer(new RoundedBitmapDisplayer()) // display rounded bitmap    .build();

再以比较另类的fresco为例，虽然底层是以C实现，不过在圆角处理上，仍然还是在Java层实现，用的方式还是BitmapShader。不过对于非bitmap的圆角实现，fresco是用Paint直接画的。附上fresco配置。

<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="20dp" android:layout_height="20dp" fresco:fadeDuration="300" fresco:actualImageScaleType="focusCrop" fresco:placeholderImage="@color/wait_color" fresco:placeholderImageScaleType="fitCenter" fresco:failureImage="@drawable/error" fresco:failureImageScaleType="centerInside" fresco:retryImage="@drawable/retrying" fresco:retryImageScaleType="centerCrop" fresco:progressBarImage="@drawable/progress_bar" fresco:progressBarImageScaleType="centerInside" fresco:progressBarAutoRotateInterval="1000" fresco:backgroundImage="@color/blue" fresco:overlayImage="@drawable/watermark" fresco:pressedStateOverlayImage="@color/red" fresco:roundAsCircle="false" fresco:roundedCornerRadius="1dp" fresco:roundTopLeft="true" fresco:roundTopRight="false" fresco:roundBottomLeft="false" fresco:roundBottomRight="true" fresco:roundWithOverlayColor="@color/corner_color" fresco:roundingBorderWidth="2dp" fresco:roundingBorderColor="@color/border_color"/>

点评：

由框架实现，使用简单，稳定。

方法四：遮罩

此种方式还是使用setXfermode，不过与方法一不同的是：不对图片作任何更改，只在圆角之外再画一层与背景颜色相同的四个角来遮挡，在视觉上造成圆角图片的效果。关键代码如下：

@Overrideprotected void onDraw(Canvas canvas) {  super.onDraw(canvas);  if (src != null && dst != null) {    int w = getMeasuredWidth(), h = getMeasuredHeight();    int sc = canvas.saveLayer(0, 0, w, h, null,      Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG        | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);    canvas.drawBitmap(dst, 0, 0, paint); // 圆角矩形    paint.setXfermode(mode); // new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT);    canvas.drawBitmap(src, 0, 0, paint); // 长方形    paint.setXfermode(null);    canvas.restoreToCount(sc);  }}

详细代码请参考QuickAF中的RoundMaskView

使用这种方式，圆角化的对象不限于ImageView，还可以是任意的layout哦，比如下面的示例

<FrameLayout  android:layout_width="match_parent"  android:layout_height="wrap_content">  <LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="vertical">    <ImageView      android:layout_width="match_parent"      android:layout_height="150dp"      android:src="@color/colorAccent"/>    <TextView      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:layout_gravity="bottom"      android:background="@color/black_alpha_50"      android:padding="12dp"      android:text="I am text"/>  </LinearLayout>  <cn.ieclipse.af.view.RoundMaskView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:radius="10dp"    app:af_borderColor="@color/white"    app:af_borderWidth="1dp"/></FrameLayout>

配合FrameLayout，将LinearLayout实现了圆角，在视觉效果上，ImageView左上和右上圆角，TextView左下和右下圆角。

点评：

具有一定的局限性，不过不限于图片，所有的Layout都可以在视觉上实现圆角。

关于

QuickAF是一个Android平台上的app快速开发框架。

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

上一篇：Android编程实现点击EditText之外的控件隐藏软键盘功能

下一篇：详解Android Activity之间跳转出现短暂黑屏的处理方法