得意犹堪夸世俗,诏黄新湿字如鸦。这篇文章主要讲述HarmonyOS 基础之 UI组件 相关的知识,希望能为你提供帮助。
作者:陈潘
概述
上一篇【HarmonyOS 基础之 UI 布局(一)】我们一起学习了HarmonyOS的常用 UI 布局和一些基础属性,一个界面除了UI布局,组件也是非常重要的组成部分。HarmonyOS的 UI 常见组件分为显示类和交互类。显示类负责文本图像显示,交互类负责交互响应功能。组件的具体使用场景,需要根据业务需求来选择使用。今天这篇文章我将跟大家分享一下常见组件的使用场景和特性。
常见组件
根据组件的功能,可以将组件分为显示类、交互类:
组件类别 | 组件名称 | 功能描述 |
---|---|---|
显示类 | Text、Image、ProgressBar | 提供了单纯的内容显示,例如用于文本显示的Text,用于图像显示的Image等。 |
交互类 | Button、Picker、Switch、RadioButton、Checkbox、TextField、ToastDialog、ScrollView、ListContainer、PageSlider | 提供了具体场景下与用户交互响应的功能,例如Button提供了点击响应功能,Slider提供了进度选择功能等。 |
在layout目录下的xml文件中创建Text。
<
Text
ohos:id="$+id:text"
ohos:
ohos:
ohos:text="Text"
/>
可以根据不同需要,给Text添加各种属性值。常用的背景如常见的文本背景、按钮背景,可以采用XML格式放置在graphic目录下。如:创建“background_text.xml”,在“background_text.xml”中定义文本的背景。
<
?xml version="1.0" encoding="utf-8"?>
<
shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
//背景形状,oval椭圆,rectangle方形...
ohos:shape="rectangle">
<
corners
//背景圆角程度
ohos:radius="20"/>
<
solid
//背景颜色
ohos:color="#878787"/>
<
/shape>
2. ImageImage 是用来显示图片的组件。
2.1 创建 Image在 src -> main -> resources -> base -> media,添加一个图片至media文件夹下,既可以在XML中创建 Image,也可以在代码中创建 Image。
<
Image
ohos:id="$+id:image"
ohos:
ohos:
ohos:layout_alignment="center"
ohos:image_src="https://www.songbingjia.com/android/$media:plant"
//设置透明度
ohos:alpha="0.5"
/>
Image image = new Image(getContext());
image.setPixelMap(ResourceTable.Media_plant);
2.2 缩放 Image
ohos:image_src="https://www.songbingjia.com/android/$media:plant"
//设置缩放方式
ohos:scale_mode="zoom_center"
//设置缩放系数
ohos:scale_x="0.5"
ohos:scale_y="0.5"
2.3 裁剪 Image当 Image 尺寸小于图片尺寸时,可以对图片进行裁剪,仍以 Image 的宽高为 200 vp 为例,小于图片尺寸。以左对齐裁剪为例,设置 clip_alignment = " 256" 。
裁剪方式 | 值 |
---|---|
左对齐裁剪。 | left |
右对齐裁剪。 | right |
顶部对齐裁剪。 | top |
底部对齐裁剪。 | bottom |
居中裁剪。 | center |
<
ProgressBar
ohos:progress_
ohos:
ohos:
//设置进度条方向为水平,( vertical 为水平)
ohos:orientation="horizontal"
//设置最大值最小值
ohos:max="100"
ohos:min="0"
//设置当前进度
ohos:progress="60"
//设置进度条颜色
ohos:progress_element="#FF9900"
//设置进度条组件底色
ohos:background_instruct_element="#F23456"
//设置分割线
ohos:divider_lines_enabled="true"
ohos:divider_lines_number="5"
//设置提示文字以及提示文字颜色
ohos:progress_hint_text="60%"
ohos:progress_hint_text_color="#FF4989"
/>
如上图,进度条展示效果如下:
文章图片
4. ButtonButton是一种常见的组件,点击可以触发对应的操作,通常由文本或图标组成,也可以由图标和文本共同组成。
<
Button
ohos:id="$+id:button"
ohos:
ohos:
ohos:text_size="27fp"
ohos:text="button"
ohos:background_element="$graphic:background_button"
ohos:left_margin="15vp"
ohos:bottom_margin="15vp"
ohos:right_padding="8vp"
ohos:left_padding="8vp"
/>
4.1 背景样式如上布局xml文件中可以设置 Button 字体大小,文字内容,文字格式,背景等。其中背景可以在 graphic 文件夹下自定义需要的背景风格。
例如:background_button.xml;
<
?xml version="1.0" encoding="utf-8"?>
<
shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
//设置控件形状为方形
ohos:shape="rectangle">
<
corners
//背景圆角程度
ohos:radius="10"/>
<
solid
//背景背景颜色
ohos:color="#007CFD"/>
<
/shape>
ohos:background_element="$graphic:oval_button_element"
通过在 graphic 文件夹下自定义 Button 样式文件,可以自定义不同类型的 Button,按照 Button 的形状,按钮可以分为:普通,椭圆,胶囊,圆形等。
4.2 点击事件用户点击Button时,Button对象将收到一个点击事件,然后自定义响应点击事件的方法。如:通过创建一个 Component.ClickedListener 对象,然后通过调用 setClickedListener 将其分配给按钮,再收到该点击事件后,执行相应操作对该事件做出响应。
Button button = (Button) findComponentById(ResourceTable.Id_button);
// 为按钮设置点击事件回调
button.setClickedListener(new Component.ClickedListener() {
public void onClick(Component v) {
// 此处添加点击按钮后的事件处理逻辑
}
});
5. PickerPicker 提供了滑动选择器,允许用户从预定义范围中进行选择。常见的 Picker 有 DatePicker ( 选择日期 ) 和 TimePicker ( 选择时间 )。
<
Picker
ohos:
ohos:
ohos:top_margin="60vp"
ohos:selected_text_size="40vp"
ohos:normal_text_size="20vp"
ohos:layout_alignment="center"
/>
根据 xml 布局文件配置自己需要的 Picker 种类,显示效果如下:
Picker
文章图片
DatePicker
文章图片
TimePicker
文章图片
6. SwitchSwitch是切换单个设置开/关两种状态的组件。
<
Switch
ohos:
ohos:
ohos:layout_alignment="center"
ohos:top_margin="60vp"
/>
Switch相当于一个双相开关,点击开关的时候会进行切换,效果如下:
文章图片
7. RadioButtonRadioButton 是用于多选一操作的组件,需要搭配 RadioContainer 使用,实现单选效果,RadioContainer 是 RadioButton 的容器,在其包裹下的 RadioButton 保证只有一个被选项。
<
RadioButton
ohos:id="$+id:harmony_UI"
ohos:top_margin="60vp"
ohos:
ohos:
ohos:text="Hello Harmony"
ohos:layout_alignment="center"
ohos:text_size="20fp"
//字体颜色,text_color_onon 为选中状态,text_color_off 为未选中状态
ohos:text_color_on="#00BFFF"
ohos:text_color_off="#808080"
/>
选中状态
文章图片
未选中状态
文章图片
以上两张图为 RadioButton 的选中与未选中的状态对比。
8. CheckboxCheckbox可以实现选中和取消选中的功能。
<
Checkbox
ohos:top_margin="60vp"
ohos:layout_alignment="center"
ohos:id="$+id:check_box"
ohos:
ohos:
ohos:text="harmony checkbox"
ohos:text_color_on="#00AAEE"
ohos:text_color_off="#000000"
ohos:text_size="20fp" />
xml 布局文件中创建 Checkbox 组件,显示效果如下:
文章图片
9. TextFieldTextField 是一种文本输入框。
<
TextField
ohos:
ohos:
//设置提示语
ohos:hint="Please enter......"
//设置内边距
ohos:left_padding="24vp"
ohos:right_padding="24vp"
ohos:top_padding="8vp"
ohos:bottom_padding="8vp"
//设置可多行显示
ohos:multiple_lines="true"
/>
在代码中,我们也可以对文本输入框设置响应事件。
textField.setFocusChangedListener(((component, isFocused) ->
{
if (isFocused) {
// 获取到焦点
...
}else {
// 失去焦点
...
}
}));
10. ToastDialogToastDialog 是在窗口上方弹出的对话框,是通知操作的简单反馈。ToastDialog 会在一段时间后消失,在此期间,用户还可以操作当前窗口的其他组件。
在代码中创建 ToastDialog。
自定义布局 Resource 文件 Layout_layout_toast.xml 内容如下:
<
?xml version="1.0" encoding="utf-8"?>
<
DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:
ohos:
ohos:orientation="vertical">
<
Text
ohos:id="$+id:msg_toast"
ohos:
ohos:
ohos:left_padding="16vp"
ohos:right_padding="16vp"
ohos:top_padding="4vp"
ohos:bottom_padding="4vp"
ohos:layout_alignment="center"
ohos:text_size="16fp"
ohos:text="This is a ToastDialog for the customized component"
ohos:background_element="$graphic:background_toast_element"/>
<
/DirectionalLayout>
11. ScrollViewScrollView 是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容。
<
ScrollView
ohos:id="$+id:scrollview"
ohos:
ohos:
ohos:background_element="#FFDEAD"
ohos:top_margin="32vp"
ohos:bottom_padding="16vp"
ohos:layout_alignment="horizontal_center">
<
DirectionalLayout
ohos:
ohos:>
<
Image
ohos:id="$+id:img_1"
ohos:
ohos:
ohos:top_margin="16vp"
ohos:image_src="https://www.songbingjia.com/android/$media:dog.png"/>
<
!--放置任意需要展示的组件-->
<
/DirectionalLayout>
<
/ScrollView>
12. ListContainerListContainer 是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。
首先需要在 layout 目录下的 xml 布局文件中创建 ListContainer。
<
?xml version="1.0" encoding="utf-8"?>
<
ListContainer
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:list_container"
ohos:
ohos:
ohos:layout_alignment="horizontal_center"/>
然后在 layout 目录下新建 xml 文件(例:item_listContainer.xml),作为 ListContainer 的子布局。
<
?xml version="1.0" encoding="utf-8"?>
<
DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:
ohos:
ohos:left_margin="16vp"
ohos:right_margin="16vp"
ohos:orientation="vertical">
<
Text
ohos:id="$+id:item_index"
ohos:
ohos:
ohos:padding="4vp"
ohos:text="Item0"
ohos:text_size="20fp"
ohos:layout_alignment="center"/>
<
/DirectionalLayout>
ListContainer 每一行可以为不同的数据,因此需要适配不同的数据结构,使其都能添加到 ListContainer 上。
创建 ListcontainerItemProvider.java,继承自RecycleItemProvider。
方法名 | 作用 |
---|---|
int getCount() | 返回填充的表项个数 |
Object getItem(int position) | 根据position返回对应的数据 |
long getItemId(int position) | 返回某一项的ID |
Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer) | 根据position返回对应的界面组件 |
属性 | java方法 | 作用 |
---|---|---|
orientation | setOrientation(int orientation) | 设置布局方向 |
- | setContentStartOffSet(int startOffset) | 设置列表容器的开始和结束偏移量 |
- | setContentEndOffSet(int endOffset) | - |
- | setContentOffSet(int startOffset, int endOffset) | - |
rebound_effect | setReboundEffect(boolean enabled) | 设置是否启用回弹效果 |
- | setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent) | 设置回弹效果参数 |
- | setReboundEffectParams(ListContainer.ReboundEffectParams reboundEffectParams) | - |
shader_color | setShaderColor(Color color) | 设置着色器颜色 |
文章图片
13. PageSliderPageSlider 是一个交互类组件。
main_pageSlider.xml
<
?xml version="1.0" encoding="UTF-8"?>
<
DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:
ohos:
ohos:background_element="blue"
ohos:orientation="vertical">
<
PageSlider
ohos:id="$+id:pager_slider"
ohos:
ohos:
ohos:background_element="#ffffff"
ohos:weight="1"/>
<
RadioContainer
ohos:id="$+id:radio_container"
ohos:
ohos:
ohos:alignment="horizontal_center"
ohos:orientation="horizontal">
<
RadioButton
ohos:
ohos:
ohos:text_size="20fp"
/>
<
RadioButton
ohos:
ohos:
ohos:text_size="20fp"
/>
<
/RadioContainer>
<
/DirectionalLayout>
pageSlider1.xml
<
?xml version="1.0" encoding="utf-8"?>
<
DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:
ohos:>
<
Text
ohos:
ohos:
ohos:center_in_parent="true"
ohos:text="PageSlider1"
ohos:text_size="25fp"/>
<
/DependentLayout>
pageSlider2.xml
<
?xml version="1.0" encoding="utf-8"?>
<
DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:
ohos:>
<
Text
ohos:
ohos:
ohos:center_in_parent="true"
ohos:text="PageSlider2"
ohos:text_size="25fp"/>
<
/DependentLayout>
然后启动程序看一下控件效果:
文章图片
文章图片
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
【本文正在参与51CTO HarmonyOS技术社区创作者激励-星光计划1.0】
想了解更多关于鸿蒙的内容,请访问:
51CTO和华为官方战略合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz
::: hljs-center
文章图片
【HarmonyOS 基础之 UI组件】:::
推荐阅读
- 技术分享| 音视频多频道使用的正确姿势
- “不出户,知天下”,3D可视化的智慧应用
- VRRP实验
- VMware Tanzu社区版初体验
- HGDB企业版V6逻辑复制搭建
- ACL理论及配置
- 5款国产开源低代码开发平台推荐
- 链路聚合
- C++类和对象--多态