線上收聽與節目筆記

這集「來做 Side Project」系列來講講鍵盤跟文字輸入的一些基本東西。Apple 真的有很多跟文字輸入還有鍵盤的 API 呢。

歡迎收聽「我就弱！」

• 「我們弱」彩蛋請上我們的 Twitter

上週補充

• 慎用 SKStoreReviewController

iOS 軟體鍵盤要注意什麼？

• 鍵盤出現時不要擋住畫面
  • 系統會提供內含 keyboard frame 的 notifications
  • 不過 iOS 13 以前有一些 bug，可以參考 niw 最近開源的套件 KeyboardGuide
  • 用 Storyboard 來做的話，很容易就切換預覽裝置來檢查會不會破版
  • 我會用 scroll view 讓畫面是可以捲動的，這樣就可以用 contentInset 而不用去改 frame 或 constraints
• 鍵盤要怎麼收掉？
  • UIScrollView 的 keyboardDismissMode 可以設定是互動式（往下拉）、一捲動就收鍵盤，還是沒有動作
  • iPhone 可用 UIResponder 的 inputAccessoryView 加上收鍵盤的按鈕
  • 在 return key 的 delegate method 呼叫 resign
• Return key 用什麼文字更符合輸入的目的？
  • returnKeyType 可以設定 Go、Google、Join、Search、Continue，甚至 Yahoo 等等
  • 在 return key 的 delegate method 實作跳轉到下一個輸入框
• 鍵盤是拿來輸入什麼的？一般文字、純數字、Email、還是 Twitter？UITextInputTraits 要記得指定 keyboardType
• iOS 10 之後還有 textContentType 可以設定
  • 系統可能會更清楚該怎麼調整一些鍵盤的行為
  • 支援 Password AutoFill 時也會用到
• 鍵盤顏色，在 iOS 13 比較不用煩惱，但是以前自製深色模式時， keyboardAppearance 要自行指定
• 輸入密碼的話，UITextField 設定 isSecureTextEntry 會變成蓋住的字元，而且剪貼簿會自動關閉。如果有什麼理由需要做自製的密碼欄，最好注意這個行為
• 讓輸入更好用的細部設定
  • 自動大小寫：autocapitalizationType
  • 自動修正：autocorrectionType
  • 拼字檢查：spellCheckingType
  • Smart quotes：smartQuotesType
  • Smart dashes：smartDashesType
  • Smart insert delete（要不要自動空白）：smartInsertDeleteType

表單設計

• 如果有多個輸入框，例如註冊表單的話，請在 textFieldShouldReturn 把下一個 text field 設定成 first responder，讓使用者按 Return/Next 鍵，鍵盤在不收掉的情況下可以跳到下一個輸入框
• enablesReturnKeyAutomatically 預設是 false。改成 true 的話，文字框是空白時 Return 鍵會自動關閉
• 登入表單支援 Password AutoFill
  • 需要有官網、設定 associated domain

文字編輯指令

• 按住游標位置時會出現的那個浮動氣泡，內有剪下、複製、貼上、全選等等，API 名稱是 UIMenuController
  • 從 canPerformAction(_:withSender:) 可以關掉某些功能
  • 比如說選取的文字可以進行 Google 或維基搜尋（不過我自己現在都用內建的「查詢」）
• iPad 鍵盤上有 shortcut bar，可以透過 inputAssistantItem 來設定。可惜沒有支援 iPhone
• textInputMode 可以偵測鍵盤語言

支援硬體鍵盤

可以考慮幫 app 加上硬體鍵盤快速鍵的支援。這個 API 其實很簡單就可以做好，使用者也只需要按住 Cmd 鍵就可以看到目前畫面有哪些快速鍵，學習成本甚至比 Mac app 還低。

只要實作 UIResponder 的 keyCommands 即可。iOS 13.4 甚至支援了以前 Mac 才有的 modifier keys remapping

結尾閒聊

• UndoManager
• 如果整個 app 只有中文，但是你沒有設定語言的話，選單啊、Return 鍵那些都會是英文（Base）喔。所以即使只有一個語言，還是要設定多國語系
• 我是怎麼知道這些的呢？因為以前只會用 IB，所以會看到一堆設定選項。所以不要說 Storyboard 爛啦，拿來學習 UI 元件有哪些設定也很不錯🤪
• 而後來養成讀文件的習慣，就可以知道更多
• 知道這些東西可能都不會用到，但是也說不定哪天你就用得上
• 歡迎轉給設計師或 PM 同事聽，畢竟工程師更容易接觸到原生 API

更多 weak self

• 聽眾信箱 [email protected]
• 官網 https://weakself.dev
• 主持人 一三、波肥、喬喬
• Twitter @weak_self
• 提問箱
• 贊助 weak self