8種常見UI元件,一次探索。
超常見的UI元件,每個都一定在你的手機出現過!
目錄
一、Segmented Control
二、Slider
三、Switch
四、Activity Indicator View
五、Progress View
六、Visual Effect View with Blur
七、Page Control
八、Visual Effect View with Blur
Segmented Control
功能:切換分類。
舉例:切換性別。
為了性別友善我特別增加了第三性~幫自己鼓掌(拍手)
研究欄位
1 Segments:有幾種分類。
2 Segment:選擇分類(選擇後才可以修改下面的選項)
3 Title:分類顯示名稱。
4 Image:分類顯示樣式(和分類顯示名稱只能二選一,不能同時顯示)
5 Selected:預設選取(有打勾就是預設,不管有幾種分類,只能勾一個)
Slider
功能:滑動來設定素質。
舉例:調整音量。
研究欄位
1 Value:預設值
2 Minimum:最小值
3 Maximum:最大值
4 Min Image:最小值的圖案
5 Max Image:最大值的圖案
6 Min Track:滑動鈕左側的顏色(粉色)
7 Max Track:滑動鈕右側的顏色(藍色)
8 Thumb Tint:滑動鈕的顏色(黃色)
9 Tint:更改Min/Max Image的顏色(紫)
Switch
功能:開關。
舉例:鬧鐘開關。
484很討厭看到這個畫面!一天要按掉10個鬧鐘才願意起床(我最荒唐)
研究欄位
1 State:預設狀態On/Off
2 On Tint:On的顏色(綠色)
3 Thumb Tint:Off的顏色(白色)
Activity Indicator View
功能:正在做某件事的進度條。
舉例:載入中。
研究欄位
1 Style:設定大小
2 Color:設定顏色
3 Animating:旋轉效果(有打勾才會動)
Progress View
功能:顯示進圖條。
舉例:資料下載進度。
研究欄位
1 Style:樣式,有Default、Bar兩種,但我看不出差別(被打
2 Progress:起始值0~1
3 Progress Tint:已完成進度的顏色
4 Track Tint:未完成進度的顏色
5 Progress Image:完成進度的圖案,但我不知道怎麼讓圖案出現(再被打
6 Track Image:未完成進度的圖案,但我不知道怎麼讓圖案出現(被暴打
等我研究出來後再補上啦~
Visual Effect View with Blur
功能:毛玻璃特效(霧化)
舉例:打馬賽克(?
研究欄位
Blur Style:毛玻璃模式。恕我無能,除了一些很黑的,不然我看起來都覺得差不多(小聲) 一樣等我分辨出來後再補上。
Page Control
功能:小圓點,顯示有幾個分頁,現在在哪個分頁。
舉例:手機桌布分頁。
研究欄位
1 # of Pages:共幾個分頁
2 Current:目前在第幾個分頁(0是最左邊,1往右一格,以此類推)
3 Hides for Single Page:勾選時,當只有一頁時不顯示點點。
4 Tint Color:非目前頁面點的顏色(粉)
5 Current Page:目前頁面點的顏色(藍)
Visual Effect View with Blur
功能:選擇時間。
舉例:就是選擇時間。
研究欄位
1 Mode:顯示模式。有四種,時間、日期、日期+時間、倒數。
2 Locale:時區
3 Interval: 時間間隔單位(1.2.3.4.5.6.10.12.15.20.30分可選)
— — — — — — — 倒數模式沒有以下三種設定 — — — — — — —
4 Date:Current Date自訂初始時間 or Custom使用目前時間
5 Minimum Date: 打勾,設置最早時間範圍
6 Maximum Date:打勾,設置最晚時間範圍
References