第3章

常用UI组件




【学习目标】
■ 理解HarmonyOS中的UI组件及组件容器
■ 掌握常用的显示型组件，如Text、Image、ProgressBar等
■ 掌握常用的交互型组件，如TextField、Button、RadioButton、Switch等
■ 会综合使用HarmonyOS中常有的UI组件



9min







3.1概述
UI即User Interface，是应用的用户界面，是用户和应用之间的交互接口。用户和应用之间的接口非常广泛，如： 查看屏幕上应用的界面、单击按钮、语音输入、扫一扫、摇一摇等都是用户和应用的接口。应用UI组件是HarmonyOS为应用开发提供的界面元素，例如文本框、图像、按钮、进度条等。组件是应用界面的基本构成单元，借助组件，开发者可以高效构建自己的应用图形界面。
组件，即Component，也可以称为控件，它是绘制在设备屏幕上的一个对象，组件是组成应用用户界面的基本单位，组件需要放置到组件容器中。组件容器，即ComponentContainer，组件容器可以容纳组件，也可以容纳组件容器。可以说应用中绝大多数的用户界面效果是由组件容器和组件对象构成的，二者通过包含和被包含、相互配合形成丰富的用户界面，应用界面中的组件容器和组件在组织上是一个树形结构，如图31所示。


图31用户界面组件的结构


HarmonyOS中定义了一些常用的UI组件类，如Text、Button、Switch等，这些组件类直接或间接继承了Component类，因此在管理上，它们都可以作为组件进行统一管理，在实现上它们又各不相同，各自实现了具体的功能。开发者可根据具体的应用场景选择合适的组件。例如，显示内容可以选择Text、Image等，如果需要响应用户交互动作，则可以选择Button、Switch等组件。
HarmonyOS中也定义了ComponentContainer类，即组件容器类，该类继承了Component类，因此，组件容器实际上也是一种特殊的组件，它可以包含其他组件或组件容器。组件容器对应的是界面布局，常用的布局如DirectionalLayout、DependentLayout等，它们都继承自ComponentContainer，关于布局后续章节会进一步阐述。
在HarmonyOS应用开发中，UI实现包括Java UI和方舟开发两个框架，本章主要围绕Java UI框架阐述，Java UI框架提供了常用组件的Java实现。为了阐述方便，本书中把这些组件从主要功能方面划分为显示型组件和交互型组件，前者主要用于在应用界面中展示信息数据等，如显示文本、图片等，后者多用于和用户进行交互，如按钮单击、开关操作等。下面分别详细介绍一些组件，供开发者参考，需要特别注意的是所有的UI组件操作默认都是在界面主线程中执行的。
3.2显示型组件
显示型组件一般用于在应用界面中显示信息，如显示文字、展示图片等，一般不需要为组件编写事件响应代码，因此显示型组件一般通过XML文件定义其显示内容和效果，下面介绍几个常用的显示组件。



11min






3.2.1Text组件
Text组件，即文本组件，也可称为文本或文本显示组件，在应用开发中，当需要显示文本信息时，可以考虑使用Text组件。
1. 使用Text组件
使用Text组件的基本方法是在需要的界面布局中加入<Text>标签。实际上，当创建一个基本的应用工程时，向导创建的默认布局文件ability_main.xml中就有一个Text组件，在XML布局文件中，默认生成的代码如下：


<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical">

<Text

ohos:id="$+id:text_helloworld"

ohos:height="match_content"



ohos:width="match_content"

ohos:background_element="$graphic:background_ability_main"

ohos:layout_alignment="horizontal_center"

ohos:text="$string:HelloWorld"

ohos:text_size="50vp"

/>

</DirectionalLayout>


Text标签有若干属性，通过设置属性可以改变显示的内容和效果。所有的属性都是以ohos:开头的，这是HarmonyOS规定的属性开头，其含义是OpenHarmonyOS。
Text标签的属性值可以是直接值，如上述示例中Text的高度height、宽度width、布局中的对齐方式layout_alignment、文本大小text_size属性，它们被直接进行了赋值，其中，Text组件的高度值和宽度值的含义是适应其内容match_content，组件在布局中的对齐方式为水平居中horizontal_center，文本大小为50vp。
Text标签的属性值也可以是间接值，如上述示例中Text的背景元素background_element和文本内容text属性，它们的值中包含了$符号，$符号表示引用别的资源，如$graphic:background_ability_main表示引用graphic下的background_ability_main资源，被引用的资源要求必须是存在的，因此，本例要求在资源目录graphic下必须有一个background_ability_main.XML文件资源，该资源文件的内容如下：


<?xml version="1.0" encoding="UTF-8" ?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

 ohos:shape="rectangle">

 <solid

ohos:color="#FFFFFF"/>

</shape>


在该资源文件中定义了一个形状shape，该形状是一个矩形rectangle，该矩形是实心solid的，颜色color是白色#FFFFFF的，因此，ohos:background_element="$graphic:background_ability_main"的含义是说Text组件的背景是一个白色矩形。
再如，ohos:text="$string:HelloWorld"表示的是文本组件显示的文本内容取自资源string中的HelloWorld，因此，在资源目录element下有一个string.json文件，其中定义的所需的字符串资源如下：


{

"string": ［

{

"namie": "HelloWorld",

"value": "Hello World"

}

］

}


在该string.json文件中定义了一个字符串，名字为HelloWorld，值为Hello World，因此在文本组件中显示的内容为Hello World。
示例中Text组件的id属性值为"$+id:text_helloworld"，其值在包含了$符号的同时，还包含了+号，这个表示为该Text组件建立一个id，此时会在资源表文件ResourceTable.java中自动加入一个静态整型常量Id_text_helloworld，该常量可以供项目源代码使用，以便能够在程序中引用对应的Text组件。资源表文件是开发环境自动建立的帮助项目维护所建立的资源的源代码文件，一般不需要程序员修改，该文件位于项目的build＼generated＼souce＼r＼目录下。
2. 设置Text属性
前面已经使用了Text组件的一些属性，另外Text组件还有一些别的属性，通过设置Text组件的属性可以改变它的显示效果，下面介绍几个比较常用的属性。
文本颜色text_color、字体text_font、是否倾斜italic等属性是Text组件属性中关于文字显示效果的，下面的Text属性用于将字体设置为蓝色、大小设置为80vp、采用HwChinesemedium字体且倾斜效果。


ohos:text_color="blue"

ohos:text_size="80vp"

ohos:text_font="HwChinese-medium"

ohos:italic="true"


Text组件除了可以设置显示的文本内容外，还有一些组件显示样式设置，如显示的背景、形状等。如果要将组件背景设置为图形资源，首先需要创建一幅图形资源，创建方法是在graphic目录下创建XML资源文件。具体操作是右击resources/base/graphic，在弹出的窗口中选择New→File，如图32所示。随后会弹出输入文件名对话框，如图33所示，在输入框中输入创建的文件名，如输入text_element.xml，单击OK按钮，即可创建图形资源文件。


