Xcode 的各種 UI 元件研究筆記（上篇）
◆作業2–2：研究 Xcode 中的 UI 元件及屬性欄位◆
這次研究的 UI 元件很多，因為寫起來篇幅太長，所以分上下篇
上篇包含：iOS 常見元件
下篇包含：文字相關（Label、TextField、TextView）、圖片相關（ImageView）示範版本為：Xcode 12 beta
可搭配 蘋果 iOS Human Interface Guidelines（以下簡稱 HIG） 一起閱讀（作業還沒寫出來，所以先放原文網址 😂）下面「使用注意點」部份會擷取一些 HIG 重點寫入
範例圖片會盡量以 iPhone 內建的 APP 為主，畢竟內建的 App 介面一定會符合自家規範 ´-ω-)b
iOS 基本常見 UI 元件
Segmented Control
HIG 中的敘述：Controls→Segmented Control
。使用場合：功能/分類的切換。例如：選擇性別、尺寸，看數據時選擇「以週顯示」或「以月顯示」…等
。使用注意點：最少包含兩個選項，雖然沒有上限數，但是 HIG 中有明確指出──在 iPhone 上使用 Segmented Control 時最好不要超過 5 個
✱ Segmented Control 屬性相關欄位 ✱
❶ Segments
數量（要分幾段）
預設是最少數量的兩段❷ Segment
選取其中一個分段按鈕
要先選擇才能對裡面的內容（下面的屬性2、3、4、5）做變動，沒有選的話只會變到第一個按鈕（因為預設是第一個，也就是 Segment 0）
❸ Title
選取中的 Segment 顯示的文字
有圖就沒文字，有文字就沒圖，只能擇一❹ Image
選取中的 Segment 顯示的圖片
不過通常好像比較常看到文字就是了🤔❺ Selected
選取中的 Segment 是否被設定為「預設選取」（優先顯示此分段內容）
上面右邊 GIF 圖中，付費/免費 App 排行點進去是都排行榜頁面，並用分段按鈕分開：
從首頁點 付費 App 排行→預設選取「付費 Segment」
從首頁點 免費 App 排行→預設選取「免費 Segment」
另外，這裡的 Selected 是指 Behavior 那個
一開始按成下面 State 那區的 Selected 但沒研究出差在哪…（以後有發現再來補完）
— — —
Slider
HIG 中的敘述：Controls→Sliders
。使用場合：用滑動的方式設定數值
。使用注意點：不要使用 Slider 做音量的調節（HIG 內文寫到 App 內需調節變化可以使用 VolumeView。目前還不知道是什麼，總之先寫起來放）
✱ Slider 屬性相關欄位 ✱
❶ Value
預設值（只能是數字）
會依照下面最小/最大值的相對位置，決定那顆圓形頭的位置在哪裡（如下方 GIF ）
因為 Slider 實際上是可以滑動的，這個 Value 是指使用者未調整時的預設值❷ Minimum
最小值（只能是數字）❸ Maximum
最大值（只能是數字）
❹ Min Image
最小值（左邊）的圖片❺ Max Image
最大值（右邊）的圖片
❻ Min Track
起點最小值～目前位置的填充顏色（白話：左邊滑出來的顏色）❼ Max Track
目前位置～終點最大值的填充顏色（白話：右邊還沒滑到的顏色）❽ Thumb Tint
那顆圓形頭（會拉著滑的那顆）的顏色
。使用場合：跟字面一樣就是開關。兩個互斥狀態（打開和關閉）之間的可視切換（By HIG＆估狗翻譯）
。使用注意點：避免添加文字來敘述開關的值，以免讓使用者搞混
✱ Switch 屬性相關欄位 ✱
❶ State
開/關（On / Off）預設是 On❷ On Tint
開關打開時後面的填充色
（這個顏色只有在 State 是 On 時才會顯示）
❸ Thumb Tint
開關圓圓頭（？）的顏色
不過平常在一般 App 裡似乎不常看到設定 Thumb Tint 的狀況 🤔
。使用場合：Loading、讀取中（沒有實際進度）例如：頁面、影片的讀取
。使用注意點：
1.如果有明確進度，請用進度條（Progress View）
2.保持旋轉，讓使用者知道還在運作
3.可以在等待時加上一些文字訊息，並避免使用術語（因為使用者也看不懂所以沒有意義）
✱ Activity Indicator View 屬性相關欄位 ✱
❶ Style
外觀樣式，選擇有：
中（預設）/大
白色、白色（大）、灰色（但這三種分項標題明白寫著不推薦使用 XD）
❷ Color
顧名思義就是變更圈圈的顏色❸ Animating
常見的轉圈圈動畫（反而更少看到沒動畫的吧 (´⊙ω⊙`) HIG 都寫要讓他保持旋轉了 XD）
StoryBoard 的畫面上看不出來，但打開模擬器真的會轉喔！
。使用場合：有明確進度顯示的進度條，比如：下載資料、網頁載入
。使用注意點：要回報準確的進度，不要謊報，如果是無法量化的進度應該使用 Activity Indicator View
✱ Progress View 屬性相關欄位 ✱
❶ Style
Default：預設外觀，左右兩邊有切圓角
Bar：高度比 Default 扁一點、左右兩邊是沒有圓角的方形❷ Progress
進度條的起始位置（只能是數字）
跟 Slider 的 Value 一樣實際上是會變動的，所以這裡輸入的值是指進度條剛跑出來時顯示的位置（像上面範例左圖，剛開啟網頁時的進度條位置）
❸ Progress Tint
起點～目前進度位置的填充顏色（白話：左邊已經跑完的顏色）❹ Track Tint
目前進度位置～終點的填充的顏色（白話：右邊還沒跑到部分的顏色）
❺ Progress Image
起點～目前進度位置中填充圖片（白話：在左邊已經跑完的地方放圖片）❻ Track Image
目前進度位置～終點中填充圖片（白話：在右邊還沒跑到的部分放圖片）
Tint 跟 Image 只能選一個放，有上色就不能放圖，放圖又上色就只會顯示顏色設定稍微用 SF Symbol 設定圖片，設定不同 Progress 的值會拉伸圖片（值越大會把圖拉越長）而且如果 Progess 跟 Track 都設定圖片的話，兩張圖會疊在一起，看起來蠻詭異的，可能要用特定規範的圖吧 (´･_･`)
比較好奇的是：Progress View 用模擬器跑的時候還是靜態的（停在起始位置預設值的位置）可是實際出現的場合明明會是顯示動態 (｡ŏ_ŏ)???
— — —
Page Control
HIG 中的敘述：Controls→Page Control
。使用場合：多頁狀態時顯示全部分頁數量和目前位置的點點（雖然不是 App，但是網站很多放 Banner 的地方也會有 Page Contorl 的設計）
。使用注意點：
1.點（頁面）的數量最好不要超過 10 個，最多不超過 20 個。且超過 20 個點時，代表系統要載入 20 個頁面會很耗時
2. Page Control 應該常置於頁面底部，才不會影響頁面中的顯示內容
✱ Page Control 屬性相關欄位 ✱
❶ # of Pages
總共有幾頁注意：預設置入時只有三個點點，所以物件框只能容納三個，物件框沒有拉開的話，就算加到五百個點還是永遠只會顯示三個
用好幾次想說都沒增加點點，還以為是 Xcode 壞掉，結果最後發現只是框框太小才無法顯示 😂
❷ Current
現在停留的頁面
注意：0是指第一個點，1是指第二個點❸ Hides for Single Page
只有一頁（一個點點）時隱藏 Page Control
我的理解：假如今天我要放在首頁 Banner 只有一張（平常可能五六張），就不要出現 Page Contorl 的點點
❹ Tint Color
其他頁（非現在停留頁）的顏色❺ Current Page
現在停留的這頁的顏色
變更 Current 的位置時，在 StoryBoard 中顏色是不會跟著變的（除非 Current 是 0，也就是在第一頁）不過用模擬器開啟時，顏色會正常顯示
。使用場合：選擇時間、日期使用的 Picker （另有非日期時間用的 Picker，例如 HIG 放的範例為選擇血型的 Picker，Xcode 上的元件為 PickerView）
。使用注意點： iOS14的 Date Picker 有新的樣式（日曆樣式）
✱ Date Picker 屬性相關欄位 ✱
❶ Style
Automatic：預設是 iOS14 新的日曆造型 Picker
Wheels：以前的滾輪造型 Picker但是 Mode 選擇倒數計時器的話，就算選 Automatic 也是出現滾輪型喔（日曆型只適用日期/時間）
❷ Mode
Time：只顯示時間（PM,AM/時/分）
Date：只顯示日期（年/月/日）
Date and Time：日期與時間（月/日/PM,AM/時/分）
Count Down Timer：倒數計時器(時/分）
❸ Locale
區域，同一個語言也有不同國家可以選
玩出一個很有趣的：同樣是英文，選美國會出現AM/PM選項，英國是直接用 24 時制（如下右 GIF 圖）
❹ Interval
時間間隔，最小為 1 分鐘（可以選擇的值有：1～6、10、12、15、20、30 分鐘）❺ Date
起始日期（當 Picker 一跳出來時看到的日期）
Current Date：使用時的當天日期
Custom：客製（自己填入）❻ Minimum Date
日期/時間最小值❼ Maximum Date
日期/時間最小值對日期設定最小值/最大值，常見的例如：註冊需要成年認證的網站時，生日在某個年份以後的就無法選擇（不過大家都謊報不是公開的祕密嗎（喂））
— — —
Visual Effect View with Blur
。使用場合：背景模糊的毛玻璃效果（特別是彈出視窗時的背景，如上圖）
✱ Visual Effect View with Blur 屬性相關欄位 ✱
❶ Blur Style
效果也太多種！看學長姊上一個版本也才 5 個 😂
因為太新好像也搜尋不太到各個效果的使用情境（憑感覺的概念？（誤））常見的：Extra Light、Light、Dark、Regular、Prominent（偷偷摳比萊點特別大大的整理）
❷ Vibrancy＆Vibrancy Style
好像也是新的功能，一開始先查看看單字原意：充滿活力、振動、振奮、活耀 (｡ŏ_ŏ)???啥？
不過搜尋 Vibrancy Blur 就有比較多範例：
目前已知：
1.Vibrancy 打勾後模糊會消失，下面會多一個 Vibrancy Style 的屬性可以調整，但裡面每個選項差在哪還未知
2.好像是用在：背景已經模糊，上方物件想要有穿透背景的效果時（但試做出來即使物件顏色是白色或其他色，按下 Vibrancy 後都會像下右圖一樣變同一種黑色）
其實下篇也快寫完了，只是回首一看發現寫在一篇的話篇幅實在太長，所以分成上下篇（Peter 我上禮拜都沒出作業是因為都在寫這個啦 (›´ω`‹ )）
總之下篇見 (“￣▽￣)-o█ █o-(￣▽￣”)/
