Swift 3.1聊天界面鍵盤效果的實現(xiàn)詳解
前言
最近寫的 Swift 項目里要實現(xiàn)一個聊天界面，在處理鍵盤彈出的時候遇到了一點麻煩。
麻煩就在于鍵盤彈出后如何處理屏幕和鍵盤的關(guān)系
經(jīng)過一番死磕，終于做出了想要的效果，效果如下：
注：原本項目是 Swift 2.3 寫的，為了寫這篇博客，用 Swift 3.1 重新實現(xiàn)了一遍。
感受：方法名真的縮短了不少，😁
分析
現(xiàn)在開始，就讓我來分析一下這次死磕歷程。
一開始想到了兩種處理方法，一種是 鍵盤彈出消失的同時，輸入欄隨著鍵盤移動，一種是 鍵盤彈出消失時，整個屏幕隨著鍵盤移動，這兩種方法都有弊端，讓我們分類討論下：
1. 輸入欄隨著鍵盤移動
- 當(dāng)消息條數(shù)較少時，鍵盤不會遮擋住消息
- 消息條數(shù)多了以后，鍵盤會遮擋住屏幕中處在鍵盤位置的消息
- 每次發(fā)送了新的消息，用戶無法及時看到（因為被鍵盤遮住了）
結(jié)論：體驗不好
2. 屏幕隨著鍵盤移動
- 消息多了以后，能在屏幕上及時看到最新的消息
- 但消息少的時候，由于鍵盤把整個 view 頂出屏幕，用戶看不到這頭幾條消息
- 當(dāng)消息沒有占滿整個屏幕的時候，鍵盤把 view 頂上去，view 底部會留下一段空白
結(jié)論：還是體驗不好
上述兩種情況的圖片我就不發(fā)了，大家自己腦補(bǔ)一下
那么作為強(qiáng)迫癥，怎么能容忍這種不好的體驗？于是開始死磕，首先參考了下日常使用最多的微信、qq，分情況總結(jié)了一下微信、qq里鍵盤彈出的效果
- 情況一：消息較少時（當(dāng)鍵盤彈出不會遮擋住消息）聊天界面不動，鍵盤彈出時只有輸入欄上滑，這樣保證了最開始的幾條消息能完整顯示
- 情況二：消息較多但還未占滿屏幕時（當(dāng)鍵盤彈出會遮擋住部分消息），鍵盤彈出時輸入欄上滑，同時聊天界面也上滑。注意：此時輸入欄上滑的距離為鍵盤高度，聊天界面上滑距離為鍵盤可能遮擋住消息的高度
- 情況三：消息占滿或超出屏幕時，鍵盤彈出時整個 view 上滑
- 這其中還包括了發(fā)送消息時，聊天界面上滑，保證最后一條消息顯示在鍵盤上方的處理。
如果大家不方便腦補(bǔ)，直接掏出手機(jī)，用微信或qq和女神聊個天吧
下面，我們放出代碼分析：
布局
首先導(dǎo)入 SnapKit 布局框架，對聊天界面和輸入欄進(jìn)行約束
由于我懶，怎么使用 Snapkit 就不贅述 😁
toolBarView.snp.makeConstraints { (make) in
make.left.equalTo(view.snp.left)
make.right.equalTo(view.snp.right)
make.height.equalTo(toolBarHeight)
make.bottom.equalTo(view.snp.bottom)
}
chatTableView.snp.makeConstraints { (make) in
make.left.equalTo(view.snp.left)
make.right.equalTo(view.snp.right)
make.bottom.equalTo(toolBarView.snp.top)
make.top.equalTo(view.snp.top).offset(64)
}
這里讓聊天界面的底部和輸入欄的上方貼合
監(jiān)聽
監(jiān)聽鍵盤的彈出和消失
NotificationCenter.default.addObserver(self, selector: #selector(keyBoardWillShow(notification:)), name: NSNotification.Name.UIKeyboardWillShow, object: nil) NotificationCenter.default.addObserver(self, selector: #selector(keyBoardWillHide(notification:)), name: NSNotification.Name.UIKeyboardWillHide, object: nil)
當(dāng)鍵盤彈出時，會觸發(fā) keyBoardWillShow(notification:) 方法，鍵盤消失時，會觸發(fā) keyBoardWillHide(notification:) 方法，我們很多復(fù)雜的邏輯，都要在這兩個方法中實現(xiàn)。另外，Swift 3.1 的版本中，把很多方法的 NS 前綴去除了，所以還在用 Swift 2.3 的童鞋，在NotificationCenter 前面加上 NS 前綴就可以了。
下面重頭戲來了，實現(xiàn)上述三種情況的效果
效果
彈出動畫
想要 view 隨著鍵盤彈出上滑，需要得到鍵盤的高度和鍵盤彈出動畫的時間，這里我們通過如下代碼得到：
func keyBoardWillShow(notification: Notification) {
let userInfo = notification.userInfo! as Dictionary
let value = userInfo[UIKeyboardFrameEndUserInfoKey] as! NSValue
let keyBoardRect = value.cgRectValue
// 得到鍵盤高度
let keyBoardHeight = keyBoardRect.size.height
mKeyBoardHeight = keyBoardHeight
// 得到鍵盤彈出所需時間
let duration = userInfo[UIKeyboardAnimationDurationUserInfoKey] as! NSNumber
mKeyBoardAnimateDuration = duration.doubleValue
...
}
然后實現(xiàn)動畫
之前在實現(xiàn)輸入欄隨著鍵盤彈出的時候，嘗試過兩種寫法：
1、更新 frame
var animate: (()->Void) = {
let newFrame = CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT - mKeyBoardHeight)
self.toolBarView.frame = newFrame
}
UIView.animate(withDuration: mKeyBoardAnimateDuration,
delay: 0, options: options, animations: animate)
2、更新約束
var animate: (()->Void) = {
self.toolBarView.snp.updateConstraints(closure: { (make) in
make.bottom.equalTo(self.view.snp_bottom).offset(-mKeyBoardHeight)
}
}
UIView.animate(withDuration: mKeyBoardAnimateDuration,
delay: 0, options: options, animations: animate)
但最后發(fā)現(xiàn)，由于滑動的速度不一樣，會造成鍵盤彈出和輸入欄上滑時出現(xiàn)縫隙。一句話，體驗不好。
于是去網(wǎng)上找了一種方法（必須要感謝下那位大哥），利用一個動畫的 options，和 view 的 transform 方法完美解決問題。讓 view 和鍵盤滑動時無縫貼合、如絲般順滑。
方法如下：
處理所需的動畫
var animate: (()->Void) = {
self.toolBarView.transform = CGAffineTransform(translationX: 0, y: -keyBoardHeight)
}
創(chuàng)建動畫 options
let options = UIViewAnimationOptions(rawValue: UInt((userInfo[UIKeyboardAnimationCurveUserInfoKey] as! NSNumber).intValue << 16))
實現(xiàn)動畫
UIView.animate(withDuration: mKeyBoardAnimateDuration, delay: 0, options: options, animations: animate)
如此這般，大功告成！親個嘴兒 😙
現(xiàn)在有了絲滑的滑動效果，我們來處理上述分析的三種情況
定義情況
首先定義效果枚舉類型，枚舉的好處就不贅述了
enum AnimateType {
case animate1 // 鍵盤彈出的話不會遮擋消息
case animate2 // 鍵盤彈出的話會遮擋消息，但最后一條消息距離輸入框有一段距離
case animate3 // 最后一條消息距離輸入框在小范圍內(nèi)，這里設(shè)為 30
}
枚舉類型對應(yīng)了上述分析的三種效果
讓我們回顧一下三種情況
- 情況一：消息較少時（當(dāng)鍵盤彈出不會遮擋住消息）聊天界面不動，鍵盤彈出時只有輸入欄上滑，這樣保證了最開始的幾條消息能完整顯示
- 情況二：消息較多但還未占滿屏幕時（當(dāng)鍵盤彈出會遮擋住部分消息），鍵盤彈出時輸入欄上滑，同時聊天界面也上滑。注意：此時輸入欄上滑的距離為鍵盤高度，聊天界面上滑距離為鍵盤可能遮擋住消息的高度
- 情況三：消息占滿或超出屏幕時，鍵盤彈出時整個 view 上滑
實現(xiàn)
當(dāng)消息數(shù)量為 0 時，默認(rèn)動畫為輸入框滑動
var animate: (()->Void) = {
self.toolBarView.transform = CGAffineTransform(translationX: 0, y: -keyBoardHeight)
}
當(dāng)消息數(shù)量不為 0 時，需要進(jìn)行計算判斷情況
首先得到最后一條消息在屏幕的位置，其中 cellDistance 就是最后一條消息相對于當(dāng)前屏幕的 y 值
let lastIndex = IndexPath(row: msgList.count - 1, section: 0) let rectCellView = chatTableView.rectForRow(at: lastIndex) let rect = chatTableView.convert(rectCellView, to: chatTableView.superview) let cellDistance = rect.origin.y + rect.height
限定兩個位置 distance1 和 distance2
distance1 代表彈出鍵盤后鍵盤頂部的位置相對于當(dāng)前屏幕的 y 值，對應(yīng)第一和第二種情況的判斷，distance2 代表未彈出鍵盤時輸入框頂部的位置當(dāng)對于當(dāng)前屏幕的 y 值。
let distance1 = SCREEN_HEIGHT - toolBarHeight - keyBoardHeight let distance2 = SCREEN_HEIGHT - toolBarHeight - 2 * fitBlank
計算出最后一條消息的位置和限定 distance1 的差值
這樣，當(dāng)處于第二種情況時，輸入框上滑距離為鍵盤高度，聊天界面上滑距離為計算出的差值，完美實現(xiàn)對應(yīng)效果
對應(yīng)代碼如下：
let difY = cellDistance - distance1
if cellDistance <= distance1 {
animate = {
self.toolBarView.transform = CGAffineTransform(translationX: 0, y: -keyBoardHeight)
}
animateType = .animate1
} else if distance1 < cellDistance && cellDistance <= distance2 {
animate = {
self.toolBarView.transform = CGAffineTransform(translationX: 0, y: -keyBoardHeight)
self.chatTableView.transform = CGAffineTransform(translationX: 0, y: -difY)
self.lastDifY = difY //這里記錄下最后一次滑動的dif值，以后有用
}
animateType = .animate2
} else {
animate = {
self.view.transform = CGAffineTransform(translationX: 0, y: -keyBoardHeight)
}
animateType = .animate3
}
以上代碼都發(fā)生在 keyBoardWillShow(notification: Notification) 中，每次判斷完動畫的情況后，記錄下動畫情況，然后當(dāng)鍵盤消失時，在 keyBoardWillHide(notification: Notification) 中還原
代碼如下：
// 返回 view 或 toolBarView 或 chatTableView 到原有狀態(tài)
switch animateType {
case .animate1:
animate = {
self.toolBarView.transform = CGAffineTransform.identity
self.chatTableView.transform = CGAffineTransform.identity
}
case .animate2:
animate = {
self.toolBarView.transform = CGAffineTransform.identity
self.chatTableView.transform = CGAffineTransform.identity
}
case .animate3:
animate = {
self.view.transform = CGAffineTransform.identity
}
}
如此這般，就實現(xiàn)了三種滑動的效果。但是別急，問題又來了。在情況一和情況二中，聊天界面上滑，怎么保證最后一條消息顯示在鍵盤上方呢？
這就需要我們在發(fā)送完消息后，刷新列表的方法中進(jìn)行處理，這里貼出整個刷新列表方法
實現(xiàn)思路為：
- 處于情況三時，由于之前約束了聊天界面在輸入欄上方，并且整個界面一起上滑，約束依舊成立，只需把聊天界面最后一條消息滾動到聊天界面底部
- 處于情況一和情況二時，如果聊天界面上滑的總距離（lastDifY + difY）小于鍵盤高度，則可以繼續(xù)上滑，上滑距離為新增消息的高度
- 一旦聊天界面上滑的總距離將要超過鍵盤高度，則上滑總距離設(shè)為鍵盤高度，如果聊天界面上滑的總距離超過鍵盤高度，界面上會出現(xiàn)多余的空白
- 一旦聊天界面上滑的總距離為鍵盤高度，則按照情況三處理
費(fèi)盡唇舌，可能還是說不清楚，所以上代碼吧😭：
// 刷新列表
func reloadTableView() {
chatTableView.reloadData()
chatTableView.layoutIfNeeded()
// 得到最后一條消息在view中的位置
let lastIndex = IndexPath(row: msgList.count - 1, section: 0)
let rectCellView = chatTableView.rectForRow(at: lastIndex)
let rect = chatTableView.convert(rectCellView, to: chatTableView.superview)
let cellDistance = rect.origin.y + rect.height
let distance1 = SCREEN_HEIGHT - toolBarHeight - mKeyBoardHeight
// 計算鍵盤可能遮住的消息的長度
let difY = cellDistance - distance1
if animateType == .animate3 {
// 處于情況三時，由于之前的約束（聊天界面在輸入欄上方），并且
// 是整個界面一起上滑，所以約束依舊成立，只需把聊天界面最后
// 一條消息滾動到聊天界面底部即可
scrollToBottom()
} else if (animateType == .animate1 || animateType == .animate2) && difY > 0{
// 在情況一和情況二中，如果聊天界面上滑的總距離小于鍵盤高度，則可以繼續(xù)上滑
// 一旦聊天界面上滑的總距離 lastDifY + difY 將要超過鍵盤高度，則上滑總距離設(shè)為鍵盤高度
// 此時執(zhí)行 trans 動畫
// 一旦聊天界面上滑總距離為鍵盤高度，則變?yōu)榍闆r三的情況，把聊天界面最后
// 一條消息滾動到聊天界面底部即可
if lastDifY + difY < mKeyBoardHeight {
lastDifY += difY
let animate: (()->Void) = {
self.chatTableView.transform = CGAffineTransform(translationX: 0, y: -self.lastDifY)
}
UIView.animate(withDuration: mKeyBoardAnimateDuration, delay: 0, options: animateOption, animations: animate)
} else if lastDifY + difY > mKeyBoardHeight {
if lastDifY != mKeyBoardHeight {
let animate: (()->Void) = {
self.chatTableView.transform = CGAffineTransform(translationX: 0, y: -self.mKeyBoardHeight)
}
UIView.animate(withDuration: mKeyBoardAnimateDuration, delay: 0, options: animateOption, animations: animate)
lastDifY = mKeyBoardHeight
}
scrollToBottom()
}
}
}
再貼一下滾動最后一條消息到聊天界面底部的代碼：
func scrollToBottom() {
if msgList.count > 0 {
chatTableView.scrollToRow(at: IndexPath(row: msgList.count - 1, section: 0), at: .bottom, animated: true)
}
}
至此，就真的大功告成了
最后，附上源碼地址：
github地址：https://github.com/Newbeeee/NbChatView-Swift
本地地址：http://xiazai.jb51.net/201704/yuanma/NbChatView-Swift-master(jb51.net).rar
總結(jié)
開局只是想簡單實現(xiàn)聊天效果，沒想到因為強(qiáng)迫癥和實現(xiàn)優(yōu)秀的體驗，在鍵盤效果上死磕了許久。前后共花了一天半時間，當(dāng)真是茶飯不思，夜不能寐。中間嘗試了無數(shù)滑動方法，在筆記本上畫圖模擬各種情況，最終做出來后，就像那啥之后，整個人瞬間疲軟了，迫不及待地睡了一覺，但內(nèi)心卻是無比激動。
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于swift中可選值?和!使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
判斷語句是我們?nèi)粘ｉ_發(fā)經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關(guān)于Swift條件判斷中逗號的使用方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
Swift開發(fā)之UITableView狀態(tài)切換效果
這篇文章主要介紹了Swift開發(fā)之UITableView狀態(tài)切換效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了OpenStack的Swift組件，對swift感興趣的同學(xué)，可以參考下2021-04-04
利用Swift實現(xiàn)各類的CATransition動畫詳解
CATransition動畫主要在過渡時使用，比如兩個頁面層級改變的時候添加一個轉(zhuǎn)場效果。CATransition分為兩類，一類是公開的動畫效果，一類是非公開的動畫效果。這篇文章主要給大家介紹了關(guān)于如何利用Swift實現(xiàn)各類CATransition動畫的相關(guān)資料，需要的朋友可以參考下。2017-09-09
Swift簡單快速的動態(tài)更換app圖標(biāo)AppIcon方法示例
這篇文章主要為大家介紹了Swift動態(tài)更換app圖標(biāo)AppIcon的簡單快速方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要給大家介紹了關(guān)于Swift中圖片資源使用流程的優(yōu)化方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
在這次IOS應(yīng)用開發(fā)教程中，我們打算實現(xiàn)手勢識別。正如你所知道的，IOS支持大量的手勢操作，它們能提供了很好的應(yīng)用控制和出色用戶體驗。2019-08-08
有很多地方會用到類型擦除，并且它們的作用的各不相同。下面這篇文章主要給大家介紹了關(guān)于Swift如何使用類型擦除及自定義的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了Swift實現(xiàn)復(fù)數(shù)計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01