Several ways to implement rounded corner pictures in Android

There are many ways to implement rounded corner pictures in Android. I wonder how many of them have you unlocked?

Method 1: setXfermode method

This method is to new a bitmap of the same size, and then use (new PorterDuffXfermode(Mode.SRC_IN)); first draw a rounded rectangle, then draw the original bitmap, and then you get a rounded bitmap.

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, float roundPx) {

  Bitmap output = ((), (), Config.ARGB_8888);
  Canvas canvas = new Canvas(output);

  final int color = 0xff424242;
  final Paint paint = new Paint();
  final Rect rect = new Rect(0, 0, (), ());
  final RectF rectF = new RectF(rect);

  (true);
  (0, 0, 0, 0);
  (color);
  (rectF, roundPx, roundPx, paint);

  (new PorterDuffXfermode(Mode.SRC_IN));
  (bitmap, rect, rect, paint);

  return output;
}

Comments:

It was used more in the early days and occupied double the bitmap memory.

Method 2: Use BitmapShader

This method is to first generate a BitmapShader with bitmap, and then draw it into canvas. Some of the key codes are as follows. Please refer to the complete code.QuickAFRoundImageView in

bitmapShader = new BitmapShader(bitmap, , );
(bitmapShader);
@Override
public void draw(Canvas canvas) {
  Rect bounds = getBounds();
  (fillRect, radius, radius, paint);
  if (mBorderWidth > 0) {
    if (mIsCircle) {
      (() / 2, () / 2, radius, strokePaint);
    }
    else {
      (fillRect, radius, radius, strokePaint);
    }
  }
}

Comments:

It takes up a lot of memory and the implementation is a bit complicated.

Method 3: Image loading library

Currently, there are many popular image loading libraries on github, which are all equipped with rounded image function. You only need a little configuration to easily achieve the desired effect. In fact, at the bottom, there are only two methods above. For example, Android-Universal-Image-Loader The early RoundedBitmapDisplayer was implemented using setXfermode, and later it was implemented using BitmapShader.

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

Take the relatively alternative fresco as an example. Although the underlying layer is implemented in C, it is still implemented in the Java layer in the rounded corner processing, and the method used is still BitmapShader. However, for non-bitmap rounded corner implementations, fresco is drawn directly using Paint. Attached with fresco configuration.

<
 android:
 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"
/>

Comments:

Implemented by the framework, simple to use and stable.

Method 4: Mask

This method still uses setXfermode, but the difference from the method is that you do not make any changes to the picture, and only draw a layer of four corners with the same color as the background to block it, which visually creates the effect of the rounded corner picture. The key code is as follows:

@Override
protected void onDraw(Canvas canvas) {
  (canvas);
  if (src != null &amp;&amp; dst != null) {
    int w = getMeasuredWidth(), h = getMeasuredHeight();
    int sc = (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);
    (dst, 0, 0, paint); // Rounded rectangle    (mode); // new PorterDuffXfermode(.SRC_OUT);
    (src, 0, 0, paint); // rectangle    (null);
    (sc);
  }
}

Please refer to the detailed codeQuickAFRoundMaskView in

In this way, the rounded object is not limited to ImageView, but can also be any layout, such as the following example

<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>

  <
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:radius="10dp"
    app:af_borderColor="@color/white"
    app:af_borderWidth="1dp"/>
</FrameLayout>

In conjunction with FrameLayout, LinearLayout is rounded. In terms of visual effects, ImageView has the upper left and upper right rounded corners, and TextView has the lower left and lower right rounded corners.

Comments:

It has certain limitations, but not limited to pictures. All Layouts can visually achieve rounded corners.

about

QuickAFIt is a rapid app development framework on the Android platform.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.