美文网首页
iOS 键盘弹起视图吸顶逻辑

iOS 键盘弹起视图吸顶逻辑

作者: 某某香肠 | 来源:发表于2019-08-03 18:35 被阅读0次

之前做了个需求是有关评论框的,产品要求如果是正常回复的时候,内容不能被遮挡,如果是回复了某人的评论,那条评论要在评论框的上方(也就是吸顶)。搞完这个需求之后总结一下相关的经验。主要思路是在键盘弹起和收回的情况下调整scrollView的offset,demo地址在:这里 最终效果如下:

前置知识

由于scrollViewUIViewControllew里通常都是开启adjustInsets的,因此,本文会将scrollviewcontentInset也考虑进去,粗略地画了它们之间的关系图如下

如上图:

  • 红色的框是scrollView,绿色的是contentView,是可以滚动的区域,其高度可能会小于scrollViewscrollView子view的frame都是相对于contentView的左上角的
  • offsetYscrollView的滚动偏移量,是scrollView顶点(左上角)相对于contentView(左上角)的偏移位置
  • contentInsetcontentView初始位置的(左上角)对于scrollView(左上角)的偏移位置

很显然,如果设置了contentInset的top属性,offsetY默认就是-contentInset.top,这在adjustInsets是普遍存在的。

PS:在后面在写这个demo的时候发现,如果在storyboard给scrollView设置约束,则不会出现contentInset的情况,这是在因为storyboard中给scrollViewtopConstraint设置约束时,默认约束的对象是viewControllertopLayoutGuide(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了。不过为了还原当时的情况,还是将其改成scrollViewtopviewtop之间的约束。

记录吸顶视图底部的偏移量

既然是要吸顶,自然是需要知道要吸顶的那个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)

键盘隐藏逻辑

在键盘弹起的时候,我们有可能将scrollViewoffset设置得过大导致滚动超出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也跟着顶上去的逻辑了,如果想在这让键盘隐藏的时候输入框跟着下来,也可以做到(可以根据需求适当加变量区分这次弹起是点击视图还是点击输入框触发的),这里就不在赘述了。

参考文献

[iOS]contentOffset与contentInset的相互影响

IOS键盘遮挡问题

相关文章

网友评论

      本文标题:iOS 键盘弹起视图吸顶逻辑

      本文链接:https://www.haomeiwen.com/subject/jlcsdctx.html