鸿蒙OS常用控件Text和Image控件使用详解-拥抱新时代，一起学习鸿蒙开发
用户界面元素统称为组件，组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时，既无法显示也无法交互，因此一个用户界面至少包含一个布局
这篇文章主要介绍下鸿蒙开发Text和Image的用法
环境搭建 Android开发编程，公众号：Android开发编程鸿蒙OS系统开发：环境搭建详解和运行Hello World
Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。
1、创建Text
在layout目录下的xml文件中创建Text
<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"/>
2、设置Text
在xml中设置Text的背景
layout目录下xml文件的代码示例如下：
<Text...ohos:background_element="$graphic:background_text"/>
常用的背景如常见的文本背景、按钮背景，可以采用XML格式放置在graphic目录下；
在“Project”窗口，打开“entry > src > main > resources > base”，右键点击“graphic”文件夹，选择“New > File”，命名为“background_text.xml”，在background_text.xml中定义文本的背景。
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><cornersohos:radius="20"/><solidohos:color="#878787"/></shape>
2.1设置字体大小和颜色
<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:left_margin="15vp"ohos:bottom_margin="15vp"ohos:right_padding="15vp"ohos:left_padding="15vp"ohos:background_element="$graphic:background_text"/>
2.2设置字体风格和字重
<Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:text="Text"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:left_margin="15vp"ohos:bottom_margin="15vp"ohos:right_padding="15vp"ohos:left_padding="15vp"ohos:background_element="$graphic:background_text"/>
2.3设置文本对齐方式
<Textohos:id="$+id:text"ohos:width="300vp"ohos:height="100vp"ohos:text="Text"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:left_margin="15vp"ohos:bottom_margin="15vp"ohos:right_padding="15vp"ohos:left_padding="15vp"ohos:text_alignment="horizontal_center|bottom"ohos:background_element="$graphic:background_text"/>
2.4设置文本换行和最大显示行数
<Textohos:id="$+id:text"ohos:width="75vp"ohos:height="match_content"ohos:text="TextText"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:multiple_lines="true"ohos:max_text_lines="2"ohos:background_element="$graphic:background_text"/>
3、自动调节字体大小
Text对象支持根据文本长度自动调整文本的字体大小和换行。
设置自动换行、最大显示行数和自动调节字体大小。
<Textohos:id="$+id:text"ohos:width="90vp"ohos:height="match_content"ohos:min_height="30vp"ohos:text="T"ohos:text_color="#0000FF"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:multiple_lines="true"ohos:max_text_lines="1"ohos:auto_font_size="true"ohos:right_padding="8vp"ohos:left_padding="8vp"ohos:background_element="$graphic:background_text"/>
通过setAutoFontSizeRule设置自动调整规则，三个入参分别是最小的字体大小、最大的字体大小、每次调整文本字体大小的步长。
Text text = (Text) findComponentById(ResourceTable.Id_text);// 设置自动调整规则text.setAutoFontSizeRule(30, 100, 1);// 设置点击一次增多一个"T"text.setClickedListener(new Component.ClickedListener() {public void onClick(Component component) {text.setText(text.getText() + "T");}});
4、跑马灯效果
当文本过长时，可以设置跑马灯效果，实现文本滚动显示。前提是文本换行关闭且最大显示行数为1，默认情况下即可满足前提要求。
<Textohos:id="$+id:text"ohos:width="75vp"ohos:height="match_content"ohos:text="TextText"ohos:text_size="28fp"ohos:text_color="#0000FF"ohos:italic="true"ohos:text_weight="700"ohos:text_font="serif"ohos:background_element="$graphic:background_text"/>
二、鸿蒙开发图片Image的使用方法的介绍
Image是用来显示图片的组件
image主要的属性
1、创建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
2、使用Image
2.1设置透明度
<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"/>
2.2设置缩放系数
<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"/>
2.3设置缩放方式
当图片尺寸与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"/>
2.4设置裁剪对齐模式
当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"/>