鸿蒙OS常用控件Text和Image控件使用详解-拥抱新时代,一起学习鸿蒙开发

用户界面元素统称为组件,组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时,既无法显示也无法交互,因此一个用户界面至少包含一个布局

这篇文章主要介绍下鸿蒙开发Text和Image的用法

鸿蒙OS系统开发:环境搭建详解和运行He

一、鸿蒙开发文本框Text的使用方法的介绍
Text是用来显示字符串的组件,在界面上显示为一块文本区域。Text作为一个基本组件,有很多扩展,常见的有按钮组件Button,文本编辑组件TextField。

1、创建Text

在layout目录下的xml文件中创建Text


<Text
    ohos: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中定义文本的背景。


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="#878787"/>
</shape>
图片

2.1设置字体大小和颜色


<Text
    ohos: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设置字体风格和字重


<Text
    ohos: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设置文本对齐方式


<Text
    ohos: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设置文本换行和最大显示行数


<Text
    ohos: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对象支持根据文本长度自动调整文本的字体大小和换行。

设置自动换行、最大显示行数和自动调节字体大小。


<Text
    ohos: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() {
    @Override
    public void onClick(Component component) {
        text.setText(text.getText() + "T");
    }
});

4、跑马灯效果

当文本过长时,可以设置跑马灯效果,实现文本滚动显示。前提是文本换行关闭且最大显示行数为1,默认情况下即可满足前提要求。


<Text
    ohos: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


<Image
    ohos: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设置透明度


<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.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"/>
图片

2.3设置缩放方式

当图片尺寸与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"/>
图片

2.4设置裁剪对齐模式

当Image尺寸小于图片尺寸时,可以对图片进行裁剪,仍以Image的宽高为200vp为例,小于图片尺寸。

以左对齐裁剪为例,设置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"/>
图片

阅读原文

简介:一个有10多年经验开发的android、java、前端等语言的老程序员,在这里一起聊聊技术,一起聊聊生活、一起聊聊中年危机的生存之道,一起进步一起加油,感兴趣的欢迎订阅;不定时的更新。欢迎关注微信公众号:Android开发编程
(0)
打赏 喜欢就点个赞支持下吧 喜欢就点个赞支持下吧

声明:本文来自“Android开发编程”,分享链接:https://www.zyxiao.com/p/291200    侵权投诉

网站客服
网站客服
内容投稿 侵权处理
分享本页
返回顶部