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

Segmented Control

1 Segments:設定分類數量,最小設定為2
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:滑鈕顏色設定

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

1 State:開關狀態
2 On Tint:開關滑塊左邊顏色
3 Thumb Tint:開關滑塊右面顏色

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

1 Style:運作中的icon大小
2 Color:運作圖示顏色
3 Animating:運作中圖示動畫旋轉模式

Progress View 顯示進度的進度條,比方資料下載的進度

1 Style:進度顯示條的式樣選定
2 Progress:進度設定,最小0開始,最大到1,10等分
3 Progress Tint:起始區的顏色選擇
4 Track Tint:結束區的顏色選擇
5 Progress Image:已完成的進度條圖片
6 Track Image:進度條的底圖

Visual Effect View with Blur 毛玻璃效果

Blur Style 毛玻璃的模式選擇,有5種大類可以選擇

Page Control 顯示分頁之元件

1 # of Pages:分頁數量,初始設定3頁
2 Current:當前頁面位置
3 Hides for Single Page:當pages設定為1頁時,隱藏此分頁圓點
4 Tint Color:頁面顯示的顏色
5 Current Page:當前畫面的顯示顏色點

Date Picker 時間選擇的元件

1 Style:時間選擇的風格,2種,一種是自動,一種是輪轉式
2 Mode:共有4種模式可選擇,時間/日期/時間+日期/倒數計時
3 Locale:時區選擇,default則依照使用者所在地區變化
4 Interval:設定時間的間隔
5 Date:可以設定或是依照當前時間
6 Minimum Date:設定可以選擇的最早日期及時間
7 Maximum Date:設定可以選擇的最晚日期及時間

--

--