iOS 键盘弹起视图吸顶逻辑

之前做了个需求是有关评论框的,产品要求如果是正常回复的时候,内容不能被遮挡,如果是回复了某人的评论,那条评论要在评论框的上方(也就是吸顶)。搞完这个需求之后总结一下相关的经验。主要思路是在键盘弹起和收回的情况下调整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键盘遮挡问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容