HarmonyOS之常用组件Image的功能和使用

一、支持的 XML 属性

Image 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。
Image 的自有 XML 属性见下表：

属性名称	中文描述	取值	取值说明	使用案例
clip_alignment	图像裁剪对齐方式	left	表示按左对齐裁剪	ohos:clip_alignment="left"
		right	表示按右对齐裁剪	ohos:clip_alignment="right"
		top	表示按顶部对齐裁剪	ohos:clip_alignment="top"
		bottom	表示按底部对齐裁剪	ohos:clip_alignment="bottom"
		center	表示按居中对齐裁剪	ohos:clip_alignment="center"
image_src	图像	Element类型	可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。	ohos:image_src="#FFFFFFFF" ohos:image_src="$color:black" ohos:image_src="$media:warning" ohos:image_src="$graphic:graphic_src"
scale_mode	图像缩放类型	zoom_center	表示原图按照比例缩放到与Image最窄边一致，并居中显示	ohos:scale_mode="center"
		zoom_start	表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示
		zoom_end	表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示
		stretch	表示将原图缩放到与Image大小一致
		center	表示不缩放，按Image大小显示原图中间部分
		inside	表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示
		clip_center	表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示

二、创建 Image

在“Project”窗口，打开“entry > src > main > resources > base > media”，添加一个图片至 media 文件夹下，以“plant.JPG”为例，如下：

既可以在 XML 中创建 Image，也可以在代码中创建 Image，两种方式如下：
- 在 XML 中创建 Image：

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

在代码中创建 Image：

 Image image = new Image(getContext());image.setPixelMap(ResourceTable.Media_plant);

效果如下：

三、使用 Image

设置透明度：

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

设置透明度为0.5的效果：

设置缩放系数：

 <Imageohos: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"/>

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

设置缩放方式：当图片尺寸与 Image 尺寸不同时，可以根据不同的缩放方式来对图片进行缩放，如设置 Image 的宽高为200vp，以按比例缩小居中显示为例，设置 ohos:scale_mode=“zoom_center”：

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

设置缩放方式为 zoom_center 的效果：

设置裁剪对齐模式：当 Image 尺寸小于图片尺寸时，可以对图片进行裁剪，仍以 Image 的宽高为 200vp 为例，小于图片尺寸，以左对齐裁剪为例，设置 clip_alignment=“left”：

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

设置左对齐裁剪的效果：

HarmonyOS之常用组件Image的功能和使用相关推荐

HarmonyOS之常用组件RoundProgressBar的功能和使用
RoundProgressBar 继承自 ProgressBar,拥有 ProgressBar 的属性,在设置同样的属性时用法和 ProgressBar 一致,用于显示环形进度. RoundProgr ...
HarmonyOS之常用组件TextField的功能和使用
一.支持的 XML 属性 TextField 的共有 XML 属性继承自:Text. Text 的自有 XML 属性,请参考我之前的博客:HarmonyOS之深入分析常用组件Text的功能和使用. T ...
HarmonyOS之常用组件Button的功能和使用
一.Button 组件 Button 是一种常见的组件,点击可以触发对应的操作,通常由文本或图标组成,也可以由图标和文本共同组成. 文本按钮,如下所示: 图标按钮,如下所示: 图标和文本共同组成的按钮 ...
HarmonyOS之常用组件ScrollView的功能和使用
一.ScrollView 功能 ScrollView 是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容. 二.支持的 XML 属性 ScrollView 的共有 XML 属性继承自 ...
HarmonyOS之常用组件Text的功能和使用
一.支持的 XML 属性 Text 是用来显示字符串的组件,在界面上显示为一块文本区域.Text 作为一个基本组件,有很多扩展,常见的有按钮组件 Button,文本编辑组件 TextField. Te ...
HarmonyOS之常用组件ListContainer的功能和使用
一.ListContainer 简介 ListContainer 是用来呈现连续.多行数据的组件,包含一系列相同类型的列表项. 二.支持的 XML 属性 ListContainer 的共有 XML 属 ...
HarmonyOS之常用组件ProgressBar的功能和使用
一.简介 ProgressBar 用于显示内容或操作的进度. ProgressBar 的共有 XML 属性继承自 Component,详情请参考我的博客:HarmonyOS之组件通用的XML属性总览. ...
HarmonyOS之常用组件ToastDialog的功能和使用
一.ToastDialog 的使用 ToastDialog 是在窗口上方弹出的对话框,是通知操作的简单反馈.ToastDialog 会在一段时间后消失,在此期间,用户还可以操作当前窗口的其他组件. 创 ...
HarmonyOS之常用组件TabList与Tab的功能和使用
一.什么是 Tablist 与 Tab ? Tablist 可以实现多个页签栏的切换,Tab 为某个页签. 子页签通常放在内容区上方,展示不同的分类. 页签名称应该简洁明了,清晰描述分类的内容. 二. ...

HarmonyOS之常用组件Image的功能和使用

一、支持的 XML 属性

二、创建 Image

三、使用 Image

HarmonyOS之常用组件Image的功能和使用相关推荐

最新文章

热门文章