HarmonyOS学习路之开发篇—Java UI框架（基础组件说明【二】）原创

爱吃土豆丝的打工人

发布于 2021-10-7 17:06

浏览

3收藏

二、分类说明

④Picker

Picker提供了滑动选择器，允许用户从预定义范围中进行选择。

Picker的自有XML属性见下表：

属性名称	属性描述	使用案例
element_padding	文本和Element之间的间距Element必须通过setElementFormatter接口配置	ohos:element_padding=“10”
max_value	最大值	ohos:max_value=“10”
min_value	最小值	ohos:min_value=“10”
value	当前值	ohos:value=“10”
normal_text_color	未选中的文本颜色	ohos:normal_text_color=“#A8FFFFFF”
normal_text_size	未选中的文本大小	ohos:normal_text_size=“10”
selected_text_color	选中的文本颜色	ohos:selected_text_color=“#A8FFFFFF”
selected_text_size	选中的文本大小	ohos:selected_text_size=“10”
selector_item_num	显示的项目数量，条数	ohos:selector_item_num=“10”
selected_normal_text_margin_ratio	已选文本边距与常规文本边距的比例，取值需>0.0f，默认值为1.0f	ohos:selected_normal_text_margin_ratio=“0.5”
shader_color	着色器颜色	ohos:shader_color=“#A8FFFFFF”
top_line_element	选中项的顶行	ohos:top_line_element=“#FFFFFFFF”
bottom_line_element	选中项的底线	ohos:bottom_line_element=“#FFFFFFFF”
wheel_mode_enabled	选择轮是否循环显示数据	ohos:wheel_mode_enabled=“true”

⑤DatePicker

DatePicker主要供用户选择日期。

DatePicker的自有XML属性见下表：

属性名称	属性描述	使用案例
date_order	显示格式，年月日	ohos:date_order=“day-month-year” 表示日期以日-月-年的格式显示
		ohos:date_order=“month-day-year” 表示日期以月-日-年的格式显示
		ohos:date_order=“year-month-day” 表示日期以年-月-日的格式显示
		ohos:date_order=“year-day-month” 表示日期以年-日-月的格式显示
		ohos:date_order=“day-month” 表示日期以日-月的格式显示
		ohos:date_order=“month-day” 表示日期以月-日的格式显示
		ohos:date_order=“year-month” 表示日期以年-月的格式显示
		ohos:date_order=“month-year” 表示日期以月-年的格式显示
		ohos:date_order=“only-year” 表示只显示年份
		ohos:date_order=“only-month” 表示只显示月份
		ohos:date_order=“only-day” 表示只显示日期
day_fixed	日期是否固定	ohos:day_fixed=“true”
month_fixed	月份是否固定	ohos:month_fixed=“true”
year_fixed	年份是否固定	ohos:year_fixed=“true”
max_date	最大日期(long类型)	ohos:max_date=“1234567”
min_date	最小日期(long类型)	ohos:min_date=“1234567”
text_size	文本大小(float类型)	ohos:text_size=“30”
normal_text_size	未选中文本的大小(float类型)	ohos:normal_text_size=“30”
selected_text_size	选中文本的大小(float类型)	ohos:selected_text_size=“30”
normal_text_color	未选中文本的颜色	ohos:normal_text_color=“#A8FFFFFF”
selected_text_color	选中文本的颜色	ohos:selected_text_color=“#A8FFFFFF”
operated_text_color	操作项的文本颜色	ohos:operated_text_color=“#A8FFFFFF”
selected_normal_text_margin_ratio	已选文本边距与常规文本边距的比例，取值需>0.0f，默认值为1.0f	ohos:selected_normal_text_margin_ratio=“0.5”
selector_item_num	显示的项目数量	ohos:selector_item_num=“10”
shader_color	着色器颜色	ohos:shader_color=“#A8FFFFFF”
top_line_element	选中项的顶行	ohos:top_line_element=“#FFFFFFFF”
bottom_line_element	选中项的底线	ohos:bottom_line_element=“#FFFFFFFF”
wheel_mode_enabled	选择轮是否循环显示数据	ohos:wheel_mode_enabled=“true”

⑥ProgressBar

ProgressBar用于显示内容或操作的进度。

ProgressBar的自有XML属性见下表：

