HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【二】)

144 阅读5分钟

二、分类说明

④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.0fohos: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.0fohos: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需设置为trueohos: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)设置页面切换时间

⑩PageSliderIndicator

PageSliderIndicator,需配合PageSlider使用,指示在PageSlider中展示哪个界面。

未完待续...