图32新建图形资源文件




图33新建文件文本框


编辑所建立的资源文件，建立<shape>节点，在其属性中指定形状，在其子节点中通过<solid>设置填充颜色。如形状为椭圆，背景为红色的背景资源代码如下：


<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="oval">

<solid

ohos:color="#FF0000"

></solid>

</shape>


创建好背景资源后，就可以在Text组件的属性中进行引用了，使用Text的背景元素属性background_element设置Text的背景代码如下：


ohos:background_element="$graphic:text_element"


Text组件还有关于边距的属性，组件中的文本内容在显示时可以设置文本距离组件边框的边距，这个边距称为内边距，内边距的相关属性为padding，组件和外部其他组件的边距称为外边距，外边距的相关属性为margin。内外边距既可以整体设置，也可以在上、下、左、右四方向上分别设置。
将Text的上外边距设置为10vp，将下外边距设置为10vp，将左内边距设置为50vp，将右内边距设置为50vp，代码如下：


ohos:top_margin="10vp"

ohos:bottom_margin="10vp"

ohos:left_padding="50vp"

ohos:right_padding="50vp"


另外，当Text组件的大小不足以显示其中的全部文本内容时，可以通过属性truncation_mode设置省略方式，该属性的值对应的含义如表31所示。


表31truncation_mode属性值说明



truncation_mode属性值说明
ellipsis_at_start
省略号在开头
ellipsis_at_middle
省略号在中间
ellipsis_at_end
省略号在末尾
auto_scrolling
自动滚动


其中，auto_scrolling表示自动滚动，可以实现跑马灯的效果。不过要让文本真正动起来，还需要运行代码支持，在代码中首先获得Text对象的引用，然后通过startAutoScrolling()方法启动自动滚动，这样就可以获得文本组件显示跑马灯的效果，核心代码如下：



public void onStart(Intent intent) {

super.onStart(intent);

//设置显示的布局

super.setUIContent(ResourceTable.Layout_ability_main);

//声明并绑定布局中Text组件text_helloworld

Text text = (Text)findComponentById

 (ResourceTable.Id_text_helloworld);

//将text设置为开启自动滚动

text.startAutoScrolling();

}










23min






3. Text使用实例
实例TextDemo给出了5个不同的Text组件显示效果，如图34所示，它们均被放置在屏幕的水平中间，它们的内容都是“欢迎来到鸿蒙开发世界”，它们的显示样式不同。



图34Text使用实例



实例TextDemo对应的布局文件ability_main.xml的具体的代码如下：



//ch03＼TextDemo项目中的ability_main.xml

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:orientation="vertical">

<Textohos:id="$+id:text_1"

ohos:height="match_content"

ohos:width="match_content"

ohos:layout_alignment="horizontal_center"

ohos:text="欢迎来到鸿蒙开发世界"

ohos:text_size="28fp"/>

<Text

ohos:id="$+id:text_2"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="$graphic:background_ability_main"

ohos:layout_alignment="horizontal_center"

ohos:text="欢迎来到鸿蒙开发世界"

ohos:text_color="blue"

ohos:text_font="HwChinese-medium"

ohos:italic="true"

ohos:text_size="80"

/>

<Text

ohos:id="$+id:text_3"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="$graphic:text_element"

ohos:layout_alignment="horizontal_center"

ohos:text="欢迎来到鸿蒙开发世界"

ohos:text_color="blue"

ohos:text_font="HwChinese-medium"

ohos:italic="true"

ohos:text_size="80"

/>

<Text

ohos:id="$+id:text_4"

ohos:height="100vp"

ohos:width="260vp"

ohos:layout_alignment="horizontal_center"

ohos:background_element="$graphic:text_element"

ohos:text="欢迎来到鸿蒙开发世界"

ohos:text_color="blue"



ohos:text_size="80"

ohos:top_margin="10vp"

ohos:left_padding="50vp"

ohos:truncation_mode="ellipsis_at_end"

/>

<Text

ohos:id="$+id:text_5"

ohos:height="100vp"

ohos:width="260vp"

ohos:layout_alignment="horizontal_center"

ohos:background_element="$graphic:text_element"

ohos:text="欢迎来到鸿蒙开发世界"

ohos:text_color="blue"

ohos:text_size="80"

ohos:top_margin="10vp"

ohos:left_padding="50vp"

ohos:truncation_mode="auto_scrolling"

/>

</DirectionalLayout>


实际上，对于Text组件的属性，在对应的Text类实现中，一般提供了对应的set()方法，可以进行属性设置，例如： Text类提供了一个setTruncationMode()方法，该方法可以在代码中设置truncation_mode的取值，设置文本自动滚动模式的代码如下：


//ch03＼TextDemo项目中的MainAbilitySlice.java

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

Text text = (Text)findComponentById(ResourceTable.Id_text_5);

//自动滚动

text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);

text.startAutoScrolling();

}


通过text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING)方法设置文本组件自动滚动模式和在XML文件中设置是等价的，HarmonyOS体系Java UI框架提供了XML中的属性值和Text类中的常量对应关系，如表32所示。


表32truncation_mode设置值的对应关系



XML中的属性值Text类中对应的常量
auto_scrollingText.TruncationMode.AUTO_SCROLLING
ellipsis_at_startText.TruncationMode.ELLIPSIS_AT_START
ellipsis_at_middleText.TruncationMode.ELLIPSIS_AT_MIDDLE
ellipsis_at_endText.TruncationMode.ELLIPSIS_AT_END

另外，绝大多数组件的常用属性可以通过对应的组件类的set()方法进行设置，set()方法的名称和属性的名称基本是对应的。



18min






3.2.2Image组件
Image是用来显示图片的组件，在程序开发中，经常会遇到需要显示图片的情形，这时就可以考虑使用该组件了。使用Image需要为其准备其中显示的图片，项目中的图片资源一般放在entry→src→main→resources→base→media文件夹下。

这里准备一张图片，文件名为Harmonyos.png，如图35所示，将此图片放到media目录下，后面将通过$media:HarmonyOS引用该图片资源。

1. 使用Image组件
创建Image组件和Text组件的方式类似，可以在XML布局文件中添加Image节点，也可以在代码中直接创建Image对象。在XML布局文件中添加Image节点的参考代码如下：



//ch03＼ImageDemo项目中的Ability_main.xml

<?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="match_content"

ohos:width="match_content"

ohos:image_src="$media:HarmonyOS"/>

</DirectionalLayout>


以上布局运行出的显示效果如图36所示。


图35Harmonyos.png图片



图36使用Image组件


