# 認識 iOS 的 UI 元件｜Xcode

Source: https://kylelu.com/articles/2023-11-17-understanding-ui-components-xcode
Markdown alternate: https://kylelu.com/articles/2023-11-17-understanding-ui-components-xcode.md
Author: Kyle Lu
Published: 2025-03-22
Tags: Swift 學習筆記

這次來認識一下 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 研究吧！

[參考官方文件](https://developer.apple.com/design/human-interface-guidelines/color-wells?ref=ghost.kylelu.com)

**⭐️英語小教室**

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

- 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 點擊後彈出視窗的標題

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

[UI 研究中｜Xcode.pdf](https://www.slideshare.net/nbnb6712/ui-xcodepdf?ref=ghost.kylelu.com)

## 參考文件

[研究以下 UI 元件: Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date Picker，Visual Effect View with Blur，Color Well | by 彼得潘的 iOS App Neverland | 彼得潘的 Swift iOS App 開發教室 | Medium](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/%E7%A0%94%E7%A9%B6%E4%BB%A5%E4%B8%8B-ui-%E5%85%83%E4%BB%B6-segmented-control-slider-switch-activity-indicator-view-progress-view-page-control-date-71acc5b2dd7e?ref=ghost.kylelu.com)

感謝前輩用心智圖給我的啟發💡

[作業#3 — 研究各種 UI 元件 - 彼得潘的 Swift iOS App 開發教室 - Medium](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E6%95%99%E5%AE%A4/%E4%BD%9C%E6%A5%AD-3-%E7%A0%94%E7%A9%B6%E5%90%84%E7%A8%AE-ui-%E5%85%83%E4%BB%B6-b95d33395295?ref=ghost.kylelu.com)