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

二、分类说明

④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中展示哪个界面。

未完待续...

?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,100评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,308评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,718评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,275评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,376评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,454评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,464评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,248评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,686评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,974评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,150评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,817评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,484评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,140评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,374评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,012评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,041评论 2 351

推荐阅读更多精彩内容