2. Image常用属性
通过alpha属性可以设置Image的透明度，alpha取值范围为0~1，0表示完全透明，1表示完全不透明。
图片缩放也是经常使用的，Image组件提供了scale_x、scale_y两个属性，可以分别设置其中的图片在X、Y轴方向缩放的倍数。以下代码是将图片设置为50%透明，X轴方向缩小到0.5倍，Y轴方向放大到2倍的属性设置代码：


ohos:alpha="0.5"

ohos:scale_y="2"

ohos:scale_x="0.5"


图片缩放默认为以Image组件中心为基准点的，当Image组件的宽度和高度与图片本身的宽度和高度比例不一致时，缩放可能会出现图片显示不正常的情况。Image组件提供了一个scale_mode属性，可以让Image组件中的图片以一定的方式适应组件。
例如，当将Image的宽度和高度值都设置为200vp时，按比例放大或缩小并居中显示图片的代码如下：


<Image

ohos:height="200vp"

ohos:width="200vp"

ohos:background_element="#FF0000"

ohos:image_src="$media:HarmonyOS"

ohos:scale_mode="zoom_center"

/>


运行效果如图37所示，背景展示了Image组件的大小，图片以中心为原点进行了自动放大，当宽度和组件大小一样后，适配了组件大小，上下留了一些组件背景。


图37按照zoom_center缩放并居中显示


当scale_mode取不同的值时，对应的图片放大或缩小适配组件的方式如表33所示。


表33Image支持的缩放方式



scale_mode值缩 放 方 式
zoom_center
按比例将原图扩大或缩小到Image的宽或高，居中显示，在宽或高有一个方向上撑满组件。此情况下，图片显示是完整的，组件背景不一定会被完全覆盖
zoom_start宽和高按比例将原图扩大或缩小到Image组件的边界，和居中显示不同的是，此时图片放置在Image组件的左上角位置
zoom_end
缩放同上，不同的是图片放置在Image组件的右下角位置
stretch
图片拉伸或挤压到Image组件的大小，图片撑满整个组件，不一定保持原来的宽高比
center
保持原图片的大小，图片显示在Image组件的中心。当图片尺寸小于组件大小时，按图片大小显示； 当图片的尺寸大于Image组件的尺寸时，对超过部分进行裁剪处理
inside
图片放置到Image组件内，当图片大于组件大小时，按比例将原图缩小到Image的宽度或高度，将图片的内容完整地居中显示； 当图片小于组件大小时，直接居中显示图片
clip_center
按比例将原图扩大或缩小到Image组件大小，图片恰好可以覆盖满组件，对多余的部分进行裁剪。此情况下，组件背景会被完全覆盖，图片不一定显示完整

除了缩放，图片裁剪也是比较常用的功能，一般情况下，当所展示的图片大于所在的Image组件大小时，就会进行裁剪。裁剪可以选择不同的对齐方式，关于裁剪的对齐方式，读者可以认为Image组件就是一个贴板，其中的图片可以认为是贴纸，当贴纸大于贴板时，会进行裁剪，裁剪前需要把贴纸放到贴板的指定位置，也就是和贴板的哪个边或角对齐的问题。Image组件提供的clip_alignment属性可以设置裁剪方式，以下代码是将裁剪对齐方式设置为左侧对齐：


ohos:clip_alignment="left"


默认情况下，裁剪的对齐方式是居中的，因此以上代码的功能是将裁剪对齐设置为水平方向左侧对齐、垂直方向居中对齐。clip_alignment属性的取值和裁剪对齐方式如表34所示。



表34Image裁剪方式



clip_alignment值裁剪方式说明
left
图片左侧和Image组件对齐，裁剪右侧
right
图片右侧和Image组件对齐，裁剪左侧
top
图片上方和Image组件对齐，裁剪下侧
bottom
图片底部和Image组件对齐，裁剪上侧
center
图片中心和Image组件对齐，裁剪四周

在进行裁剪对齐方式设置时，可以多个值同时使用，如设置右侧下侧对齐方式的代码如下：


ohos:clip_alignment="right|bottom"


此代码采用的是一种或运算，但实际上表示的是而且关系，也就是同时具有两个值的效果。



8min






3.2.3DatePicker组件
DatePicker是一个日期组件，应用中有时需要选择填写日期，DatePicker组件是专门用来显示选择日期的。
使用DatePicker组件可以在布局中加入<DatePicker>节点，设置宽和高等属性即可创建DatePicker组件，下面是使用该组件的示例代码：


//ch03＼DatePicker项目中的ability_main.xml

<?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">

<DatePicker

ohos:id="$+id:data_picker"

ohos:height="match_content"

ohos:width="match_parent"

ohos:date_order="year-month-day"

ohos:text_size="30vp"

ohos:selected_text_size="36vp"

ohos:normal_text_color="blue"

ohos:selected_text_color="red"

ohos:background_element="#CCCCCC"

/>

</DirectionalLayout>


以上代码的运行效果如图38所示，默认显示选中的日期是当天。


图38DatePicker显示效果


DatePicker组件常用的属性说明如表35所示，开发者可以根据需要进行相应的属性设置，以便满足应用使用日期组件的具体需求。


表35DatePicker的常用属性及说明



属性名称描述取值及说明使用举例
date_order设置显示格式，值实际为0~10枚举值，不同的值组件显示的日期格式不同daymonthyear显示为日月年

monthdayyear显示为月日年

yearmonthday显示为年月日

yeardaymonth显示为年日月

daymonth显示为日月

monthday显示为月日

yearmonth显示为年月

monthyear显示为月年

onlyyear仅显示年

onlymonth仅显示月

onlyday仅显示日
ohos:date_order="yearmonthday"
year_fixed是否固定年份，如果固定，则年份不能改变true或false
true表示固定，false 表示不固定，默认值为false
ohos:year_fixed="true"

ohos:year_fixed="$boolean:true"
month_fixed是否固定月份同上ohos:month_fixed="true"

ohos:month_fixed="$boolean:true"
day_fixed是否固定日期同上ohos:day_fixed="true"
ohos:day_fixed="$boolean:true"
text_size默认文本大小取值的默认单位为px，可以是带px/vp/fp单位的浮点数值，可以是浮点数值，也可以引用float资源ohos:text_size="30"

ohos:text_size="16fp"

ohos:text_size="$float:size_value"
normal_text_size未选中文本的大小同上ohos:normal_text_size="30"
ohos:normal_text_size="16fp"
ohos:normal_text_size="$float:size_value"

selected_text_size选中的文本的大小同上ohos:selected_text_size="30"
ohos:selected_text_size="16fp"
ohos:selected_text_size="$float:size_value"
normal_text_color未选中文本的颜色可以直接设置色值，可以使用常用的颜色名称，也可以引用颜色资源ohos:normal_text_color="#0000FF"
ohos:normal_text_color="#blue"

