HarmonyOS —常用组件开发指导-Image

Image是用来显示图片的组件。

支持的XML属性

Image的共有XML属性继承自：Component

Image的自有XML属性见下表：

创建Image

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

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

图1 创建一个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"/>

图2 设置透明度为0.5的效果

设置缩放系数

图3 设置X轴和Y轴缩放为0.5的效果

设置缩放方式

当图片尺寸与Image尺寸不同时，可以根据不同的缩放方式来对图片进行缩放，如设置Image的宽高为200vp。

以按比例缩小居中显示为例，设置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:scale_mode="zoom_center"/>

图4 设置缩放方式为zoom_center的效果

设置裁剪对齐方式

当Image组件设定的尺寸小于图片实际尺寸时，可以对图片进行裁剪。

以Image组件宽高200vp为例（演示图片实际尺寸为416*218）,设置左对齐clip_alignment=“left”的示例和效果如下所示：

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

图5 设置左对齐裁剪的效果