一 概述
- 创建Image
- 设置Image
二 创建Image
2.1 使用说明
Image组件需要结合布局文件使用
2.2 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:height="200vp"
ohos:width="200vp"
ohos:layout_alignment="center"
ohos:image_src="$media:dog"/>
</DirectionalLayout>
2.3 代码创建Image
DependentLayout dependentLayout=new DependentLayout(getContext());
Image image=new Image(getContext());
image.setPixelMap(ResourceTable.Media_dog);
dependentLayout.addComponent(image);
super.setUIContent(dependentLayout);
三 设置Image
原图
3.1 设置透明度
布局文件
<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"/>
效果图
3.2 设置缩放系数
布局文件
<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"/>
效果图
3.3 设置缩放方式
缩放方式表
缩放方式 | 值 |
---|---|
按比例将原图扩大(缩小)到Image的宽度,居中显示。 | zoom_center |
按比例将原图扩大(缩小)到Image的宽度,显示在Image的上部分位置。 | zoom_start |
按比例将原图扩大(缩小)到Image的宽度,显示在Image的下部分位置。 | zoom_end |
不按比例将图片扩大/缩小到Image的大小显示 | stretch |
保持原图的大小,显示在Image的中心。当原图的尺寸大于Image的尺寸时,超过部分裁剪处理 | center |
按比例将原图缩小到Image的宽度,将图片的内容完整居中显示 | inside |
按比例将原图扩大(缩小)到Image的宽度和高度中较大的值。如设置的高度值较大时,在垂直方向上完整显示,水平方向上超出Image宽度的部分裁剪处理 | clip_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"/>
效果图
3.4 设置裁剪对齐模式
裁剪对齐
裁剪方式 | 值 |
---|---|
左对齐裁剪。 | left |
右对齐裁剪。 | right |
顶部对齐裁剪。 | top |
底部对齐裁剪。 | bottom |
居中裁剪。 | center |
布局文件
<Image
ohos:id="$+id:image"
ohos:width="200vp"
ohos:height="200vp"
ohos:layout_alignment="center"
ohos:image_src="$media:plant"
ohos:clip_alignment="center"/>