ohos:normal_text_color="$color:blue"


续表




属性名称描述取值及说明使用举例

selected_text_color选中文本的颜色同上ohos:selected_text_color="#FF0000"
ohos:selected_text_color="red"
ohos:selected_text_color="$color:red"
operated_text_color操作时文本显示的颜色，当操作选择年、月或日时，文本显示的颜色同上ohos:operated_text_color="#00FF00"
ohos:operated_text_color="green"

ohos:operated_text_color="$color:green"
selector_item_num组件界面上显示供选择的项数取值为一个整数，如5表示5个日期显示在界面上ohos:selector_item_num="5"
ohos:selector_item_num="$integer:num"
wheel_mode_enabled是否为循环模式，如选择月份，向上滑动到12后，是否出现1月true表示循环模式，false表示不循环ohos:wheel_mode_enabled="true"
ohos:wheel_mode_enabled="$boolean:true"




11min






3.2.4TimePicker组件
TimePicker是用来选择时间的组件，和DatePicker显示选择的年、月、日不同，TimePicker显示选择的是时、分、秒，当应用中需要显示时间和选择功能时，就可以考虑使用TimePicker组件。
TimePicker的用法与DatePicker比较类似，在需要显示时间的布局中添加<TimePicker>组件标签即可。下面是TimePicker使用的一段示例代码：


//ch03＼TimePickerShow项目中的ability_main.xml

<?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">

<TimePicker

ohos:height="match_content"

ohos:width="match_parent"

ohos:mode_24_hour="false"

ohos:am_pm_order="left"

ohos:hour="22"


ohos:minute="30"

ohos:second="29"

ohos:text_pm="下午"



ohos:normal_text_size="30fp"

ohos:selected_text_size="50fp"

ohos:selected_text_color="#0000FF"

ohos:shader_color="#DCFFC2F7"

ohos:bottom_line_element="#FF7700FF"/>

</DirectionalLayout>




图39TimePicker示例


该例子中设置了TimePicker的几个属性，包括高度(height)、宽度(width)、是否为24h制(mode_24_hour)、上下午位置(am_pm_order)、默认选中的时分秒(hour、minute、second)、字体大小(normal_text_size)、选中文本大小(normal_text_size)、选中文本颜色(selected_text_color)、组件背景色(shader_color)、下画线(bottom_line_element)等，运行的效果如图39所示。

TimePicker组件的常用属性和DatePicker的常用属性比较类似，具体如表36所示，开发者可以根据需要进行相应的属性设置，以便满足具体应用的需求。


表36TimePicker组件的常用属性



属 性 名 称描述取值及说明使 用 案 例
mode_24_hour设置是否以24h制显示时间，不设置时该属性默认为24h制true或false，true表示是，false表示否ohos:mode_24_hour="true"

ohos:mode_24_hour="$boolean:true"
am_pm_order上午和下午的位置，当不采用24h制时，该属性才生效
left表示上/下午在组件左侧；

right表示上/下午在组件右侧
ohos:am_pm_order="2"
text_am上午显示的文本内容字符串，或直接设置文本字符串，或引用string资源ohos:text_am="上午"
ohos:text_am="$string:am"

text_pm下午显示的文本内容同上ohos:text_pm="下午"
ohos:text_pm="$string:pm"

hour
默认选中显示的小时值取值为0~23，可直接设置整型数值，也可以引用integer资源
ohos:hour="22"

ohos:hour="$integer:hour"
minute
默认选中显示的分钟值
取值为0~59，可直接设置整型数值，也可引用integer资源
ohos:minute="30"

ohos:minute="$integer:minute"

续表




属 性 名 称描述取值及说明使 用 案 例

second
默认选中显示的秒值
同上
ohos:second="29"

ohos:second="$integer:second"
normal_text_size
未选中时间文本的大小
默认单位为px，可为带px/vp/fp单位的浮点值，也可引用float资源
ohos:normal_text_size="30"

ohos:normal_text_size="16fp"

ohos:normal_text_size="$float:size_value"
selected_text_size
选中的时间文本的大小
同上
ohos:selected_text_size="30"

ohos:selected_text_size="16fp"

ohos:selected_text_size="$float:size_value"
normal_text_color
未选中时间文本的颜色
可直接设置颜色值，可使用常用的颜色名称，也可以引用颜色资源
ohos:normal_text_color="#0000FF"

ohos:normal_text_color="#blue"

ohos:normal_text_color="$color:blue"
selected_text_color
选中文本时间的颜色
同上
ohos:selected_text_color="#FF0000"

ohos:selected_text_color="red"

ohos:selected_text_color="$color:red"
operated_text_color
操作时时间文本的颜色，当操作选择年或月或日时，文本显示的颜色
同上
ohos:operated_text_color="#00FF00"

ohos:operated_text_color="green"

ohos:operated_text_color="$color:green"
shader_color
组件背景颜色
同上
ohos:shader_color="#DCFFC2F7"

ohos:shader_color="black"

ohos:shader_color="$color:black"
top_line_element
选中时间的上线显示效果
可直接配置色值，可引用color资源，也可引用media/graphic中的图资源
ohos:top_line_element="#FF7700FF"

ohos:top_line_element="red"

ohos:top_line_element="$color:red"

ohos:top_line_element="$media:media_src"

ohos:top_line_element="$graphic:graphic_src"
bottom_line_element
选中时间的下线显示效果
同上
ohos:bottom_line_element="#FF7700FF"

ohos:bottom_line_element="$color:red"

ohos:bottom_line_element="$media:media_src"

ohos:bottom_line_element="$graphic:graphic_src"


续表




属 性 名 称描述取值及说明使 用 案 例

selector_item_num组件界面上显示供选择的项数
整数，如5表示5个时间显示在界面上ohos:selector_item_num="5"

ohos:selector_item_num="$integer:num"
wheel_mode_enabled
是否为循环模式，如选择小时，向上滑动到23时，是否出现0月
true表示循环模式，false表示不循环，默认模式为不循环
ohos:wheel_mode_enabled="true"

ohos:wheel_mode_enabled="$boolean:true"




5min






3.2.5ProgressBar组件
ProgressBar为进度条组件，在开发过程中，经常会遇到进度的显示，如下载文件进度、资源加载进度等，ProgressBar组件可以在应用界面中显示某种进度。
ProgressBar进度条对应的标签为<ProgressBar>，使用方法和其他组件类似，在需要的布局中添加<ProgressBar>节点，配置需要的属性，下面是一个配置进度条的示例代码：


//ch03＼ProgressBar项目中的ability_main.xml

<?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">

<ProgressBar

ohos:height="60vp"

ohos:width="300vp"

ohos:progress_width="10vp"

ohos:orientation="horizontal"

ohos:background_element="#888888"

