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
上篇在此：
文字相關 UI 元件
把部分共通的注意點寫在開頭
。文字相關元件共通注意點：
1.即使調整文字的樣式也要保持文字的易讀性
2.用於表單時（TextFields、TextViews）選用適合的鍵盤種類（例如：數字鍵盤、Email 鍵盤、一般內文鍵盤…等）
Label
HIG 中的敘述：Controls→Labels
。使用場合：輸入純文字（單行/多行都可以）
✱ Label 屬性相關欄位 ✱
❶ Line Breaks
當文字內容超過文字框大小，無法顯示全文時的裁切方式【塞不下的部分不會顯示，也不會有…】
Clip：直接依照框的邊邊切掉（不管字母或單字，字有可能被切一半）
Character Wrap：依字母裁切。例如下圖 information 部分即使拼到一半，遇到分行也會被一分為二
Word Wrap ：依單字裁切。下圖 information 部分雖然拼到一半，遇到分行會把 information 放到下一行
（英文／歐文才明顯，中文沒有拼音問題所以顯示不出差別）【塞不下的部分以…顯示】
Truncate Head：… 出現在開頭，省略前半部，顯示後半部文字到內容結束
Truncate Middle：… 出現在中間，省略中間的文字，顯示開頭文字＆後半部文字到內容結束
TruncateTail：預設效果，… 出現在尾端，省略後半部，顯示開頭文字
❷ Autoshrink
當文字內容超過文字框大小時的處置方式Fixed Font Size：不縮小尺寸，不顯示塞不下的文字內容，並依照上面的 Link Breaks 設定來裁切多餘文字
Minimum Font Scale：縮小文章整體比例，把整段文字做等比例縮放，下方會顯示縮小的倍數（數值在 0～1 之間）
Minimum Font Size：縮小字體尺寸，以更改字體大小的方式做縮放，下方會顯示縮小後的字體尺寸（數值最小為 1，最大不超過原本字體尺寸）不過試過好幾個 Minimum Font Scale 跟 Minimum Font Size 外觀上都沒什麼差異，如果文章有另外設定字距或行距或許會比較明顯（嗎？）
❸ Shadow
文字的陰影，預設時無陰影，設定後的Width（X軸）、Height（Y軸）分別是 0 和 –1
Width、Height 數值可以輸入小數點
— — —
TextField
HIG 中的敘述：Controls→TextField
。使用場合：輸入單行文字，使用上以表單為主
。使用注意點：
1.在旁邊寫提示，讓使用者知道這個地方是在輸入什麼東西。但不要另外做一個 Label 來當做提示（應該寫在輸入處或標題等）
2.如果需要，可以在右方加入清除按鈕（這樣使用者就不用自己一個字一個字刪除）
3.輸入特定內容（例如密碼）請用加密文本（Secure Text Field）
✱ TextField 屬性相關欄位 ✱
❶ Placeholder
填寫表單時的提示字（輸入內容後就會自動消失）
❷ Border Style
邊框，有四種選擇，預設是最右邊（白色底、灰色框、切圓角）
其他三種都沒有底色且沒有圓角，最左邊則是沒底色也沒有框
❸ Clear Button
要開模擬器才看得到清除鈕的相關設定Never appears：預設，不顯示清除鈕
Appears while editing：打字時出現清除鈕，離開後填寫欄位時會消失
Appears unless editing：打字時不出現，離開後到其他欄位時才會出現
Is alway visiable：永遠顯示，就算到其他欄位也會一直顯示Clean while editing begins：點下欄位要打字時，清除欄內的文字（僅限使用 Text 做內文的情況時，Placeholder 因為本來就會消失所以無效）
第一次點選欄位清除內容後，跳到別的欄位再回去，欄位就會變空白的（看下面 GIF 比較好懂）
❹ Min Font Size & Adjust to Fit
當輸入文字過長時，會調整字體大小（至設定的最小尺寸）讓使用者可以看到整行完整文字Min Font Size 設定得比原本預設字體尺寸小＋勾選 Adjust to Fit 才會有作用
另外，如果字串長到連縮小到設定的大小都顯示不出全部的話，還是會變...（如下方 GIF）
❺ 研究 Text Input Traits
Ⓐ Content Type
設定輸入內容的類型，依照該類型過去輸入過的內容，提供已記憶的字詞
例如：Content Type 設定為 Email →填寫時打會出現使用者過去常填寫的Email（實際使用的範例圖片可參照：彼得潘以前的文 ）
Ⓑ Capitalization
輸入內容的大小寫設定，設定後該大寫的時候鍵盤也會跟著變化None：預設，全部字母小寫
Words：單字開頭大寫
Sentences：句子的開頭大寫，斷句前都是小寫
All Charaters：全部字母大寫
Ⓒ Keyboard Type
鍵盤種類，依照不同用途設定鍵盤，方便使用者輸入
沒有設定真的對使用者很不便，曾經遇過：需要輸入電話，但設定卻是預設鍵盤，要從英文轉去數字，打一個數字就要按一次 ◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣有些鍵盤雖然看起來相似，但是細節上有所不同，例如： Number Pad、Phone Pad、Decimal Pad都是打數字，但是電話偶爾會需要+、米字號、井字號，因此左下角多加了這三個符號。Number 只能打整數，但 Decimal 可以打小數點
Ⓓ Keyboard Look
鍵盤外觀（預設/深色模式/淺色模式）猜測：當設定手機自動轉換深/淺色模式（日落前淺色，日落後深色）使用預設鍵盤會跟著系統自動轉換。單純設定深/淺色的話，不管手機處在哪個模式，鍵盤一直都是固定的顏色
Ⓔ Return Key
更改 Return Key 的文字
不知為何選擇 Google/Yahoo/Search ，在模擬器上顯示鍵盤時都是顯示 search XDⒻ Auto-enable Return Key
當使用者輸入文字後，Return Key 才按得下去
沒輸入內容時 Return Key會灰灰的不能按（避免必要內容未輸入前就送出表單的機制）
Ⓖ Secure Text Entry
隱藏輸入資料文字，通常用在密碼、輸入信用卡資料時
Ⓗ 校正相關屬性欄位
選項中都只有三個： Default／No／Yes
應該是跟輸入時的智慧校正有關的設定Default／Yes＝字詞會自動校正
No＝依使用者輸入內容呈現（不校正）Correction：預測下一個字詞
Smart Dashes：校正連接號。將「- -」「-- -」校正為「 — 」 （Medium 對連接號也會校正，所以間隔有點奇怪 ( 3ω3)）
Smart Insert：感應單字與單字之間，並自動插入空格
Smart Quote：校正上下引號。將「‘ ‘」校正為「‘ ’」 、「“ “」校正為「“ ”」
Spell Checking：校正單字拼字
關於 Smart Dashes、Smart Quote 校正前後的微小差異可以參考這篇文章：
❻ 研究模擬器 Toggle Software Keyboard 功能
在模擬器中收合鍵盤
位置：I/O > Keyboard > Toggle Software Keyboard
快捷鍵：cmd + K
不過如果是隱藏狀態時，就算點欄位要輸入，鍵盤也不會自動跑出來（要再按一次快捷鍵打開鍵盤）
— — —
TextView
HIG 中的敘述：Views→Text Views
。使用場合：
1.「可捲動」的多行文字，純文字或輸入表單都可用
2.放入網址／地址／電話…等場合，可以建立連結、開地圖、撥號等
場合 (1.) 的可捲動多行文字大多是用在填寫資料時，純文字似乎比較少見（猜測是因為內容超出頁面時，頁面本身就會捲動，再另外做一個可捲動文字框操作時並不方便）
純文字多用在場合 (2.) 的自動偵測。因為同樣一段文字，使用 Label 時即使貼連結也是無法點選的文字，而使用 TextView，並勾選 Data Detectors 的 Link（電話勾 Phone，地址勾Address…以此類推）實際操作時就可以開啟連結（如下右方 GIF ）
圖片相關 UI 元件
ImageView
HIG 中的敘述：Views→Image Views
✱ ImageView 屬性：Content Mode 的顯示效果 ✱
❶ Scale To Fill：把圖片強迫滿版至圖片框的大小（不維持原圖比例，圖片會變形）
❷ Aspect Fit：預設的效果。把整張圖片置入圖片框中，但尺寸不符時會有白邊
❸ Aspect Fill：滿版至圖片框的大小＋維持原圖比例
❹ Redraw：新的，圖面上看不出跟 Scale To Fill 差在哪 😂
後面幾個：Center、Top、Bottom、Left、Right、Top Left、Top Right、Bottom Left、Bottom Right 都是以 ImageView 設定的框的尺寸大小，不變更原圖尺寸狀況下，依照原圖的相對位置去擷取（直接看圖比純文字敘述好懂 ↓ ）
呼，拖了好久終於寫完了！本來上篇發完應該很快就寫完，結果遇到電腦換電池，苦等好幾天沒有 Xcode 可以用（沒有有在用 Mac 朋友的邊緣人QQ）打完就跟上面圖片的 Pingu 一樣，拖太久心好累啊～（一氣呵成卡送快啦）
而且意外的花很久時間在操作跟測功能（可能有一半時間在等模擬器 XD）像前面直接被 Page Control 陰一波 (´･ω･`) 表面上欄位少又常見好懂，想說應該一下就搞定，沒想到意外連連，果然是要實際用過才知道啊（怎麼聽起來色色的）
