[[426400]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

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 沒有對(duì)該 glidelibrary 的配置，就要手動(dòng)添加，如下：

include ':entry', ':glidelibrary' 

3. Har 包的依賴方式

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

二、 組件庫(Glide)的使用

1. 配置

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

允許 HTTP 的請(qǐng)求：

"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 的過程，對(duì)系統(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é)

通過對(duì) Glide 的引入過程與實(shí)現(xiàn)過程，跟Android 第三方庫引入與圖片加載沒有很大的區(qū)別。

舉一反三，我們可以很輕松的引入其他的組件庫，也可以通過 Glide 實(shí)現(xiàn)其他的圖片加載效果。同時(shí)一起期待我廠 即構(gòu) ZEGO Express SDK 的鴻蒙版本吧。

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com