ohos:background_instruct_element="#FF0000"

ohos:progress_color="#00FF00"

ohos:min="0"

ohos:max="100"

ohos:progress="30"

ohos:progress_hint_text="30%"

ohos:layout_alignment="center"/>

</DirectionalLayout>


以上代码运行的效果如图310所示，该示例展示了ProgressBar常用的一些属性效果。


图310ProgressBar效果图


ProgressBar常用属性如表37所示，开发者可以根据需要选择合适的属性进行设置。


表37ProgressBar组件的常用属性



属 性 名 称描述取值及说明使 用 举 例
height组件的高度单位为px的整数值，或单位为px/vp/fp的浮点数值，也可以引用资源ohos:height="20"

ohos:height="60vp"

ohos:height="$float:size_value"
width组件的宽度同上ohos:width="100"
ohos:width="300vp"

ohos:width="$float:size_value"
progress_width进度条的宽度同上ohos:progress_width="10vp"
progress_color组件中完成进度部分的颜色可直接设置颜色值，也可引用color资源
ohos:progress_color="#00FF00"

ohos:progress_color="$color:green"
progress_element组件中完成进度部分的元素或为配置颜色值，或引用color资源，或引用media/graphic下的图片资源
ohos:progress_element="#00FF00"

ohos:progress_element="$color:green"

ohos:progress_element="$media:media_src"

ohos:progress_element="$graphic:graphic_src"
background_instruct_element
组件中进度部分的元素
同上
类似progress_element取值
background_element
整个组件的背景元素
同上
类似progress_element取值
progress_hint_text进度条上提示的文本信息字符串，可以设置文本字串，也可以引用string资源ohos:progress_hint_text="30%"

ohos:progress_hint_text="$string:test_str"


续表




属 性 名 称描述取值及说明使 用 举 例


progress_hint_text_color进度条上提示文本信息的颜色可以直接设置颜色值，也可以引用color资源ohos:progress_hint_text_color="#000000"

ohos:progress_hint_text_color="$color:black"
progress_hint_text_size进度条上提示文本信息的大小float类型，其默认单位为px； 可以是带px/vp/fp单位的浮点数值； 也可以引用float资源
ohos:progress_hint_text_size="100"

ohos:progress_hint_text_size="20fp"

ohos:progress_hint_text_size="$float:size_value"
progress_hint_text_alignment进度条上提示文本信息的对齐方式left表示左对齐，right表示右对齐，top表示顶部对齐，bottom表示底部对齐，horizontal_center表示水平居中，vertical_center表示垂直居中，center表示居中
可以设置单个值，也可以使用“|”进行多值组合。

ohos:progress_hint_text_alignment="top"

ohos:progress_hint_text_alignment="top|left"
max最大值，进度条进度结束时的值整数，可以直接设置整型数值，也可以引用integer资源ohos:max="100"

ohos:max="$integer:i100"
min最小值，进度条进度开始时的值同上ohos:min="0"
ohos:min="$integer:i0"
progress进度条当前的进度值整数，介于最大值和最小值之间ohos:progress="30"
ohos:progress="$integer:i30"
step进度的步长整数，默认值为1。若将step设置为10，进度值则为10的倍数ohos:step="10"

ohos:step="$integer:ten"
orientation组件的放置方向水平或垂直，horizontal表示水平，vertical表示垂直，默认为水平放置
ohos:orientation="horizontal"

ohos:orientation="vertical"


续表




属 性 名 称描述取值及说明使 用 举 例

divider_lines_enabled
进度条进度是否分段显示
true表示分段显示，false表示不分段，默认值是false
ohos:divider_lines_enabled="true"

ohos:divider_lines_enabled="$boolean:true"
divider_lines_number进度条进度分段显示时的分段数整数，介于最大值和最小值之间
ohos:progress="5"

ohos:progress="$integer:i5"

3.3交互型组件
交互型组件一般在用于界面显示信息的同时还需要用户与之进行交互，如输入文字、单击、滑动等。交互型组件的外观一般通过属性进行定义，这一点和前面介绍的显示型组件类似，组件交互过程一般需要编写事件响应代码，关于响应代码将在事件处理部分详细介绍。下面主要介绍几个常用的交互型组件的基本用法。



12min






3.3.1TextField组件
TextField组件，即文本框组件，也可称为文本域或输入框组件。文本框主要用于用户输入文本内容，如输入用户名、密码等。在Java UI框架中的TextField类继承了Text类，因此Textfield组件拥有Text组件所拥有的属性，文本框特有的主要功能是文本的输入。TextField类似于Android中的EditText或iOS中的UITextField，下面具体介绍一下TextField组件。
1. 使用TextField组件
使用文本框组件可以在相应布局文件中添加<TextFiled>节点，通过设置属性修饰组件，如组件大小、背景颜色、提示信息等。下面是一个通过XML布局文件使用文本框的例子代码：


//ch03＼TextField项目中的ability_main.xml

<?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">

<TextField

ohos:height="40vp"

ohos:width="260vp"

ohos:left_padding="10vp"



ohos:text_alignment="center"

ohos:layout_alignment="center"

ohos:hint="输入电话号码"

ohos:text_size="30fp"

ohos:background_element="$graphic:background_textfield"

/>

</DirectionalLayout>


以上代码在设置文本框背景元素(background_element)时引用了图形资源，所引用的资源文件background_textfield.xml的代码如下：


//ch03＼TextField项目中的background_textfield.xml

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle">

<corners

ohos:radius="40" />

<solid

ohos:color="#999999" />

</shape>


以上示例代码的运行效果如图311、图312所示，单击文本输入框可以输入文本信息，输入信息时提示的信息“输入电话号码”会自动消失，同时自动弹出输入虚拟键盘。


图311TextField运行效果




图312文本框输入时的效果



2. TextField常用属性
对于TextField组件，Text组件所拥有的属性TextField都有，因此一些基本的属性这里不再赘述。文本框主要用于输入文本，当光标点移入文本框时，界面上会出现一个气泡，如果开发者不想使用默认的气泡样式，可以通过element_cursor_bubble属性进行重新设置，该属性可以采用一幅图形资源作为值，也可以自由定义所需要的样式，如下代码为设置气泡的例子：


…

<TextField

…

ohos:element_cursor_bubble="$graphic:cursor_bubble_textfield"

/>

…


其中，引用了图形资源cursor_bubble_textfield，该资源对应的资源文件cursor_bubble_textfield.xml的代码如下：


//ch03＼TextField项目中的cursor_bubble_textfield.xml

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="oval">

<solid

ohos:color="#0000FF"/>

<stroke

ohos:width="5vp"

ohos:color="#FF0000"/>

</shape>




图313修改气泡后的效果图


这里定义的气泡形状是一个圆形oval，填充颜色为蓝色#0000FF，边线宽度是5个虚拟像素5vp，颜色是红色#FF0000，运行效果如图313所示。

