鴻蒙應用開發：如何與組件庫(Glide)銜接？

作者：即構忠武 2021-09-29 10:15:00

Android 發展到現在不僅提供了很多 API，還提供了很多第三方庫。這降低了我們開發者的開發難度，提升了開發效率，讓應用開發更加的簡單高效。

https://harmonyos.51cto.com

Android 發展到現在不僅提供了很多 API，還提供了很多第三方庫。這降低了我們開發者的開發難度，提升了開發效率，讓應用開發更加的簡單高效。眾所周知，HarmonyOS 除了提供 16000 多個 API 外也是支持組件庫的調用的，那么鴻蒙應用開發是如何與第三方庫銜接的呢?

加載一張圖片是每個應用所需的功能，在 Android 平臺提供的有 Glide、ImageLoader、Picasso，其中 Glide 最被開發者熟知，所以我就以 Glide 作為例子驗證在 HaronyOS 開發中如何使用圖片加載庫。

以后要引入我廠即構 ZEGO Express SDK 鴻蒙版本的時候可以根據以下的依賴方式，開發過程中需要圖片的加載，也可以借鑒以下的圖片加載過程。

一、組件庫(Glide)的依賴方式

HarmonyOS 應用開發提供了三種常用的組件庫引入方式，以下的三種依賴方式都是在 build.grade 中操作。

1. Maven 倉的依賴方式

以下驗證過程的圖片加載庫 Glide 采用的就是這種方式。

步驟一：

allprojects { 
    repositories { 
        maven { 
            url 'https://repo.huaweicloud.com/repository/maven/'  
        } 
        jcenter() 
        mavenCentral() 
    } 
}

步驟二：

dependencies { 
 implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) 
 implementation 'io.openharmony.tpc.thirdlib:glide:1.1.2' 
}

2. Module 的依賴方式

dependencies { 
 implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) 
 implementation project(path: ':glidelibrary') 
}

如果在setting.gradle 沒有對該 glidelibrary 的配置，就要手動添加，如下：

include ':entry', ':glidelibrary'

3. Har 包的依賴方式

dependencies { 
 implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) 
}

二、組件庫(Glide)的使用

1. 配置

在開發前需要在 config.json 中做好配置的工作。

允許 HTTP 的請求：

"deviceConfig": { 
  "default": { 
    "network": { 
      "cleartextTraffic": true 
    } 
  } 
}

網絡權限的設置：

"module": { 
    "reqPermissions": [ 
      { 
        "name": "ohos.permission.INTERNET" 
      }                    
    ] 
}

2. 加載圖片

圖片的來源可以是網絡的圖片、也可以是項目文件的圖片。兩種方式的加載方式如下，加載的圖片來源于網絡 load() 的選擇 imagePath，本地圖片就選擇 imageResourceId。

調用方式：

Image image = (Image)findComponentById(ResourceTable.Id_img); 
//Load Image from Internet（圖片來源于 即構官網的網絡圖） 
String imagePath = "https://www.zego.im/_nuxt/img/53992d2.png"; 
//Load Image from Resource Folder（本地圖片） 
int imageResourceId = ResourceTable.Media_zego_img; 
Glide.with(this) 
        .load(imagePath) 
        .diskCacheStrategy(DiskCacheStrategy.NONE) 
        .skipMemoryCache(true) 
        .into(image);

運行結果顯示：

3. 加載GIF動圖

加載的GIF 圖可以是網絡圖片，也可以說本地圖片。

調用方式：

DraweeView draweeView = (DraweeView) findComponentById(ResourceTable.Id_draweeView); 
String imagePath = "load gif from network"; 
int imageResourceId = "load gif from native"; 
Glide.with(this) 
        .asGif() 
        .load(imageResourceId) 
                .into(draweeView);

HarmonyOS 的Image 不支持gif 的加載，因為Image和Element是獨立的，不能使用Element重繪。所以 Glide 要使用 gif 的能力就要使用 DraweeView 。

<com.bumptech.glide.load.resource.gif.drawableability.DraweeView 
    ohos:id="$+id:draweeView" 
    ohos:height="180vp" 
    ohos:width="180vp" 
    ohos:layout_alignment="center"/>

因為加載 gif 的過程，對系統的性能消耗是非常大的，所以在使用完的時候要及時釋放資源，防止內存泄漏。

@Override 
protected void onBackground() { 
    super.onBackground(); 
    draweeView.stopGif(); 
}

4. 加載圓角圖片

加載圓角圖片，把圓角 raduis 傳進來，就可以繪制圓角度。

public class GlideRoundTransform extends BitmapTransformation { 
 
    private static float radius = 0f; 
 
    public GlideRoundTransform(Context context) { 
        this(context, 0); 
    } 
 
    public GlideRoundTransform(Context context, int dp) { 
        super(); 
        this.radius = dp; 
    } 
 
    @Override 
    protected PixelMap transform(@NonNls BitmapPool pool, @NonNls PixelMap toTransform, int outWidth, int outHeight) { 
        int width = toTransform.getImageInfo().size.width; 
        int height = toTransform.getImageInfo().size.height; 
 
        PixelFormat config = 
                toTransform.getImageInfo() != null ? toTransform.getImageInfo().pixelFormat : PixelFormat.ARGB_8888; 
        PixelMap bitmap = pool.get(width, height, config); 
 
        setCanvasBitmapDensity(toTransform, bitmap); 
 
        Canvas canvas = new Canvas(new Texture(bitmap)); 
        canvas.drawPixelMapHolderRoundRectShape(new PixelMapHolder(toTransform), new RectFloat(0, 0, width, height), new RectFloat(0, 0, width, height), radius, radius); 
        return bitmap; 
    } 
 
    @Override 
    public void updateDiskCacheKey(MessageDigest messageDigest) { 
 
    } 
 
}

調用方式：

Image image = (Image) findComponentById(ResourceTable.Id_img); 
RequestOptions myOptions = new RequestOptions().transform(new GlideRoundTransform(getContext(), 30)); 
Glide.with(this) 
        .load(ResourceTable.Media_zego_img_round) 
        .diskCacheStrategy(DiskCacheStrategy.NONE) 
        .skipMemoryCache(true) 
        .fitCenter() 
        .apply(myOptions) 
        .into(image);