HarmonyOS學習路之開發(fā)篇—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 已選文本邊距與常規(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)顯示數據 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 顯示的項目數量 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)顯示數據 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一致舅巷,用于顯示環(huán)形進度羔味。

RoundProgressBar的自有XML屬性見下表:

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

⑧TabList、Tab

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

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中展示哪個界面浪藻。

未完待續(xù)...

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末捐迫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子爱葵,更是在濱河造成了極大的恐慌施戴,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萌丈,死亡現(xiàn)場離奇詭異赞哗,居然都是意外死亡,警方通過查閱死者的電腦和手機浓瞪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門懈玻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來巧婶,“玉大人乾颁,你說我怎么就攤上這事∫照唬” “怎么了英岭?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長湿右。 經常有香客問我诅妹,道長,這世上最難降的妖魔是什么毅人? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任吭狡,我火速辦了婚禮,結果婚禮上丈莺,老公的妹妹穿的比我還像新娘划煮。我一直安慰自己,他們只是感情好缔俄,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布弛秋。 她就那樣靜靜地躺著器躏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蟹略。 梳的紋絲不亂的頭發(fā)上登失,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天,我揣著相機與錄音挖炬,去河邊找鬼揽浙。 笑死,一個胖子當著我的面吹牛意敛,可吹牛的內容都是我干的捏萍。 我是一名探鬼主播,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼空闲,長吁一口氣:“原來是場噩夢啊……” “哼令杈!你這毒婦竟也來了?” 一聲冷哼從身側響起碴倾,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤逗噩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后跌榔,有當地人在樹林里發(fā)現(xiàn)了一具尸體异雁,經...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年僧须,在試婚紗的時候發(fā)現(xiàn)自己被綠了纲刀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡担平,死狀恐怖示绊,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情暂论,我是刑警寧澤面褐,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站取胎,受9級特大地震影響展哭,放射性物質發(fā)生泄漏。R本人自食惡果不足惜闻蛀,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一匪傍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧觉痛,春花似錦役衡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽泽篮。三九已至,卻和暖如春帽撑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鞍时。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工亏拉, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逆巍。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓及塘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親锐极。 傳聞我的和親對象是個殘疾皇子笙僚,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內容