multiple_lines属性可以设定是否多行显示，若该属性值为true则表示多行，若该属性值为false，则表示单行显示。多行显示效果与TextFiled组件的高度有关系，当高度值不够大时可能无法显示多行效果。
basement属性可以为文本框设置一个基线，也就是可以在文本框下面加一条带颜色的线，该属性的值为基线的颜色。
在实际应用中，我们还会经常碰到输入密码、输入手机号等具有一定限制的文本框输入。如输入密码时往往不希望以明文的形式显示，而是希望以掩码的方式显示，即用符号“*”遮挡所输入的密码内容。在输入手机号时，希望直接弹出的是数字键盘，而非字母键盘，免得进行键盘切换。为了提供更好的输入体验，文本框组件提供了text_input_type属性，该属性值及说明如表38所示。


表38文本输入类型的取值及说明



text_input_type属性值说明
ohos:text_input_type="pattern_null"
无约束限制
ohos:text_input_type="pattern_text"
普通文本
ohos:text_input_type="pattern_number"
数字模式，显示数字键盘
ohos:text_input_type="pattern_password"
密码模式，输入内容以*显示




7min






3.3.2Button组件
Button,即按钮，是最常用的组件之一。按钮可由文本组成，也可由图标组成，还可由图标和文本共同组成。
1. 使用Button组件
使用Button组件时可以在布局中添加<Button>节点，也可以在代码中实例化Button按钮。下面以在布局文件中添加Button节点为例，来说明按钮组件的使用。
如在所建的项目src→main→resources→layout布局目录下，在布局文件ability_main.xml中添加按钮组件的示例代码如下：


//ch03＼Button项目中的ability_main.xml

<?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">

<Button

ohos:id="$+id:button01"

ohos:height="match_content"

ohos:width="match_content"

ohos:layout_alignment="center"

ohos:text_size="50fp"

ohos:text="按钮01"

ohos:element_left="$media:icon"

ohos:background_element="$graphic:background_button01"

/>

</DirectionalLayout>


上面代码在按钮的左侧加入了一张图标，引用的是$media:icon图标资源，这张图片资源是创建项目时自带的一个默认图标，用户可以根据需要添加并使用新的图片资源。
按钮的形状也是通过引用的资源定义的，background_element属性引用的$graphic:background_button01资源在graphic目录下，对应的XML文件名为background_button01.xml，其中定义了一个基本的矩形形状，其代码如下：


//ch03＼Button项目中的background_button01.xml

<?xml version="1.0" encoding="UTF-8" ?>

<shape xmlns:ohos="http://schemas.huawei.com/res.ohos"

 ohos:shape="rectangle">

 <solid

ohos:color="#FF007DFF"/>

</shape>


以上示例代码运行的效果如图314所示。

2. 多种形状Button
按钮可以根据需要制作成不同的形状，如矩形按钮、胶囊按钮、椭圆按钮和圆形按钮等以适用于不同的应用场景，其效果如图315所示。


图314Button运行效果图




图315不同形状的按钮



默认情况下使用的按钮为矩形按钮，可以改变按钮中显示的文本和背景的颜色，当然也可以通过背景元素ohos:background_element属性设置指定的形状。
胶囊按钮可以通过将背景元素设置为圆角矩形形状实现，椭圆按钮都可以通过设置椭圆形状实现，当椭圆按钮的高和宽一样时，便成为圆形按钮。
图315显示的是不同形状的按钮，对应的实现代码如下：


//ch03＼ButtonFourShape项目中的ability_main.xml

<?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">

<Button

ohos:id="$+id:button01"

ohos:height="50vp"

ohos:width="200vp"

ohos:background_element="$graphic:element_button_rectangle"

ohos:element_left="$media:icon"

ohos:layout_alignment="center"

ohos:bottom_margin="15vp"

ohos:left_padding="10vp"

ohos:right_padding="10vp"

ohos:text="矩形按钮"

ohos:text_size="30fp"

/>

<Button

ohos:id="$+id:button02"

ohos:height="50vp"

ohos:width="200vp"

ohos:background_element="$graphic:element_button_capsule"

ohos:element_left="$media:icon"

ohos:layout_alignment="center"

ohos:bottom_margin="15vp"

ohos:left_padding="10vp"

ohos:right_padding="10vp"

ohos:text="胶囊按钮"

ohos:text_size="30fp"/>

<Button

ohos:id="$+id:button03"

ohos:height="50vp"

ohos:width="200vp"

ohos:background_element="$graphic:element_button_oval"

ohos:element_left="$media:icon"

ohos:layout_alignment="center"

ohos:bottom_margin="15vp"

ohos:left_padding="10vp"

ohos:right_padding="10vp"

ohos:text="椭圆按钮"

ohos:text_size="30fp"

/>

<Button

ohos:id="$+id:button04"

ohos:height="50vp"

ohos:width="50vp"

ohos:background_element="$graphic:element_button_oval"

ohos:layout_alignment="center"



ohos:bottom_margin="15vp"

ohos:left_padding="10vp"

ohos:right_padding="10vp"

ohos:text="+"

ohos:text_size="30fp"

/>

</DirectionalLayout>


其中，矩形按钮对应的资源文件element_button_rectangle.xml的代码如下：


//ch03＼ButtonFourShape项目中的element_button_rectangle.xml

<?xml version="1.0" encoding="UTF-8" ?>

<shape

xmlns:ohos="http://schemas.huawei.com/res.ohos"

ohos:shape="rectangle">

<solid

ohos:color="#007CFD"/>

</shape>


在胶囊按钮对应的资源文件中，通过<corners>标签将圆角的半径设置为100，资源文件element_button_capsule.xml的代码如下：


//ch03＼ButtonFourShape项目中的element_button_capsule.xml

<?xml version="1.0" encoding="UTF-8" ?>

<shape

xmlns:ohos="http://schemas.huawei.com/res.ohos"

ohos:shape="rectangle">

<corners

ohos:radius="100"/>

<solid

ohos:color="#007CFD"/>

</shape>


椭圆和圆按钮对应的资源文件element_button_oval.xml的代码如下：


//ch03＼ButtonFourShape项目中的element_button_oval.xml

<?xml version="1.0" encoding="utf-8" ?>

<shape

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="oval">

<solid

ohos:color="#007CFD">

</solid>

</shape>





6min








图316Checkbox使用示例

