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

发布于 2021-10-7 17:06
浏览
3收藏

接上一篇文章…
[HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【一】)]: https://harmonyos.51cto.com/posts/8350

二、分类说明

④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) 设置页面切换时间

⑩PageSliderIndicator

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

未完待续…

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏 3
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