認識 iOS 的 UI 元件｜Xcode
這次來認識一下 Xcode 裡頭的 UI 元件，畢竟初來乍到，總是要跟前輩們拜個碼頭，讓之後的 swift coding 之路更加順利（是時候跟同學們一起團購綠色乖乖了？）。
目標
UI 元件前輩拜訪清單如下：
Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date Picker，Visual Effect View with Blur，Color Well
說到 UI 前輩就不能不來推薦他最振奮人心的這首歌：
{{< youtube jeqdYqsrsA0 >}}
哦這是 IU 晶醬🎤
總之，就用這帶來好心情的旋律展開 UI 研究吧！
⭐️英語小教室
以下是經常會看到的英文單字
- Progress 進度：特別指已完成的部分。
- Track 軌道：特別指未完成的部分。
- Tint 顏色：輕微的著色，通常會用在 button 或 track 上。
Segmented Control
切換 2 個（或以上）的分類
- Segments 控制分類數量
- Segment 選擇該分類
- Title 分類的名稱
- Image 分類的圖示
- Selected 選擇目前指定的區塊
Slider
滑動設定數值，e.g. 控制音量
- Value 調整數值
- Minimum 最小值
- Maximum 最大值
- Min Image 最小值的 icon
- Max Image 最大值的 icon
- Min Track 靠近最小值的滑桿顏色
- Max Track 靠近最大值的滑桿顏色
- Thumb Tint 滑桿頭的顏色
Switch
開關，e.g. 開關鬧鐘
- State 開關的狀態（On/ Off）
- On Tint 打開（On）的底色
- Thumb Tint 開關頭的顏色
Activity Indicator View
活動進度條，e.g. 資料下載中
- Style 大小
- Color 顏色
- Animating 是否轉動？（在模擬器顯示）
Progress View
顯示進度條，e.g. 活動進行多久
- Style Default 圓角/ Bar 直角
- Progress 目前進度，可填 0~1
- Progress Tint 進度條已完成的顏色
- Track Tint 進度條未完成的顏色
- Progress Image 進度條已完成的填充圖片
- Track Image 進度條未完成的填充圖片
Visual Effect View with Blur
毛玻璃效果
Blur Style 模糊化效果/遮罩程度
Page Control
顯示目前分頁數和目前在第幾頁
- # of Pages 總共有幾個分頁
- Current 目前所在分頁（從 0 起算）
- Hides for Single Page如果 # of Pages 只有一頁，就不顯示此 Page Control
- Tint Color 非當前分頁圓點的顏色
- Current Page 當前分頁圓點的顏色
Date Picker
選擇時間日期，e.g. 選擇 2023/11/16
- Preferred Style 偏好樣式（視窗/滾輪/日曆）
- Mode 時間/日期/日期＋時間/倒數計時
- Locale 根據特定時區調整時間格式
- Interval 設定最短時間間隔（1min~30min）
- Date 預設顯示日期
- Minimum Date 最早可選擇的日期
- Maximum Date 最晚可選擇的日期
Color Well
選擇顏色，e.g. 自訂喜歡的顏色
- Color 預設顏色
- Supports Alpha 是否支援不透明度
- Title 點擊後彈出視窗的標題
為了避免之後金魚腦，整理成簡報方便複習：
參考文件
感謝前輩用心智圖給我的啟發💡
