什么是ImageView

ImageView是用于顯示圖片的UI控制元件.

基礎樣例

1.展示本地圖片

效果圖

代碼

<Image
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:scale_mode="clip_center"
        ohos:image_src="$media:beauty"/>

圖片檔案放在resources/base/media下

2.展示網路圖片

效果圖

代碼

使用第三方開源庫Glide加載網路圖片

Image image = (Image) findComponentById(ResourceTable.Id_image);
Uri uri =Uri.parse("https://c-ssl.duitang.com/uploads/blog/202105/21/20210521205533_613b9.jpg");
Glide.with(getContext()).load(uri).into(image);

完整代碼:

1. build.gradle中添加依賴

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

1. 完整加載圖片代碼

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main_net);
        Image image = (Image) findComponentById(ResourceTable.Id_image);
        Uri uri =Uri.parse("https://c-ssl.duitang.com/uploads/blog/202105/21/20210521205533_613b9.jpg");
        Glide.with(getContext()).load(uri).into(image);
    }
}

基礎樣例完整源代碼

https://gitee.com/hspbc/harmonyos_demos/tree/master/imageDemo

常用屬性說明

屬性名	用途
ohos:width	設定控制元件寬度,可設定為:match_parent(和父控制元件一樣),match_content(按照內容自動伸縮),設定固定值(如200vp)
ohos:height	設定控制元件高度,可設定為:match_parent(和父控制元件一樣),match_content(按照內容自動伸縮),設定固定值(如200vp)
ohos:layout_alignment	在父控制元件內對齊方式,可選值：left：居左；start：居左；center：居中；right：居右；end：居右
ohos:background_element	設定背景,可以是色值(如#FF0000)或圖片等
ohos:visibility	可選值: visible(顯示), invisible(隱藏,但是仍占據UI空間),hide(隱藏,且不占UI空間)
ohos:image_src	設定圖片，樣例：ohos:image_src="$media:icon"
ohos:scale_mode	設定圖片縮放模式，可選值：zoom_center：居中縮放展示；zoom_start：居上縮放展示；zoom_end：居下縮放展示；center：居中展示(不縮放)；clip_center：居中裁剪；inside：左右拉伸鋪滿螢屏；stretch：上下拉伸鋪滿螢屏；