Android ImageView 圓角實現

語言: CN / TW / HK

Android開發過程中,ImageView是必不可少的幾種控制元件之一,通常為了美觀,圖示等內容會設定為圓角,以下簡單總結了幾種設定圓角的方法。

1. RoundedImageView

RoundImageView為第三方庫,在build.gradle(:app)中使用以下語句匯入:

implementation 'com.makeramen:roundedimageview:2.3.0'

該控制元件使用起來也非常方便,圓角設定為10dp示例如下:

<com.makeramen.roundedimageview.RoundedImageView        android:id="@+id/iv_beauty"        android:layout_width="120dp"        android:layout_height="120dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="50dp"        android:src="@drawable/beauty1"        app:riv_corner_radius_bottom_left="10dp"        app:riv_corner_radius_bottom_right="10dp"        app:riv_corner_radius_top_left="10dp"        app:riv_corner_radius_top_right="10dp" />

效果如下:

2. CardView

CardView為Android系統自帶控制元件,使用CardView包裹ImageView也可以實現圓角效果,需要注意的是,CardView有可能會影響到控制元件層級,可以通過設定app:cardElevation="0dp"避免該問題:

<androidx.cardview.widget.CardView        android:layout_width="120dp"        android:layout_height="120dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="50dp"        app:cardCornerRadius="10dp"        app:cardElevation="0dp"> ​        <ImageView            android:id="@+id/iv_beauty"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:src="@drawable/beauty1" /> ​    </androidx.cardview.widget.CardView>

3. Glide

Glide是圖片載入常用的控制元件,通過Glide亦能實現圓角效果,Glide引入:

implementation 'com.github.bumptech.glide:glide:4.13.0' annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'

程式碼如下:

RequestOptions options = new RequestOptions().transform(new RoundedCorners(ScreenUtil.dp2px(10))); Glide.with(this).load(R.drawable.beauty2).apply(options).into(r.ivBeauty);

4. ViewOutlineProvider

通過自定義ViewOutlineProvider也可以實現圓角效果: ```java public class RoundViewOutlineProvider extends ViewOutlineProvider { private final float radius; public RoundViewOutlineProvider(float radius) { this.radius = radius; }

@Override
public void getOutline(View view, Outline outline) {
    int leftMargin = 0;
    int topMargin = 0;
    Rect selfRect = new Rect(leftMargin, topMargin, view.getWidth(), view.getHeight());
    outline.setRoundRect(selfRect, radius);
}

} 使用: java r.ivBeauty.setOutlineProvider(new RoundViewOutlineProvider(ScreenUtil.dp2px(10))); r.ivBeauty.setClipToOutline(true); ```

5. 總結

以上只是簡單列舉了幾種實現圓角的方式,實際上如果專案中使用到圓角的地方比較多,選擇自定義View實現圓角效果也是不錯的選擇。

值得一提的是,如果xml中ImageView scaleType設定成了centerCrop,則上述Glide實現圓角的方式會失效,原因可能是xml scaleType欄位載入和Glide應用圓角選項有衝突,感興趣的讀者可以自行研究一下。此時可以去除掉xml中的scaleType屬性,通過Glide在實現centerCrop效果的同時達到圓角的目的: java RequestOptions options = new RequestOptions().transform(new CenterCrop()); Glide.with(context) .asBitmap() .load(beautyResId) .apply(options) .into(new BitmapImageViewTarget(r.ivBeauty) { @Override protected void setResource(Bitmap resource) { super.setResource(resource); RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), resource); roundedBitmapDrawable.setCornerRadius(ScreenUtil.dp2px(8)); r.ivBeauty.setImageDrawable(roundedBitmapDrawable); } });