之前做了个需求是有关评论框的,产品要求如果是正常回复的时候,内容不能被遮挡,如果是回复了某人的评论,那条评论要在评论框的上方(也就是吸顶)。搞完这个需求之后总结一下相关的经验。主要思路是在键盘弹起和收回的情况下调整scrollView的offset,demo地址在:这里 最终效果如下:
前置知识
由于scrollView
在UIViewControllew
里通常都是开启adjustInsets
的,因此,本文会将scrollview
的contentInset
也考虑进去,粗略地画了它们之间的关系图如下
如上图:
- 红色的框是
scrollView
,绿色的是contentView
,是可以滚动的区域,其高度可能会小于scrollView
,scrollView
子view的frame
都是相对于contentView
的左上角的 -
offsetY
是scrollView
的滚动偏移量,是scrollView
顶点(左上角)相对于contentView
(左上角)的偏移位置 -
contentInset
是contentView
初始位置的(左上角)对于scrollView
(左上角)的偏移位置
很显然,如果设置了contentInset
的top属性,offsetY
默认就是-contentInset.top
,这在adjustInsets
是普遍存在的。
PS:在后面在写这个demo的时候发现,如果在storyboard给scrollView
设置约束,则不会出现contentInset
的情况,这是在因为storyboard中给scrollView
的topConstraint
设置约束时,默认约束的对象是viewController
的topLayoutGuide
(iOS 11 以后是safeArea.top
)。这换成mansory
的代码就是
if(@available(iOS 11.0,*)) {
make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop);
} else {
make.top.equalTo(self.mas_topLayoutGuideBottom);
}
这样设置scrollView
就不会有contentInset
了。不过为了还原当时的情况,还是将其改成scrollView
的top
和view
的top
之间的约束。
记录吸顶视图底部的偏移量
既然是要吸顶,自然是需要知道要吸顶的那个view
对于scrollView
的偏移量y,对本文而言就是,就是当前的点击的cell:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: true)
let cell = tableView .cellForRow(at: indexPath)
self.targetViewBottom = cell!.frame.origin.y + cell!.frame.size.height
self.commentInputView.becomeFirstResponder()
}
这个targetViewBottom
记录的就是cell
底部相对于contentView
的偏移量。
然后,我们就可以在键盘出现的时候利用这个值设置contentOffset,并在键盘消失的时候将其设置回CGFloat.leastNormalMagnitude
,这是个标志位,代表没有吸顶的view。
键盘弹起逻辑
我们一般监听keyBoardWillShow
这个通知,在键盘弹起时,我们可以拿到键盘的高度,动画持续时长,动画选项等等参数,对本文有用的主要还是键盘的高度。
如图所示,在键盘弹起的时候,我们要调整offset将targerView
移动到输入框的上方。下面来计算一下这个offset:
首先,这个contentView
是被顶上去了(一般情况下产品是要求不能下来的),这里先说顶上取的情况,根据这个图不难得出:
offset = (targetViewBottom + inputViewHeight + heyboardHeight - inputViewHeight - safeAreBottom) - scrollViewHeight
中间的inputViewHeight
可以约掉,于是:
offset = targetViewBottom + heyboardHeight - safeAreBottom - scrollViewHeight
需要注意的是,在targetViewBottom
特别小的情况下,这个offset
是可能小于初始状态的offset
的,这个时候这个内容都会被吸下来,这样体验不太好,这个也好办,只需让这个offset
不能小于初始位置的offset
就行了,伪代码大概如下,在ios11中contentInset
可能要换成adjustContentInset
:
offset = max(targetViewBottom + heyboardHeight - safeAreBottom - scrollViewHeight,-scrollView,contentInset.top)
键盘隐藏逻辑
在键盘弹起的时候,我们有可能将scrollView
的offset
设置得过大导致滚动超出contentSize的范围,出现这种情况是,我们需要再隐藏键盘的时候将offset
设置成实际滚动的最大值:
在contentSize
的高度足够大的时候,不难得出offset
的最大值是
offset = self.scrollView.contentSize.height - scrollViewHeight
但在contentSize
比较小的时候,这么算出来的offset
是可能小于初始状态的offset
的,因此实际offset
的滚动最大值应该是
offset = max(self.scrollView.contentSize.height - scrollViewHeight,-scrollView,contentInset.top)
这个还是offset
的实际最大值,如果键盘隐藏前的offset
大于这个值,则将offset设置回这个值,否则则不作处理:
offset = min(max(self.scrollView.contentSize.height - scrollViewHeight,-scrollView,contentInset.top),scrollView.contentOffset.y)
这样,我们就算出隐藏键盘的时候的scrollView的偏移量了。
点击输入框的逻辑
刚才只是讲述了吸顶指定视图的逻辑,但是如果用户只是点击输入框,就没有指定视图了,这个时候并不需要吸顶,但是,键盘还是不能遮挡当前显示的视图的,因此还是要调整offset
,demo的实现效果是输入框和内容同步上移的,实现思路就是让targetViewBottom
等于一个位置,使得输入框向这个位置吸顶。
事件触发时机
在直接点击输入框的时候,我们没有给targetViewBottom
赋值,所以在触发键盘弹出的时候我们可以通过这个targetViewBottom
是否为CGFloat.leastNormalMagnitude
做判断,但是由于keyboardViewShow
这个方法可能会调用多次(比如搜狗键盘),在这里赋值不太合适,因此我们需要在换个时机给targetViewBottom
赋值。本文选的是func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool
,也就是判断输入框是否响应的时候作判断。
PS:本文一开始选择的时机是func textFieldDidBeginEditing(_ textField: UITextField)
,也就是在输入框在编辑的时候作判断,但是后来发现在ios10或之前的系统中,它比keyboardWillShow这个通知晚调用,为了解决这个bug,只能将时机移到更早的时候
targetViewBottom计算
targetViewBottom
总共分上面两种情况,在左图中,不难得出
targetViewBottom = offsetY + scrollViewHeight
右图中
targetViewBottom = scrollView.contentSize.height
实际上我们不需要判断这是哪一种情况,只需取个最小值就行了
targetViewBottom = min(offsetY + scrollViewHeight,scrollView.contentSize.height)
这样,就能实现点击输入框的时候scrollView也跟着顶上去的逻辑了,如果想在这让键盘隐藏的时候输入框跟着下来,也可以做到(可以根据需求适当加变量区分这次弹起是点击视图还是点击输入框触发的),这里就不在赘述了。