認識 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 前輩就不能不來推薦他最振奮人心的這首歌：

哦這是 IU 晶醬🎤

總之，就用這帶來好心情的旋律展開 UI 研究吧！

UI 元件懶人包

⭐️英語小教室

以下是經常會看到的英文單字

• Progress 進度：特別指已完成的部分。
• Track 軌道：特別指未完成的部分。
• Tint 顏色：輕微的著色，通常會用在 button 或 track 上。

Segmented Control

切換 2 個（或以上）的分類

1. Segments 控制分類數量
2. Segment 選擇該分類
3. Title 分類的名稱
4. Image 分類的圖示
5. Selected 選擇目前指定的區塊

Slider

滑動設定數值，e.g. 控制音量

1. Value 調整數值
2. Minimum 最小值
3. Maximum 最大值
4. Min Image 最小值的 icon
5. Max Image 最大值的 icon
6. Min Track 靠近最小值的滑桿顏色
7. Max Track 靠近最大值的滑桿顏色
8. Thumb Tint 滑桿頭的顏色

Switch

開關，e.g. 開關鬧鐘

1. State 開關的狀態（On/ Off）
2. On Tint 打開（On）的底色
3. Thumb Tint 開關頭的顏色

Activity Indicator View

活動進度條，e.g. 資料下載中

1. Style 大小
2. Color 顏色
3. Animating 是否轉動？（在模擬器顯示）

Progress View

顯示進度條，e.g. 活動進行多久

1. Style Default 圓角/ Bar 直角
2. Progress 目前進度，可填 0~1
3. Progress Tint 進度條已完成的顏色
4. Track Tint 進度條未完成的顏色
5. Progress Image 進度條已完成的填充圖片
6. Track Image 進度條未完成的填充圖片

Visual Effect View with Blur

毛玻璃效果

Blur Style 模糊化效果/遮罩程度

Page Control

顯示目前分頁數和目前在第幾頁

1. # of Pages 總共有幾個分頁
2. Current 目前所在分頁（從 0 起算）
3. Hides for Single Page
   如果 # of Pages 只有一頁，就不顯示此 Page Control
4. Tint Color 非當前分頁圓點的顏色
5. Current Page 當前分頁圓點的顏色

Date Picker

選擇時間日期，e.g. 選擇 2023/11/16

1. Mode 時間/日期/日期＋時間/倒數計時
2. Locale 根據特定時區調整時間格式
3. Interval 設定最短時間間隔（1min~30min）
4. Date 預設顯示日期
5. Minimum Date 最早可選擇的日期
6. Maximum Date 最晚可選擇的日期

Color Well

選擇顏色，e.g. 自訂喜歡的顏色

1. Color 預設顏色
2. Supports Alpha 是否支援不透明度
3. Title 點擊後彈出視窗的標題

為了避免之後金魚腦，整理成簡報方便複習：

參考文件

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

感謝學長用心智圖給我的啟發💡

作業#3 — 研究各種 UI 元件