HarmonyOS學(xué)習(xí)路之開發(fā)篇—Java UI框架(基礎(chǔ)組件說明【二】)

二、分類說明

④Picker

Picker提供了滑動選擇器,允許用戶從預(yù)定義范圍中進行選擇。

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 顯示的項目數(shù)量,條數(shù) ohos:selector_item_num="10"
selected_normal_text_margin_ratio 已選文本邊距與常規(guī)文本邊距的比例,取值需>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 選擇輪是否循環(huán)顯示數(shù)據(jù) 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 已選文本邊距與常規(guī)文本邊距的比例,取值需>0.0f,默認值為1.0f ohos:selected_normal_text_margin_ratio="0.5"
selector_item_num 顯示的項目數(shù)量 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 選擇輪是否循環(huán)顯示數(shù)據(jù) ohos:wheel_mode_enabled="true"

⑥ProgressBar

ProgressBar用于顯示內(nèi)容或操作的進度。

ProgressBar的自有XML屬性見下表:

屬性名稱 屬性描述 使用案例
divider_lines_enabled 是否使用分割線 ohos:divider_lines_enabled="true"
divider_lines_number 分割線數(shù)量 ohos:divider_lines_number="1"
infinite 是否使用不確定模式 ohos:infinite="true"
infinite_element 不確定模式圖樣配置前提:infinite需設(shè)置為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 可以設(shè)置取值項如表中所列,也可以使用“|”進行多項組合。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設(shè)置為10,進度值則為10的倍數(shù)。 ohos:step="1"
progress_hint_text_size 進度提示文本大小 ohos:progress_hint_text_size="100"

⑦RoundProgressBar

RoundProgressBar繼承自ProgressBar,擁有ProgressBar的屬性,在設(shè)置同樣的屬性時用法和ProgressBar一致,用于顯示環(huán)形進度。

RoundProgressBar的自有XML屬性見下表:

屬性名稱 屬性描述 使用案例
start_angle 圓形進度條的起始角度 ohos:start_angle="10"
max_angle 圓形進度條的最大角度 ohos:max_angle="360.0"

⑧TabList、Tab

Tablist可以實現(xiàn)多個頁簽欄的切換,Tab為某個頁簽。子頁簽通常放在內(nèi)容區(qū)上方,展示不同的分類。頁簽名稱應(yīng)該簡潔明了,清晰描述分類的內(nèi)容。

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" 表示選中的頁簽通過左側(cè)分割線標記
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 可以設(shè)置取值項如表中所列,也可以使用“|”進行多項組合 ohos:text_alignment="center"
text_size 文本大小 ohos:text_size="100"

TabList常用接口

方法 方法說明
getSelectedTab 返回選中的Tab
getSelectedTabIndex 返回選中的Tab的位置索引
getTabCount 獲取Tab的個數(shù)
getTabAt 獲取某個Tab
removeTab 移除某個位置的tab
setOrientation 設(shè)置橫或豎方向

⑨PageSlider

PageSlider是用于頁面之間切換的組件,它通過響應(yīng)滑動事件完成頁面間的切換。

常用方法表

方法 方法說明
setProvider(PageSliderProvider provider) 設(shè)置Provider,用于配置PageSlider的數(shù)據(jù)結(jié)構(gòu)
addPageChangedListener(PageChangedListener listener) 響應(yīng)頁面切換事件
removePageChangedListener(PageChangedListener listener) 移除頁面切換的響應(yīng)
setOrientation(int orientation) 設(shè)置布局方向
setPageCacheSize(int count) 設(shè)置要保留當前頁面兩側(cè)的頁面數(shù)
setCurrentPage(int itemPos) 設(shè)置當前展示頁面
setCurrentPage(int itemPos, boolean smoothScroll) 設(shè)置當前展示界面,并確定是否需要平滑滾動
setSlidingPossible(boolean enable) 是否啟用頁面滑動
setReboundEffect(boolean enabled) 是否啟用回彈效果
setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent) 配置回彈效果參數(shù)
setPageSwitchTime(int durationMs) 設(shè)置頁面切換時間

⑩PageSliderIndicator

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

未完待續(xù)...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容