Ep.21[ wen’s iOS ] — UI元件之研究 Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date Picker，Visual Effect View with Blur，Color Well
時間過的好快，文組班結束後想要從無到有寫出 21點的 app，卻一直卡關，直到彼得潘班都開始了 QAQ … 。趕緊來惡補一下進度！
想要寫出一個好的 app 必須要有很好的互動體驗，熟悉各項元件有助於 app工程師在設計畫面的時候提供適當的元件來互動。
Segmented Control
切換分類的元件，例如選擇左右。
1 Segments ：segments 的數字控制 Segmented Control 的數量。
2 Segment ：可以選擇 Segmented Control 中的個別欄位。
3 Title：Segmented Control 中個別欄位的名稱。
4 Image：可以自定義內建的 SF Symbol 或 加入 Assets 的圖。
5 Selected ：Segmented Control 被選擇到的時候。
Slider
滑動設定數值的元件，例如控制聲音大小，筆刷大小等。
1 Value ：Slider 的起始值。
2 Minimum：Slider 的最小值。
3 Maximum：Slider 的最大值。
4 Min Image：最小值的圖示。
5 Max Image：最大值的圖示。
6 Min Track：小於控制桿之 Slider 顏色。
7 Max Track：大於控制桿之 Slider 顏色。
8 Thumb Tint：控制桿之顏色。
Switch
控制開關，例如設定是否開啟深色模式、省電模式等。
1 State：開關預設值 - 開啟 / 關閉。
2 On Tint：開關的顏色。
3 Thumb Tint：控制桿的顏色。
Activity Indicator View
正在做某件事的進度條，例如搜尋中。
1 Style：Medium / Large / Large White / White / Gray — 調整大小及顏色。
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：設定尚未處理進度用什麼圖片填滿。
Page Control
顯示有幾個分頁和目前在第幾個分頁的小圓點。
1 # of Pages：控制顯示幾個分頁。
2 Current：目前顯示的分頁。
3 Hides for Single Page：這個屬性打勾時，當總頁數（# of Pages 屬性）為1 時，這個元件就會被隱藏起來。
4 Tint Color：小圓點的顏色。
5 Current Page：當前頁面小圓點的顏色。
Date Picker
選擇時間的元件。
1 Preferred Style：上圖為依序為 Inline / Compact / Wheels 。
2 Mode：決定元件顯示時間、日期、時間和日期或倒數計時間隔。
3 Locale：決定現在是哪個特定語言環境的時間，這個屬性能覆蓋掉系統的環境默認值。
4 Interval：用來設定選項為幾分鐘的間隔。
5 Date：決定 Date Picker 能夠選擇的最小與最大的日期範圍。
6 Minimum Date：設定日期的最小範圍。
7 Maximum Date：設定日期的最大範圍。
Visual Effect View with Blur
毛玻璃效果，通常應用在一些畫面的背景讓使用者專注於前景內容的效果，
不是用來打馬賽克的 xd。
Blur Style：Extra Light / Light / Dark 。
Vibrancy：勾選 Vibrancy 會讓 Label 也產生毛玻璃的效果。
Color Well
選擇顏色的元件。
參考