3.3.3Checkbox组件
Checkbox，即复选框，或称为多选按钮。在一些应用中会碰到多选的情况，如考试系统中的多选题、调查问卷中的爱好选择统计等。Checkbox是专门为多选提供的组件。
下面通过一个调查兴趣爱好的例子，说明一下复选框的基本用法。该示例运行的效果如图316所示，可以通过单击选择自己的爱好。
实现该效果，需要在布局文件中添加4个<Checkbox>节点，分别代表4个爱好选项，设置组件的宽、高等基本属性，这些和按钮、文本等组件类似，Checkbox提供了两个特有的属性，一个是ohos:text_color_on，另一个是ohos:text_color_off，它们可以分别表示当选中和未选中时组件中显示的内容信息，下面是兴趣爱好示例的具体布局代码：


//ch03＼CheckboxDemo项目中的ability_main.xml

<?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">

<DirectionalLayout

ohos:height="match_content"

ohos:width="match_parent"

ohos:orientation="horizontal">

<Text

ohos:height="match_content"

ohos:width="match_content"

ohos:text="你的兴趣爱好有哪些？"

ohos:text_size="25fp"/>

<Text

ohos:id="$+id:text_answer"

ohos:height="match_content"

ohos:width="match_content"

ohos:text="()"

ohos:text_size="25fp"/>

</DirectionalLayout>

<Checkbox

ohos:id="$+id:check_box_1"

ohos:height="match_content"

ohos:width="match_content"



ohos:background_element="#CCCCCC"

ohos:left_margin="10vp"

ohos:text="A 读书"

ohos:text_color_off="#000000"

ohos:text_color_on="#FF3333"

ohos:text_size="25fp"

ohos:top_margin="5vp"/>

<Checkbox

ohos:id="$+id:check_box_2"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="#CCCCCC"

ohos:left_margin="10vp"

ohos:text="B 足球"

ohos:text_color_off="#000000"

ohos:text_color_on="#FF3333"

ohos:text_size="25fp"

ohos:top_margin="5vp"/>

<Checkbox

ohos:id="$+id:check_box_3"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="#CCCCCC"

ohos:left_margin="10vp"

ohos:text="C 跑步"

ohos:text_color_off="#000000"

ohos:text_color_on="#FF3333"

ohos:text_size="25fp"

ohos:top_margin="5vp"/>

<Checkbox

ohos:id="$+id:check_box_4"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="#CCCCCC"

ohos:left_margin="10vp"

ohos:text="D 旅游"

ohos:text_color_off="black"

ohos:text_color_on="#FF3333"

ohos:text_size="25fp"

ohos:top_margin="5vp"/>

</DirectionalLayout>


3.3.4RadioButton/RadioContainer
RadioButton，即单选按钮，或称为单选框。和复选框不同的是单选框一般应用于多选一的情况，如性别选择、回答是与否的选择等。对于单选框需要在一个组内实现互斥，为了更好地实现这一点，在使用单选框(RadioButton)时，一般还会使用单选框容器(RadioContainer)，位于同一个单选框容器中的单选框自动实现互斥，即同一时刻只能有一个会被选中。
下面是一个通过单选按钮选择性别的示例，该示例的运行效果如图317所示。


图317单选按钮示例


该示例对应的布局代码如下：


//ch03＼RadioButtonDemo项目中的ability_main.xml

<?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">

<Text

ohos:height="match_content"

ohos:width="match_content"

ohos:text="请你选择性别"

ohos:text_size="25fp"/>

<RadioContainer

ohos:id="$+id:radio_container"

ohos:height="match_content"

ohos:width="match_parent"

ohos:orientation="vertical">

<RadioButton

ohos:id="$+id:r_btn_male"

ohos:height="match_content"



ohos:width="match_content"


ohos:background_element="#CCCCCC"

ohos:left_margin="10vp"

ohos:text="男"

ohos:text_color_off="#000000"

ohos:text_color_on="#ff3333"

ohos:text_size="25fp"

ohos:top_margin="5vp"

/>

<RadioButton

ohos:id="$+id:r_btn_female"

ohos:height="match_content"

ohos:width="match_content"

ohos:background_element="#CCCCCC"

ohos:left_margin="10vp"

ohos:text="女"

ohos:text_color_off="#000000"

ohos:text_color_on="#ff3333"

ohos:text_size="25fp"

ohos:top_margin="5vp"

/>

</RadioContainer>

</DirectionalLayout>


该示例布局中有两个单选按钮，一个文本显示的内容是“男”，另一个文本显示的内容是“女”，它们位于同一个单选按钮容器中，因此当选择其中一个选项时，另外一个选项会自动取消。
3.3.5Switch组件
Switch，即开关组件，在手机设置界面，经常会看到开关按钮，应用开发中使用Switch组件可以实现开关功能。
如下是一个模仿常用的设置中打开和关闭个人热点的界面，布局代码如下：


//ch03＼SwitchDemo项目中的ability_main.xml

<?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="horizontal">

<Text

ohos:height="match_content"

ohos:width="match_content"



ohos:text="个人热点"

ohos:top_margin="15vp"

ohos:left_margin="10vp"

ohos:text_size="30vp"/>

<Switch

ohos:height="30vp"

ohos:width="60vp"

ohos:top_margin="10vp"

ohos:left_margin="160vp"

ohos:text_state_off="关"

ohos:text_state_on="开"

ohos:text_size="20vp"

/>

</DirectionalLayout>


组件中的text_state_off和text_state_on属性分别用来设置关闭和打开状态时显示的文本，运行效果如图318(a)和图318(b)所示。


图318Switch开关效果图


当然，Switch开关组件可以通过设置更多属性来修饰其显示效果。



14min






3.4组件应用示例
本节以一般的应用登录界面为例，综合应用前面所学的组件，本例运行后显示的效果如图319所示。登录界面的最上方有一张图片logo，其下是输入用户名和密码框，再往下是记住密码选项，然后是登录和注册功能，最下方是忘记密码功能。


图319登录界面示例效果


该示例中，各个功能与所使用的组件的对应关系如表39所示。


表39文本输入类型的取值及说明



功能使用组件及说明
最上方的图片logo
Image组件
请输入用户名
TextField组件，通过basement实现底边线显示效果
请输入密码
TextField组件，通过basement实现底边线显示效果
记住密码
CheckBox组件
登录
Button组件，通过背景图形实现圆角效果
注册
Button组件，通过背景图形实现圆角效果
忘记密码
Text组件
忘记密码下方线
Text组件，通过背景线及组件高度控制，显示线效果

该示例的布局实现代码如下：


//ch03＼LoginUIDemo项目中的ability_main.xml

<?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:alignment="center"

ohos:orientation="vertical">



<Image

ohos:height="100vp"

ohos:width="100vp"

ohos:foreground_element="$media:icon"

ohos:margin="20vp"




/>



<TextField

ohos:height="match_content"

ohos:width="200vp"

ohos:basement="$graphic:bg_line"

ohos:hint="$string:inputName"

ohos:margin="10vp"

ohos:text_alignment="center"

ohos:text_size="27vp"

/>



<TextField

ohos:height="match_content"

ohos:width="200vp"