属性名称	属性描述	使用案例
divider_lines_enabled	是否使用分割线	ohos:divider_lines_enabled=“true”
divider_lines_number	分割线数量	ohos:divider_lines_number=“1”
infinite	是否使用不确定模式	ohos:infinite=“true”
infinite_element	不确定模式图样配置前提：infinite需设置为true	ohos:infinite_element=“$media:media_src”
max	最大值	ohos:max=“1”
max_height	最大高度	ohos:max_height=“100”
max_width	最大宽度	ohos:max_width=“100”
min	最小值	ohos:min=“1”
orientation	排列方向horizontal(水平方向)，vertical(垂直方向)	ohos:orientation=“horizontal”
progress	当前进度	ohos:progress=“10”
background_instruct_element	背景	ohos:background_instruct_element=“#000000”
progress_width	进度条宽度	ohos:progress_width=“100”
progress_color	进度条颜色	ohos:progress_color=“#FF262626”
progress_element	进度条背景	ohos:progress_element=“#000000”
progress_hint_text	进度提示文本	ohos:progress_hint_text=“test”
progress_hint_text_alignment	进度提示文本对齐方式left、top、right、bottom、horizontal_center、vertical_center、center	可以设置取值项如表中所列，也可以使用“\|”进行多项组合。ohos:progress_hint_text_alignment=“top”
progress_hint_text_color	进度提示文本颜色	ohos:progress_hint_text_color=“#FFFFFFFF”
vice_progress	当前副进度	ohos:vice_progress=“1”
vice_progress_element	副进度条背景	ohos:vice_progress_element=“#000000”
step	进度的步长；若step设置为10，进度值则为10的倍数。	ohos:step=“1”
progress_hint_text_size	进度提示文本大小	ohos:progress_hint_text_size=“100”

⑦RoundProgressBar

RoundProgressBar继承自ProgressBar，拥有ProgressBar的属性，在设置同样的属性时用法和ProgressBar一致，用于显示环形进度。

RoundProgressBar的自有XML属性见下表：

属性名称	属性描述	使用案例
start_angle	圆形进度条的起始角度	ohos:start_angle=“10”
max_angle	圆形进度条的最大角度	ohos:max_angle=“360.0”

⑧TabList、Tab

Tablist可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容。

Tablist的自有XML属性见下表：

属性名称	属性描述	使用案例
fixed_mode	固定所有页签并同时显示	ohos:fixed_mode=“true”
orientation	页签排列方向horizontal(水平排列)，vertical(垂直排列)	ohos:orientation=“horizontal”
normal_text_color	未选中的文本颜色	ohos:normal_text_color=“#FFFFFFFF”
selected_text_color	选中的文本颜色	ohos:selected_text_color=“#FFFFFFFF”
selected_tab_indicator_color	选中页签的颜色	ohos:selected_tab_indicator_color=“#FFFFFFFF”
selected_tab_indicator_height	选中页签的高度	ohos:selected_tab_indicator_height=“100”
tab_indicator_type	页签指示类型	ohos:tab_indicator_type=“invisible” 表示选中的页签无指示标记
		ohos:tab_indicator_type=“bottom_line” 表示选中的页签通过底部下划线标记
		ohos:tab_indicator_type=“left_line” 表示选中的页签通过左侧分割线标记
		ohos:tab_indicator_type=“oval” 表示选中的页签通过椭圆背景标记
tab_length	页签长度	ohos:tab_length=“100”
tab_margin	页签间距	ohos:tab_margin=“100”
text_alignment	文本对齐方式left、top、right、bottom、horizontal_center、vertical_center、center、start、end	可以设置取值项如表中所列，也可以使用“\|”进行多项组合 ohos:text_alignment=“center”
text_size	文本大小	ohos:text_size=“100”

TabList常用接口

方法	方法说明
getSelectedTab	返回选中的Tab
getSelectedTabIndex	返回选中的Tab的位置索引
getTabCount	获取Tab的个数
getTabAt	获取某个Tab
removeTab	移除某个位置的tab
setOrientation	设置横或竖方向

⑨PageSlider

PageSlider是用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换。

常用方法表

方法	方法说明
setProvider(PageSliderProvider provider)	设置Provider，用于配置PageSlider的数据结构
addPageChangedListener(PageChangedListener listener)	响应页面切换事件
removePageChangedListener(PageChangedListener listener)	移除页面切换的响应
setOrientation(int orientation)	设置布局方向
setPageCacheSize(int count)	设置要保留当前页面两侧的页面数
setCurrentPage(int itemPos)	设置当前展示页面
setCurrentPage(int itemPos, boolean smoothScroll)	设置当前展示界面，并确定是否需要平滑滚动
setSlidingPossible(boolean enable)	是否启用页面滑动
setReboundEffect(boolean enabled)	是否启用回弹效果
setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent)	配置回弹效果参数
setPageSwitchTime(int durationMs)	设置页面切换时间