0
点赞
收藏
分享

微信扫一扫

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”为例。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GxpLmFPD-1649386652401)(G:\笔记\img\0000000000011111111.20220226172224.42747996748616469282101233390035.png)]

我们既可以在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"/>

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

举报

相关推荐

0 条评论