認識 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 研究吧!
⭐️英語小教室
以下是經常會看到的英文單字
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 點擊後彈出視窗的標題
為了避免之後金魚腦,整理成簡報方便複習:
參考文件
感謝學長用心智圖給我的啟發💡