鴻蒙應(yīng)用開發(fā)：如何與組件庫(Glide)銜接？
51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)
Android 發(fā)展到現(xiàn)在不僅提供了很多 API，還提供了很多第三方庫。這降低了我們開發(fā)者的開發(fā)難度，提升了開發(fā)效率，讓應(yīng)用開發(fā)更加的簡單高效。眾所周知，HarmonyOS 除了提供 16000 多個(gè) API 外也是支持組件庫的調(diào)用的，那么鴻蒙應(yīng)用開發(fā)是如何與第三方庫銜接的呢?
加載一張圖片是每個(gè)應(yīng)用所需的功能，在 Android 平臺(tái)提供的有 Glide、ImageLoader、Picasso，其中 Glide 最被開發(fā)者熟知，所以我就以 Glide 作為例子驗(yàn)證在 HaronyOS 開發(fā)中如何使用圖片加載庫。
以后要引入我廠即構(gòu) ZEGO Express SDK 鴻蒙版本的時(shí)候可以根據(jù)以下的依賴方式，開發(fā)過程中需要圖片的加載，也可以借鑒以下的圖片加載過程。
一、 組件庫(Glide)的依賴方式
HarmonyOS 應(yīng)用開發(fā)提供了三種常用的組件庫引入方式，以下的三種依賴方式都是在 build.grade 中操作。
1. Maven 倉的依賴方式
以下驗(yàn)證過程的圖片加載庫 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 的配置，就要手動(dòng)添加，如下：
- include ':entry', ':glidelibrary'
3. Har 包的依賴方式
- dependencies {
- implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
- }
二、 組件庫(Glide)的使用
1. 配置
在開發(fā)前需要在 config.json 中做好配置的工作。
允許 HTTP 的請求：
- "deviceConfig": {
- "default": {
- "network": {
- "cleartextTraffic": true
- }
- }
- }
網(wǎng)絡(luò)權(quán)限的設(shè)置：
- "module": {
- "reqPermissions": [
- {
- "name": "ohos.permission.INTERNET"
- }
- ]
- }
2. 加載圖片
圖片的來源可以是網(wǎng)絡(luò)的圖片、也可以是項(xiàng)目文件的圖片。兩種方式的加載方式如下，加載的圖片來源于網(wǎng)絡(luò) load() 的選擇 imagePath，本地圖片就選擇 imageResourceId。
調(diào)用方式：
- Image image = (Image)findComponentById(ResourceTable.Id_img);
- //Load Image from Internet（圖片來源于 即構(gòu)官網(wǎng)的網(wǎng)絡(luò)圖）
- 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);
運(yùn)行結(jié)果顯示：
3. 加載GIF動(dòng)圖
加載的GIF 圖可以是網(wǎng)絡(luò)圖片，也可以說本地圖片。
調(diào)用方式：
- 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 的加載，因?yàn)镮mage和Element是獨(dú)立的，不能使用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"/>
因?yàn)榧虞d gif 的過程，對系統(tǒng)的性能消耗是非常大的，所以在使用完的時(shí)候要及時(shí)釋放資源，防止內(nèi)存泄漏。
- @Override
- protected void onBackground() {
- super.onBackground();
- draweeView.stopGif();
- }
4. 加載圓角圖片
加載圓角圖片，把圓角 raduis 傳進(jìn)來，就可以繪制圓角度。
- 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) {
- }
- }
調(diào)用方式：
- 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);
總結(jié)
通過對 Glide 的引入過程與實(shí)現(xiàn)過程，跟Android 第三方庫引入與圖片加載沒有很大的區(qū)別。
舉一反三，我們可以很輕松的引入其他的組件庫，也可以通過 Glide 實(shí)現(xiàn)其他的圖片加載效果。同時(shí)一起期待我廠 即構(gòu) ZEGO Express SDK 的鴻蒙版本吧。
51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)
