前言
最近寫的 Swift 項(xiàng)目里要實(shí)現(xiàn)一個(gè)聊天界面，在處理鍵盤彈出的時(shí)候遇到了一點(diǎn)麻煩。
麻煩就在于鍵盤彈出后如何處理屏幕和鍵盤的關(guān)系
經(jīng)過一番死磕，終于做出了想要的效果，效果如下：
注：原本項(xiàng)目是 Swift 2.3 寫的，為了寫這篇博客，用 Swift 3.1 重新實(shí)現(xiàn)了一遍。
感受：方法名真的縮短了不少，😁
分析
現(xiàn)在開始，就讓我來分析一下這次死磕歷程。
一開始想到了兩種處理方法，一種是 鍵盤彈出消失的同時(shí)，輸入欄隨著鍵盤移動，一種是 鍵盤彈出消失時(shí)，整個(gè)屏幕隨著鍵盤移動，這兩種方法都有弊端，讓我們分類討論下：
1. 輸入欄隨著鍵盤移動
- 當(dāng)消息條數(shù)較少時(shí)，鍵盤不會遮擋住消息
- 消息條數(shù)多了以后，鍵盤會遮擋住屏幕中處在鍵盤位置的消息
- 每次發(fā)送了新的消息，用戶無法及時(shí)看到（因?yàn)楸绘I盤遮住了）
結(jié)論：體驗(yàn)不好
2. 屏幕隨著鍵盤移動
- 消息多了以后，能在屏幕上及時(shí)看到最新的消息
- 但消息少的時(shí)候，由于鍵盤把整個(gè) view 頂出屏幕，用戶看不到這頭幾條消息
- 當(dāng)消息沒有占滿整個(gè)屏幕的時(shí)候，鍵盤把 view 頂上去，view 底部會留下一段空白
結(jié)論：還是體驗(yàn)不好
上述兩種情況的圖片我就不發(fā)了，大家自己腦補(bǔ)一下
那么作為強(qiáng)迫癥，怎么能容忍這種不好的體驗(yàn)？于是開始死磕，首先參考了下日常使用最多的微信、qq，分情況總結(jié)了一下微信、qq里鍵盤彈出的效果
- 情況一：消息較少時(shí)（當(dāng)鍵盤彈出不會遮擋住消息）聊天界面不動，鍵盤彈出時(shí)只有輸入欄上滑，這樣保證了最開始的幾條消息能完整顯示
- 情況二：消息較多但還未占滿屏幕時(shí)（當(dāng)鍵盤彈出會遮擋住部分消息），鍵盤彈出時(shí)輸入欄上滑，同時(shí)聊天界面也上滑。注意：此時(shí)輸入欄上滑的距離為鍵盤高度，聊天界面上滑距離為鍵盤可能遮擋住消息的高度
- 情況三：消息占滿或超出屏幕時(shí)，鍵盤彈出時(shí)整個(gè) view 上滑
- 這其中還包括了發(fā)送消息時(shí)，聊天界面上滑，保證最后一條消息顯示在鍵盤上方的處理。
如果大家不方便腦補(bǔ)，直接掏出手機(jī)，用微信或qq和女神聊個(gè)天吧
下面，我們放出代碼分析：
布局
首先導(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)鍵盤彈出時(shí)，會觸發(fā) keyBoardWillShow(notification:) 方法，鍵盤消失時(shí)，會觸發(fā) keyBoardWillHide(notification:) 方法，我們很多復(fù)雜的邏輯，都要在這兩個(gè)方法中實(shí)現(xiàn)。另外，Swift 3.1 的版本中，把很多方法的 NS 前綴去除了，所以還在用 Swift 2.3 的童鞋，在NotificationCenter 前面加上 NS 前綴就可以了。
下面重頭戲來了，實(shí)現(xiàn)上述三種情況的效果
效果
彈出動畫
想要 view 隨著鍵盤彈出上滑，需要得到鍵盤的高度和鍵盤彈出動畫的時(shí)間，這里我們通過如下代碼得到：
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
// 得到鍵盤彈出所需時(shí)間
let duration = userInfo[UIKeyboardAnimationDurationUserInfoKey] as! NSNumber
mKeyBoardAnimateDuration = duration.doubleValue
...
}然后實(shí)現(xiàn)動畫
之前在實(shí)現(xiàn)輸入欄隨著鍵盤彈出的時(shí)候，嘗試過兩種寫法：
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)，由于滑動的速度不一樣，會造成鍵盤彈出和輸入欄上滑時(shí)出現(xiàn)縫隙。一句話，體驗(yàn)不好。
于是去網(wǎng)上找了一種方法（必須要感謝下那位大哥），利用一個(gè)動畫的 options，和 view 的 transform 方法完美解決問題。讓 view 和鍵盤滑動時(shí)無縫貼合、如絲般順滑。
方法如下：
處理所需的動畫
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))實(shí)現(xiàn)動畫
UIView.animate(withDuration: mKeyBoardAnimateDuration,
delay: 0, options: options, animations: animate)如此這般，大功告成！親個(gè)嘴兒 😙
現(xiàn)在有了絲滑的滑動效果，我們來處理上述分析的三種情況
定義情況
首先定義效果枚舉類型，枚舉的好處就不贅述了
enum AnimateType {
case animate1 // 鍵盤彈出的話不會遮擋消息
case animate2 // 鍵盤彈出的話會遮擋消息，但最后一條消息距離輸入框有一段距離
case animate3 // 最后一條消息距離輸入框在小范圍內(nèi)，這里設(shè)為 30
}枚舉類型對應(yīng)了上述分析的三種效果
讓我們回顧一下三種情況
- 情況一：消息較少時(shí)（當(dāng)鍵盤彈出不會遮擋住消息）聊天界面不動，鍵盤彈出時(shí)只有輸入欄上滑，這樣保證了最開始的幾條消息能完整顯示
- 情況二：消息較多但還未占滿屏幕時(shí)（當(dāng)鍵盤彈出會遮擋住部分消息），鍵盤彈出時(shí)輸入欄上滑，同時(shí)聊天界面也上滑。注意：此時(shí)輸入欄上滑的距離為鍵盤高度，聊天界面上滑距離為鍵盤可能遮擋住消息的高度
- 情況三：消息占滿或超出屏幕時(shí)，鍵盤彈出時(shí)整個(gè) view 上滑
實(shí)現(xiàn)
當(dāng)消息數(shù)量為 0 時(shí)，默認(rèn)動畫為輸入框滑動
var animate: (()->Void) = {
self.toolBarView.transform = CGAffineTransform(translationX: 0, y: -keyBoardHeight)
}當(dāng)消息數(shù)量不為 0 時(shí)，需要進(jìn)行計(jì)算判斷情況
首先得到最后一條消息在屏幕的位置，其中 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限定兩個(gè)位置 distance1 和 distance2
distance1 代表彈出鍵盤后鍵盤頂部的位置相對于當(dāng)前屏幕的 y 值，對應(yīng)第一和第二種情況的判斷，distance2 代表未彈出鍵盤時(shí)輸入框頂部的位置當(dāng)對于當(dāng)前屏幕的 y 值。
let distance1 = SCREEN_HEIGHT - toolBarHeight - keyBoardHeight
let distance2 = SCREEN_HEIGHT - toolBarHeight - 2 * fitBlank計(jì)算出最后一條消息的位置和限定 distance1 的差值
這樣，當(dāng)處于第二種情況時(shí)，輸入框上滑距離為鍵盤高度，聊天界面上滑距離為計(jì)算出的差值，完美實(shí)現(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)鍵盤消失時(shí)，在 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
}
}如此這般，就實(shí)現(xiàn)了三種滑動的效果。但是別急，問題又來了。在情況一和情況二中，聊天界面上滑，怎么保證最后一條消息顯示在鍵盤上方呢？
這就需要我們在發(fā)送完消息后，刷新列表的方法中進(jìn)行處理，這里貼出整個(gè)刷新列表方法
實(shí)現(xiàn)思路為：
- 處于情況三時(shí)，由于之前約束了聊天界面在輸入欄上方，并且整個(gè)界面一起上滑，約束依舊成立，只需把聊天界面最后一條消息滾動到聊天界面底部
- 處于情況一和情況二時(shí)，如果聊天界面上滑的總距離（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
// 計(jì)算鍵盤可能遮住的消息的長度
let difY = cellDistance - distance1
if animateType == .animate3 {
// 處于情況三時(shí)，由于之前的約束（聊天界面在輸入欄上方），并且
// 是整個(gè)界面一起上滑，所以約束依舊成立，只需把聊天界面最后
// 一條消息滾動到聊天界面底部即可
scrollToBottom()
} else if (animateType == .animate1 || animateType == .animate2) && difY > 0{
// 在情況一和情況二中，如果聊天界面上滑的總距離小于鍵盤高度，則可以繼續(xù)上滑
// 一旦聊天界面上滑的總距離 lastDifY + difY 將要超過鍵盤高度，則上滑總距離設(shè)為鍵盤高度
// 此時(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é)
開局只是想簡單實(shí)現(xiàn)聊天效果，沒想到因?yàn)閺?qiáng)迫癥和實(shí)現(xiàn)優(yōu)秀的體驗(yàn)，在鍵盤效果上死磕了許久。前后共花了一天半時(shí)間，當(dāng)真是茶飯不思，夜不能寐。中間嘗試了無數(shù)滑動方法，在筆記本上畫圖模擬各種情況，最終做出來后，就像那啥之后，整個(gè)人瞬間疲軟了，迫不及待地睡了一覺，但內(nèi)心卻是無比激動。
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對html5模板網(wǎng)的支持。