利用 ScrollView 的 contentInset 來解決鍵盤擋住 ScrollView 上的 TextFiled

--

在開發過程中,我想大家一定常遇到彈出的鍵盤擋住畫面上的元件,導致使用者都不知道自己輸入什麼內容😅

彈出的鍵盤擋住畫面上的元件

此問題的解決方法有很多種,今天要說的是利用 ScrollView 的 contentInset 屬性來解決。contentInset 屬性有什麼作用?根據官方文件的說明,其可增加 ScrollView 額外的 contentSize。

contentInset 屬性的作用

假設我們對 ScrollView 設定 contentSize 和 contentInset 的話,UI 會有什麼變化呢?

scrollView.contentSize = CGSize(width: 200, height: 200)scrollView.contentInset = UIEdgeInsets(top: 30, left: 50, bottom: 1200, right: 70)
contentSize 和 contentInset

從 Storyboard 開始說明起~如上影片所看到的,Main.storyboard 裡有一個ScrollView,其有著許多的 TextFields。

其所對應到的 ViewController 有建立一 ScrollView 的 Outlet

在 ViewDidLoad 監聽鍵盤的事件,keyboardWillChangeFrameNotification 和 keyboardWillHideNotification

在 viewWillDisappear 移除鍵盤的監聽事件,keyboardWillChangeFrameNotification 和 keyboardWillHideNotification

撰寫鍵盤監聽 event trigger 的 func

第 2 行 => 取得彈出的鍵盤的 Frame。

第 8 行 => 取得鍵盤轉換後的 Frame 是相對於 UIWindow 的位置並非是 UIView,因 UIWindow 是用來接收鍵盤事件的。

第 12 ~18 行 => 分別處理鍵盤收合和出現的邏輯。當鍵盤收合時,將 contentInset 和 scrollIndicatorInsets 設為 0,反之,增加其可 scroll 的高度。在設定 contentInset 的同時,也一併要設定 scrollIndicatorInsets,如此 scroll bar 才會 scroll 到和 contentInset 的高度,scrollIndicatorInsets 觀念則為和 contentInset 一樣。

scrollIndicatorInsets.bottom = 200
scrollIndicatorInsets.bottom = 200

試著啟動模擬器,當鍵盤彈出時,ScrollView 會增加其 contentInset,增加可 scroll 的高度。

如果您喜歡我的文章,請多按幾下「拍手」給我鼓勵,或是按「follow」讓我持續提供好文章給您。

--

--