HarmonyOS APP开发入门3——组件（三 Image组件）

HarmonyOS APP开发入门3——组件（三 Image组件）

Image组件

图片（Image）是用来显示图片的组件

常见的属性

当然也有id，长、宽、高等

重要的属性

属性名称	功能说明
background_element （通用属性）	图片背景
image_src	图像
clip_alignment	图像裁剪对齐方式
scale_mode	图像缩放类型

基本用法

<Image 
    ohos:height="100vp" 
    ohos:width="100vp" 
    ohos:image_src="$media:all" 
    ohos:background_element="#00ff00"/>

相关方法

方法名	功能说明
setClipGravity	设置剪切对齐模式
setScaleMode	当图像和组件的大小不同时，此方法可以缩放或者剪切图像

创建Image

在Project窗口，打开“entry > src > main > resources > base > media”，拖动所需图片文件添加至media文件夹下，以“plant.JPG”为例。

我们既可以在XML中创建Image，也可以在代码中创建Image。

使用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:orientation="vertical">

    <Image
        ohos:id="$+id:imageComponent"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:image_src="$media:plant"
        />
</DirectionalLayout>

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        Component component = findComponentById(ResourceTable.Id_imageComponent);
        if (component instanceof Image) {
            Image image = (Image) component;
        }
    }
}

使用代码创建Image

MainAbilitySlice.java的示例代码如下：

import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //创建一个Image组件
        Image image = new Image(getContext());
        image.setPixelMap(ResourceTable.Media_plant);
        //创建一个布局
        DirectionalLayout layout = new DirectionalLayout(getContext());
        //Image组件添加到DirectionalLayout布局中
        layout.addComponent(image);
        super.setUIContent(layout);
    }
}

使用Image

设置透明度

<Image
    ohos:id="$+id:image"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:layout_alignment="center"
    ohos:image_src="$media:plant"
    ohos:alpha="0.5"/>

设置缩放系数

<Image
    ohos:id="$+id:image"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:layout_alignment="center"
    ohos:image_src="$media:plant"
    ohos:scale_x="0.5"
    ohos:scale_y="0.5"/>

设置缩放方式

<Image
    ohos:id="$+id:image"
    ohos:width="200vp"
    ohos:height="200vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:plant"
    ohos:scale_mode="zoom_center"/>

设置裁剪对齐方式

<Image
    ohos:id="$+id:image"
    ohos:width="200vp"
    ohos:height="200vp"
    ohos:layout_alignment="center"
    ohos:image_src="$media:plant"
    ohos:clip_alignment="left"/>

喜欢本博文的话，记得点点关注哦。