【JAVA UI】HarmonyOS Glide简单使用第二篇（加载Gif和圆形图片）

Glid是一个快速高效的图像加载库。Glid提供了一个易于使用的API、一个性能和可扩展的资源解码管道和自动资源池。Glid支持提取、解码和显示视频剧照、图像和动画GIF。Glid包括一个灵活的API，允许开发人员插入几乎任何网络堆栈。默认情况下，Glid使用基于HttpUrlConnection的自定义堆栈，但也包括插件到Google Volley项目或Square的OkHttp库的实用程序库。代码实现：首先最重要的一步是引入Glide的依赖在工程目录下的build.gradle文件repositories{}中添加

mavenCentral()

在entry目录下的build.gradle文件Dependencies{}中添加

implementation 'io.openharmony.tpc.thirdlib:glide:1.1.3'

然后在config.json文件中添加网络权限：

"deviceConfig": {
  "default": {
    "network": {
      "cleartextTraffic": true
    }
  }
},
{
  "name": "ohos.permission.INTERNET"
}

依赖和网络权限添加完成后在MainAbilitySlice.Java文件中onStart()添加以下代码：

//TODO 加载圆形图片
                Image imageView = findComponentById(ResourceTable.Id_imageComponent);
                Glide.with(MainAbilitySlice.this)
                .load("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftx29%2F08151054265778673.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657872223&t=19c23699beebabafec16b9e3f31ed8ac")
                .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                .into(imageView);
//TODO 加载GIF图片
        DraweeView image =  (DraweeView) findComponentById(ResourceTable.Id_image);
        Glide.with(MainAbilitySlice.this)
                .asGif()
                .load("http://dingyue.ws.126.net/2021/0506/52856347g00qsnuvr01hqc000a5005pg.gif")
                .into(image);

在ability_main.xml添加Image

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="start"
    ohos:orientation="vertical">

    <Text
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:text_color="red"
        ohos:text_alignment="center"
        ohos:text="glide加载圆形图片"
        ohos:text_size="25vp"
        />

    <Image
        ohos:id="$+id:imageComponent"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:layout_alignment="center"
        ohos:image_src="#ed6262"
        />

    <Text
        ohos:height="100vp"
        ohos:text_alignment="center"
        ohos:width="match_content"
        ohos:text_color="red"
        ohos:layout_alignment="horizontal_center"
        ohos:text="glide加载gif图片"
        ohos:text_size="25vp"
        />
    <com.bumptech.glide.load.resource.gif.drawableability.DraweeView
        ohos:id="$+id:image"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:layout_alignment="center"
        ohos:background_element="#123456">
    </com.bumptech.glide.load.resource.gif.drawableability.DraweeView>

</DirectionalLayout>