#3 讓一些常用的 UI 元件動起來吧！

Segmented Control / Slider / Switch / Activity Indicator View / Progress View / Visual Effect View with Blur / Page Control / Date Picker

Photo by Killian Cartignies on Unsplash

Segmented Control

1. Segments： 選單總數
2. Segment：某一選單
3. Title：某一選單的文字標題
4. Image：某一選單的圖片標題
5. Selected Tint：所按選單標題底色

Slider

1. Value：slider按鈕預設的數值
2. Minimum：slider按鈕在最左邊時的數值
3. Maximum：slider按鈕在最右邊時的數值
4. Min Image：slider最左端旁的圖示
5. Max Image：slider最右端旁的圖示
6. Min Track：slider按鈕以左的顏色
7. Max Track：slider按鈕以右的顏色
8. Thumb Tint：slider按鈕顏色

Switch

1. State：狀態為 On 或 Off
2. On Tint：On 時 Switch 的顏色
3. Thumb Tint：圓圈的顏色

Activity Indicator View

1. Style：轉輪大小，可選 Medium 或 Large
2. Color：轉輪顏色
3. Animating： 打勾後，執行模擬會轉動
4. （補充）Hides When Stopped：打勾後，若讓轉輪停止則會隱藏

Progress View

1. Style：有 Default 跟 Bar 兩種樣式可選擇，Bar 的線條較細
2. Progress：預設進度位置，範圍是 0~1
3. Progress Tint：進度條的左半部顏色
4. Track Tint：進度條的右半部顏色
5. Progress Image：以圖片當作進度條右半部
6. Track Image：以圖片當作進度條背景圖

Visual Effect View with Blur

一般效果（Extra Light / Light / Dark）

Extra Light / Light / Dark

Adaptive Effects（Regular / Prominent）

Regular / Prominent

System Adaptive Effects（Ultra Thin Material / Thin Material / Material / Thick Material / Chrome Material）

Ultra Thin Material / Thin Material

Material / Thick Material / Chrome Material

System Light Effects 及 System Dark Effects 此處略。

Page Control

1. # of Pages：圓點總數
2. Current：目前在第「0 ~ 圓點數-1」個圓點（該點預設為白色）
3. Hides for Single Page：當總共只有一頁時，是否要隱藏那一顆圓點
4. Tint Color：所在頁圓點以外的圓點顏色
5. Current Page：所在頁的圓點顏色

注意：Scrolling Enabled，預設就是打勾的。

Date Picker

1. Style：有 automatic / Wheels / Compact / Inline ，似乎只有 Inline 能用
2. Mode：Time / Date / Date and Time / Count Down Timer，這邊我選擇 Date and Time
3. Locale：Date Picker 顯示的語系
4. Interval：挑選分鐘數時，捲動一格會跳的時間間隔
5. Date：選擇目前所在的日期
6. Minimum Date：可選擇的最早日期
7. Maximum Date：可選擇的最晚日期

參考資料

研究以下 UI 元件: Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page…