前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HarmonyOS学习路之开发篇—Java UI框架(基础组件说明【二】)

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

作者头像
爱吃土豆丝的打工人
发布2021-11-10 10:39:05
7070
发布2021-11-10 10:39:05
举报
文章被收录于专栏:Harmony学习之路

二、分类说明

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

未完待续…

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/10/07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 二、分类说明
    • ④Picker
      • ⑤DatePicker
        • ⑥ProgressBar
          • ⑦RoundProgressBar
            • ⑧TabList、Tab
              • ⑨PageSlider
                • ⑩PageSliderIndicator
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档