Android ImageView 圆角实现

前言

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也可以实现圆角效果：

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

使用：

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效果的同时达到圆角的目的：

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

最后，如果大伙有什么好的学习方法或建议欢迎大家在评论中积极留言哈，希望大家能够共同学习、共同努力、共同进步。

小编在这里祝小伙伴们在未来的日子里都可以 升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰！！

不论遇到什么困难，都不应该成为我们放弃的理由！

很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，需要一份小编整理出来的学习资料的关注我主页或者点击扫描下方二维码免费领取~

这里是关于我自己的Android 学习，面试文档，视频收集大整理**，有兴趣的伙伴们可以看看~

如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言，一定会认真查询，修正不足，谢谢。