Harmony的UI基础
目录
一、UI框架
1、所有用户界面
2、组件分类
3、组件的类型
二、显示类组件
1、文本Text
2、图像Image
3、进度条
三、交互类组件
1、TextField文本框
2、Button按钮
3、CheckBox复选框
4、RadioButton单选框
5、Switch开关
6、Slider滑块
7、Picker选择组件
8、TabList和Tab页签栏
一、UI框架
1、所有用户界面
（1）提供了一部分Component和ComponentContainer的具体子类，即创建用户界面（UI）的各类组件，包括一些常用的组件（比如：文本、按钮、图片、列表等）和常用的布局（比如：DirectionalLayout和DependentLayout）
（2）用户可通过组件进行交互操作，并获得响应
（3）所有的UI操作都应该在主线程进行设置
2、组件分类
（1）布局类组件：也被称为布局或组件容器，为用户界面的“骨架”
（2）显示类组件：用于显示数据内容，一般不承担用户交互功能，包括文本（Text）、图像（Image）、进度条（ProgressBar）、圆形进度条（RoundProgressBar）等
（3）交互类组件：用于用户交互，同时也可以展示部分数据内容，包括文本框（TextField）、按钮（Button）、复选框（Checkbox）、单选框（RadioButton）、开关（Switch）、滑块（Slider）等
3、组件的类型
二、显示类组件
1、文本Text
（1）使用xml进行页面的构建文本标签，常见属性介绍如下：
（2）组件的属性及特征
text：显示文本
hint：提示文本
multiple_lines：多行模式设置，设置true/false
max_text_lines：文本最大行数
auto_font_size：是否支持文本自动调整文本字体大小，设置true/false（3）走马灯效果
①ability_main.xml文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Textohos:id="$+id:text"ohos:height="match_content"ohos:width="90vp"ohos:text="是申小兮呀"ohos:text_size="40vp"ohos:italic="true"/></DirectionalLayout>②MainAbilitySlice.java文件
package com.example.csdn.slice;import com.example.csdn.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.Text;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);Text text = (Text) findComponentById(ResourceTable.Id_text);text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);text.startAutoScrolling();text.setClickedListener(component -> {text.setText(text.getText()+"T");});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}
2、图像Image
（1）Image显示图片的组件
注意： 图片的资源一般存放到base目录下的media文件夹中
（2）组件的属性及特征
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Imageohos:id="$+id:image"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="center"ohos:image_src="$media:icon"ohos:alpha="0.5"ohos:scale_x="3"ohos:scale_y="3"ohos:scale_mode="zoom_center"/>
</DirectionalLayout>
3、进度条
（1）条形进度条
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><ProgressBarohos:orientation="horizontal"ohos:progress_width="20vp"ohos:height="100vp"ohos:width="300vp"ohos:max="100"ohos:min="0"ohos:background_element="black"ohos:progress="60"ohos:progress_color="#47CC47"ohos:divider_lines_enabled="true"ohos:divider_lines_number="10"ohos:progress_hint_text="60%"ohos:progress_hint_text_color="#FFCC99"/>
</DirectionalLayout>
（2）圆形进度条
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><RoundProgressBarohos:id="$+id:round_progress_bar"ohos:height="200vp"ohos:width="200vp"ohos:progress_width="10vp"ohos:progress="20"ohos:progress_color="#47CC47"/>
</DirectionalLayout>
三、交互类组件
用于用户交互，同时也可以展示部分数据内容
1、TextField文本框
（1）提供了一种文本输入框，共有XML属性继承自：Text，其常用属性如下：
2、Button按钮
（1）特点：无自有的XML属性，共有XML属性继承自Text，自带的背景如文本背景、按钮背景，通常采用XML格式放置在graphic目录下
（2）可以在graphic文件夹下，选择New -> File，命名为background_login_button.xml，来写按钮自有属性
（3）ability_main.xml文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Buttonohos:id="$+id:id_toLogin"ohos:height="45vp"ohos:width="200vp"ohos:text="登录"ohos:text_size="18fp"ohos:text_color="#ffffff"ohos:top_margin="50vp"ohos:background_element="$graphic:background_login_button"/>
</DirectionalLayout>（4）按钮简单的点击事件，MainAbilitySlice.java文件
package com.example.csdn.slice;import com.example.csdn.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;
import ohos.agp.window.dialog.CommonDialog;
import ohos.hiviewdfx.HiLog;import javax.tools.Tool;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);Button button = (Button) findComponentById(ResourceTable.Id_id_toLogin);button.setClickedListener(new Component.ClickedListener() {@Overridepublic void onClick(Component component) {//点击后执行的事件//创建弹窗CommonDialog dialog = new CommonDialog(getContext());dialog.setTitleText("登录界面");dialog.setSize(600,600);dialog.setMovable(true);dialog.show();//显示弹窗}});}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}
3、CheckBox复选框
（1）特点：实现选中和取消选中的功能，多个元素的时候就需要用到多选框组件
（2）基础属性继承自Text，自有属性如下表：
|
属性名称 |
中文描述 |
属性值 |
|---|---|---|
|
marked |
当前状态（选中或取消选中） |
boolean类型 |
|
text_color_on |
处于选中状态的文本颜色 |
color类型 |
|
text_color_off |
处于未选中状态的文本颜色 |
color类型 |
|
check_element |
状态标志样式 |
Element类型 |
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Checkboxohos:height="match_content"ohos:width="match_content"ohos:text="敲代码"ohos:text_size="20vp"ohos:text_color_on="#00AAEE"ohos:text_color_off="#000000"ohos:marked="true"/><Checkboxohos:height="match_content"ohos:width="match_content"ohos:text="跳舞"ohos:text_size="20vp"ohos:text_color_on="#00AAEE"ohos:text_color_off="#000000"ohos:marked="false"/><Checkboxohos:height="match_content"ohos:width="match_content"ohos:text="唱歌"ohos:text_size="20vp"ohos:text_color_on="#00AAEE"ohos:text_color_off="#000000"ohos:marked="false"/>
</DirectionalLayout>4、RadioButton单选框
（1）特点：用于多选一的操作，需要搭配RadioContainer使用，实现单选效果
（2）RadioContainer：是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选项
（3）基础属性继承自Text，自有属性如下表：
|
属性名称 |
中文描述 |
属性值 |
|---|---|---|
|
marked |
当前状态 |
boolean类型 |
|
text_color_on |
处于选中状态的文本颜色 |
color类型 |
|
text_color_off |
处于未选中状态的文本颜色 |
color类型 |
|
check_element |
状态标志样式 |
Element类型 |
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><RadioContainerohos:height="match_content"ohos:width="match_content"ohos:orientation="horizontal"><RadioButtonohos:height="match_content"ohos:width="match_content"ohos:text="敲代码"ohos:text_size="20vp"ohos:text_color_on="#00BFFF"ohos:text_color_off="#808080"ohos:marked="true"/><RadioButtonohos:height="match_content"ohos:width="match_content"ohos:text="唱歌"ohos:text_size="20vp"ohos:text_color_on="#00BFFF"ohos:text_color_off="#808080"ohos:marked="false"/><RadioButtonohos:height="match_content"ohos:width="match_content"ohos:text="跳舞"ohos:text_size="20vp"ohos:text_color_on="#00BFFF"ohos:text_color_off="#808080"ohos:marked="false"/></RadioContainer>
</DirectionalLayout>5、Switch开关
（1）特点：切换单个设置开/关两种状态的组件，实际开发中一般作为某些功能的开关
（2）基础属性继承自Text，自有属性如下表：
|
属性名称 |
中文描述 |
属性值 |
|---|---|---|
|
text_state_on |
开启时显示的文本 |
string类型 |
|
text_state_off |
关闭时显示的文本 |
string类型 |
|
track_element |
轨迹样式 |
Element类型 |
|
thumb_element |
thumb样式 |
Element类型 |
|
marked |
当前状态 |
boolean类型 |
|
check_element |
状态标志样式 |
Element类型 |
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Switchohos:height="match_content"ohos:width="match_content"ohos:text="今天敲代码了吗"ohos:text_size="20vp"ohos:text_state_off="OFF"ohos:text_state_on="ON"ohos:marked="false"ohos:thumb_element="$media:icon"/>
</DirectionalLayout>6、Slider滑块
（1）特点：用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换
（2）PageSlider组件：每一页都基本是一个布局，就是一个XML布局里面的一个组件，可以通过PageSliderProvider适配器，适配器本身也是一个布局，可以直接添加一个界面layout到适配器中，并在layout对应的AbilitySlice初始化数据
（3）PageSliderIndicator：主要用于展示pageslider页面滚动时对应的圆点导航
具体的代码事例在介绍适配器后，再给出吧
Harmony的UI基础相关推荐
- iOS开发UI基础—手写控件，frame，center和bounds属性
iOS开发UI基础-手写控件,frame,center和bounds属性 一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4 ...
- 《Android UI基础教程》——1.2节Android 应用程序的基本结构
本节书摘来自异步社区<Android UI基础教程>一书中的第1章,第1.2节Android 应用程序的基本结构,作者 [美]Jason Ostrander,更多章节内容可以访问云栖社区& ...
- IOS开发基础之UI基础的团购源码完整版本
IOS开发基础之UI基础的团购源码完整版本 // // ViewController.m // 17-团购案例 // // Created by 鲁军 on 2021/2/4. //#import & ...
- IOS开发之UI基础LOL英雄展示-15
IOS开发之UI基础LOL英雄展示-15 // // ViewController.m // 15-英雄展示-单组数据 // // Created by 鲁军 on 2021/2/3. //#impo ...
- 《Android UI基础教程》——2.1节创建一个应用
本节书摘来自异步社区<Android UI基础教程>一书中的第2章,第2.1节创建一个应用,作者 [美]Jason Ostrander,更多章节内容可以访问云栖社区"异步社区&q ...
- UI基础控件创建（UILabel、UITextField、UIButton）
UI基础控件创建(UILabel.UITextField.UIButton) UILabel //UILabel;UILabel *nameLabel = [[UILabel alloc] init] ...
- iPhone开发教程 UI基础课程（58课时）
qianqianlianmeng iPhone开发教程 UI基础课程(58课时) 第一章 iPhone开发入门 UI基础课程 第一章 iPhone开发入门 1.1 iOS概述和架构 ...
- Android UI基础 仿闲鱼发布页
Android UI基础 仿闲鱼发布页 实现图: 源码地址: https://download.csdn.net/download/weixin_44758662/12819060 代码太长不好看 建 ...
- 自定义UI 基础知识
系列文章目录 HenCode报名链接:hencoder.ke.qq.com 自定义UI 基础知识 自定义UI 绘制饼图 自定义UI 圆形头像 自定义UI 自制表盘 自定义UI 简易图文混排 自定义UI ...
最新文章
- 知乎热议！一个博士生接受怎样的训练是完整的科研训练？
- 杂题 NOIP2016蚯蚓
- python最长回文子串leetcode_Python版LeetCode5. 最长回文子串
- jmeter对乱码如何处理_JMeter中文乱码的解决
- EF Core：一统SQL和NoSQL数据库
- 【转载】贝叶斯决策论
- java实验指导答案华软_Java核心编程技术实验指导教程
- java爬取豆瓣电影TOP250排行
- SQL注入之万能密码
- FreeImage的学习资料汇总
- flashfxp链接不上，flashfxp链接不上是因为什么
- 计算机未安装OCR应用程序,OCR使用的常见问题及解决(转载)
- H3C 交换机web页
- 树莓派介绍树莓派3代B+型开发板
- 机器人搭建记录 yobot(LinuxWindows手动搭建)
- Voucher Key 相关SELinux
- Oracle中如何计算时间差
- 2022年演出经纪人演出市场政策与法律法规考试模拟试题卷及答案
- 交换机虚拟化和堆叠的区别_交换机级联与堆叠有何区别？（内含堆叠方法）
- “智慧”控漏 削减产销差-城镇供水管网分区计量管理系统