ohos:basement="$graphic:bg_line"

ohos:hint="$string:inputPassword"

ohos:margin="10vp"

ohos:text_alignment="center"

ohos:text_input_type="pattern_password"

ohos:text_size="27vp"

/>



<Checkbox

ohos:height="match_content"

ohos:width="150vp"

ohos:bubble_height="50vp"

ohos:check_element="$graphic:checkbox"

ohos:margin="10vp"

ohos:text="$string:checkPassword"

ohos:text_size="22vp"

/>



<DirectionalLayout

ohos:height="match_content"

ohos:width="match_parent"

ohos:alignment="center"

ohos:orientation="horizontal">



<Button

ohos:height="match_content"

ohos:width="120vp"

ohos:background_element="$graphic:bg_button"

ohos:margin="10vp"

ohos:padding="3vp"



ohos:text="$string:login"

ohos:text_size="28vp"

/>



<Button

ohos:height="match_content"

ohos:width="120vp"

ohos:background_element="$graphic:bg_button"

ohos:margin="10vp"

ohos:padding="3vp"

ohos:text="$string:register"

ohos:text_size="28vp"

/>

</DirectionalLayout>



<Text

ohos:height="match_content"

ohos:width="match_content"

ohos:layout_alignment="horizontal_center"

ohos:text="$string:forget"

ohos:text_color="#0000FF"

ohos:text_size="20vp"

ohos:top_margin="50vp"

/>



<Text

ohos:height="1vp"

ohos:width="100vp"

ohos:background_element="$graphic:bg_line"

ohos:bottom_margin="50vp"

ohos:layout_alignment="horizontal_center"

/>

</DirectionalLayout>


布局中引用的资源文件bg_line.xml的代码如下：


//ch03＼LoginUIDemo项目中的bg_line.xml

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="line"

>

<stroke

ohos:width="2vp"

ohos:color="#0000FF"

/>

</shape>


布局中引用的资源文件checkbox.xml的代码如下：


//ch03＼LoginUIDemo项目中的checkbox.xml

<?xml version="1.0" encoding="utf-8"?>

<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos">

<item ohos:state="component_state_checked"

ohos:element="$graphic:checkbox_checked"/>

<item ohos:state="component_state_empty"

ohos:element="$graphic:checkbox_unchecked"/>

</state-container>


引用的资源文件checkbox_checked.xml的代码如下：


//ch03＼LoginUIDemo项目中的checkbox_checked.xml

<?xml version="1.0" encoding="UTF-8" ?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle">

<solid

ohos:color="#FF002CC9"/>

<stroke

ohos:color="#666666"

ohos:width="1vp" />

</shape>


引用的资源文件checkbox_unchecked.xml的代码如下：


//ch03＼LoginUIDemo项目中的checkbox_unchecked.xml

<?xml version="1.0" encoding="UTF-8" ?>

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle">

<solid

ohos:color="#FFFFFF"/>

<stroke

ohos:color="#666666"

ohos:width="1vp" />

</shape>


布局中引用的资源文件bg_button.xml的代码如下：


//ch03＼LoginUIDemo项目中的bg_button.xml

<?xml version="1.0" encoding="utf-8"?>

<shape

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle"

>

<corners



ohos:radius="30vp" />

<solid

ohos:color="#FFE2E2FF" />

</shape>


以上示例通过常用的组件实现了一个应用的登录功能界面，当然，开发者可以根据需要设计出更加能够提高用户体验的界面效果。该例子中两次使用DirectionalLayout布局，关于布局后续章节还会详细阐述，这里暂时不展开。目前，这个版本的登录功能界面还不能进行登录操作，如果要使登录按钮能够响应单击登录功能，则需要进行组件事件监听等，这些将在接下来的章节中介绍。
除了本章介绍的常用UI组件外，HarmonyOS体系的UI框架还提供了一些其他组件，相信读者通过学习已经掌握了组件的使用方法，能够举一反三。更多的组件，开发者可以参阅相关的技术手册，限于篇幅，这里不再赘述。
小结
本章主要讲解了常用的UI组件，HarmonyOS体系中的Java UI提供了丰富的界面组件，本章主要介绍一些常用的UI组件，主要包括显示型组件和交互型组件，显示型组件主要用于显示界面内容，一般不接受用户操作，如文本框、图片等； 交互型组件在显示界面内容效果的同时，一般还会接受用户操作，如输入框、按钮、开关等。组件是构成HarmonyOS应用界面的基本元素，组件经过修饰和组合可以得到丰富的界面效果，开发者可以在组件使用的基本方法之上构建丰富多彩的应用界面。
习题
1. 判断题
(1) 组件一般直接继承Component或它的子类，如Text、Image等。()
(2) 组件参数中将宽度ohos:width的值设置为match_content时，表示组件大小与它的内容占据的大小范围相适应。()
(3) 组件参数中将高度ohos:height的值设置为match_parent时，表示组件大小为父组件允许的最大值，它将占据父组件方向上的剩余大小。()
(4) 组件设置独立ID的目的是为了方便在程序中查找该组件。()
(5) 在Java UI框架中，Component和ComponentContainer以树状的层级结构进行组织，这样的一个大布局就称为组件树。()
(6) Button组件既可以显示图片也可以显示文本。()
2. 选择题
(1) HarmonyOS中，可使用的UI框架包括方舟开发框架和()。

A. C++ UI框架B. Java UI框架
C. Swing UI框架D. VUE UI框架
(2) 鸿蒙应用基于JS的UI开发采用()和()作为页面布局和页面样式的开发语言，页面业务逻辑则采用()语言。
A. WMLB. HTMLC. Java
D. CSSE. XMLF. JavaScript
(3) Text组件中用于显示内容的属性是()。
A. ohos:textB. ohos:id
C. ohos:widthD. ohos:hint
(4) Image组件中用于加载显示的图片资源的属性是()。
A. ohos:imgB. ohos:image_src
C. ohos:srcD. ohos:pic
(5) Button组件的4种类型主要是通过()属性完成的。
A. ohos:typeB. ohos:backgroud_element
C. ohos:btn_typeD. ohos:backgroud
(6) RadioButton一般和组件()一起使用，以达到单选的效果。
A. RadioGroupB. Radio
C. RadioContainerD. RadioBox
3. 填空题
(1) 界面中所有组件的基类是。
(2) 当Button组件的形状ohso:shape的值为时，其类型为普通按钮和胶囊按钮。
(3) 当Button组件的形状ohso:shape的值为时，其类型为椭圆按钮和圆形按钮。
(4) TextField组件是组件的直接子类。
(5) TextField组件的提示信息可以通过属性设置。
4. 上机题
(1) 仿照QQ，实现用户的登录界面。
(2) 结合某一业务需求，如餐厅服务质量调查，实现问卷调查界面。