#2研究 UI 元件: Segmented Control,Slider,Switch,Activity Indicator View,Progress View,Page Control,Date Picker,Visual Effect View with Blur

Segmented Control元件:切換分類的元件,比方選擇性別。

Segments:可以設定很多的分類,最小設定值是2

Segment:可以下拉式選擇設定好的分類,在Title欄位可以輸入名稱。

Image:如果不要使用Title輸入名稱,也可以設定用圖示來表示。下拉後有很多內建圖示可以選擇。

image

Selected:有打勾時可以預設那個分類選項。沒有打勾就是沒有預設選項。

Selected沒有打勾時。
Selected有打勾時。

Slider元件:滑動設定數值的元件,比方控制音樂的音量,螢幕的亮度等

Slider元件

Value:預設的數值。

Minimum:設定最小數值。

Maximum:設定最大數值。

Min Image:可以在最小數值插入圖示,內部還有一些細項可以使用。

Max Image:可以在最大數值插入圖示,內部還有一些細項可以使用。

Min Track:越往右滑動,顏色的數值變動。

Max Track:越往左滑動,顏色的數值變動。

Thumb Tint:中間的滑桿顏色設定。

Switch元件:開關,比方設定是否打開9:30起床的鬧鐘。

State:預設開或關。

On Tint:設定打開時的顏色。

Thumb Tint:滑桿顏色設定。

Switch元件

Activity Indicator View元件:代表正在做某件事的進度條,比方資料下載中。

Style:調整大小及樣式。

Color:設定顏色。

Animating:有打勾時就會一直轉動。

Activity Indicator View元件

Progress View元件:顯示進度的進度條,比方資料下載的進度。

Style:樣式選擇。有陰影線條出現或沒有出現。

Progress:預設bar的數值。

Progress Tint:bar數值的顏色。

Track Tint:bar還未完成的陰影線條數值的顏色設定。

Progress Image:也可以用圖片去取代顏色設定進度條的進度。

Track Image:還未完成的陰影部分也可以用圖片去取代。

Progress View元件

Visual Effect View with Blur元件:毛玻璃效果。

Blur Style:有很多的樣式可以選擇。可以先放一張圖片在桌面,這樣子顯現的效果才會出來唷。

Page Control元件:小圓點,顯示有幾個分頁和目前在第幾個分頁。

#of Pages:顯示小圓點的數量。

Current:實心小圓點到第幾個。例:選0的話就是第1個。

Hides for Single Page:如果打勾時,只有一頁,那麼小圓點就會隱藏起來。

Hides for Single Page打勾時。

如果不打勾,只有一頁,小圓點還是會顯示。

Hides for Single Page沒有打勾時。

Tint Color:顏色設定

Current Page:當頁小圓點顏色設定

顏色設定

Date Picker元件:時間選擇的元件。

Style:日期顯示的樣式

Style

Mode:顯示日期或時間、日期時間一起顯示、倒數計時。

Mode

Locale:語言選擇。

Interval:時間間隔。

Date:可以選擇現在的時間或者選擇其他的日間及時間。

Date

Minimum Date

Maximum Date

--

--