前提

本文使用xml进行UI的实现。

前置知识的学习

组件树

布局把Component和ComponentContainer以树状的层级结构进行组织，这样的一个布局就称为组件树。组件树的特点是仅有一个根组件，其他组件有且仅有一个父节点，组件之间的关系受到父节点的规则约束。简单来讲，基础组件需要依附于布局容器，布局容器也就是充当于父节点的角色。

组件分类关系功能

根据组件的功能，可以将组件分为布局类、显示类、交互类三类。

组件类别	组件名称	功能描述
布局类	PositionLayout、DirectionalLayout、StackLayout、DependentLayout、TableLayout、AdaptiveBoxLayout	提供了不同布局规范的组件容器，例如以单一方向排列的DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的PositionLayout等。
显示类	Text、Image、Clock、TickTimer、ProgressBar	提供了单纯的内容显示，例如用于文本显示的Text，用于图像显示的Image等。
交互类	TextField、Button、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider	提供了具体场景下与用户交互响应的功能，例如Button提供了点击响应功能，Slider提供了进度选择功能等。

组件中基本属性与其和资源文件的调用

首先需要明确组件最基本功能是提供给用户调用的。使用xml文件实现这个组件的创建，最终目的是让我们资源管理器给其设置监听器，让其能按照既定功能运行，所以这里映出最基本属性id。

id属性

ohos:id="$+id:text" 使用这样的声明就可以给予一个组件进行id属性的赋值操作。其余属性可以参考开发指南进行相关属性的编写。

各资源文件介绍

element文件：该文件是存储常量的。zn_CN和en_US分别存储中文字符常量和英文字符常量 graphic文件：起到类似于css文件中的class效果，可以让引用其组件显示相同的效果，便于开发 media文件：存放着相关相片资源文件 profile文件：除了媒体资源之外其他类型文件，以原始文件形式保存。

这里简单介绍一下graphic文件各个标签

<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos">
    <corners></corners>
    <solid></solid>
    <bounds> </bounds>
    <gradient></gradient>
    <stroke></stroke>
</shape>

<shape>：根元素，表示定义一个形状样式。
<corners>：用于定义形状的圆角属性。可以通过设置<corners>标签内的属性进行圆角的设置，比如radius设置统一的圆角大小，或者使用topLeftRadius、topRightRadius、bottomLeftRadius、bottomRightRadius来设置不同角的圆角大小。
<solid>：用于定义形状的填充颜色属性。可以通过设置<solid>标签的color属性来指定填充颜色。
<bounds>：用于定义形状的边界属性。可以通过设置<bounds>标签的left、top、right、bottom属性来指定形状的边界。
<gradient>：用于定义形状的渐变颜色属性。可以通过设置<gradient>标签的angle属性指定渐变的角度，startColor和endColor属性指定渐变的起始颜色和结束颜色。
<stroke>：用于定义形状的边框属性。可以通过设置<stroke>标签的width属性来指定边框宽度，color属性来指定边框颜色。

实现组件监听

这一功能已经在第一节中实现了。主要需要在abilitysilce声明组件，使用资源管理器进行组件查找后，重写该组件的监听器。

鸿蒙开发学习2-关于UI组件的使用

前提