RecyclerView使用Glide切圆角图片卡顿

TKUONG

2021 年 08 月 26 日

3669 次浏览

暂无评论

1731字数

Android

最近使用RecyclerView需要显示圆角图片，一开始使用了Glide内置的方法来实现图片切角。

### Glide图片切角方法

参考：[ Android 安卓Glide加载圆角_两行代码 踏踏实实de工作-CSDN博客](https://myhub.blog.csdn.net/article/details/102715421)

```kotlin
fun GlideRadius(context: Context, url: String?, imageView: ImageView) {
        //设置图片圆角角度
        val roundedCorners = RoundedCorners(0)
        val options = RequestOptions.bitmapTransform(roundedCorners).override(0, 0)
        com.baijiayun.glide.Glide.with(context).load(url).apply(options).into(imageView)
    }
```

然后调用这个方法就可将图片切角

```kotlin
GlideRadius(context,imgurl,holder.iv)
```

这样确实能够实现图片的圆角展示，但是实际使用中发现，在recyclerView中的item过多时，tablayout切换fragment的过程中会非常卡顿，即使是只有6个item也是肉眼可见的卡顿。

因此我又尝试找其他方法实现图片圆角。

### Fresco

当下最常用的图片加载框架是：Gilde，Fresco，Picasso。Fresco是Facebook提供的开源图片加载库，它能够从网络，本地存储和Android资源文件中加载图片，且具有三级缓存设计（2级内存，1级文件）。Fresco中实现了各种加载过程以及加载后的图片绘制，整体都很强大。所以准备来好好学学这个框架啦。

Frescp框架的设计主要采用的是MVC模式。DraweeView实现了View的功能，DraweeHierarchy实现了Model的功能，DraweeController实现Controller的功能。
参考：[android之Fresco框架（一）--Fresco基本使用_xuyueqing1225的博客-CSDN博客](https://blog.csdn.net/xuyueqing1225/article/details/79842292)

中文文档：[引入Fresco | Fresco (fresco-cn.org)](https://www.fresco-cn.org/docs/)

#### 使用步骤

##### 1.添加依赖

```
implatation 'com.facebook.fresco:fresco:0.12.0'
```

##### 2.初始化`Fresco`类

在Application里面调用`Fresco.initialize`一次即可完成初始化

```java
public class MyApplication extends Application {
	@Override
	public void onCreate() {
		super.onCreate();
		Fresco.initialize(this);
	}
}
```

##### 3.指定application类，声明网络权限

```xml
<manifest
    ...
    >
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      ...
      android:label="@string/app_name"
      android:name=".MyApplication"
      >
      ...
    </application>
    ...
  </manifest>
```

##### 4.添加布局

添加命名空间

```xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
```

添加SimpleDraweeView

```xml
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="130dp"
    android:layout_height="130dp"
    fresco:placeholderImage="@drawable/my_drawable"//占位图
  />
```

圆角配置

```xml
<com.facebook.drawee.view.SimpleDraweeView
   ...
   fresco:roundedCornerRadius="5dp"
   fresco:roundBottomLeft="false"
   fresco:roundBottomRight="false"
   fresco:roundWithOverlayColor="@color/blue"
   fresco:roundingBorderWidth="1dp"
   fresco:roundingBorderColor="@color/red"

```

SimpleDraweeView里面好像adjustViewBounds属性设置无效，最好是固定高度与宽度，这样才能让图片完整显示

##### 5.加载图片

```java
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);
```

剩下的，Fresco会替你完成:

- 显示占位图直到加载完成；
- 下载图片；
- 缓存图片；
- 图片不再显示时，从内存中移除；

### 结果

在使用Fresco后，切换fragment时不会跟使用Glide切圆角时一样卡顿。

RecyclerView使用Glide切圆角图片卡顿