iOS中表单列表样式键盘遮挡的解决方案

前言

近期参与了一个招聘类app的开发,注册流程比较多,基本都是cell带输入框的表单列表样式,避免不了的就会遇到键盘遮挡问题。相信大家也一定遇到过类似的问题,今天在这里就给大家分享一下,这个问题的解决思路。

实现方案

我们先来分析一下这个需求,首先,这个表单是一个列表list(UITableView或者UICollectionView),如图1所示,当用户点击输入框1、2、3、4、5的时候,弹出键盘但不会被遮挡,这种情况,不用做处理,当用户点击输入框6、7、8,弹出键盘会遮挡输入框,想要让输入框显示出来,我们有两个办法,第一可以向上修改整个列表view的frame的y值,第二可以修改列表的contentoffset的y值,都可以达到效果,下边我们选择第二种方式来实现我们的需求。

具体实现分以下几步:

  • 监听键盘弹起和收起事件
  • 计算键盘高度
  • 计算contentoffset的y值要改变的差值并修改contentoffset的值
  • 滑动列表时收起键盘
  • 键盘收起时还原contentoffset的值

iOS中表单列表样式键盘遮挡的解决方案


图1

下面一起来通过代码实现这个5步

第一步__设置监听

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardAction:) name:UIKeyboardWillShowNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardAction:) name:UIKeyboardWillHideNotification object:nil];

第二步__计算高度

// 键盘监听事件
- (void)keyboardAction:(NSNotification*)sender{
 NSDictionary *useInfo = [sender userInfo];
 NSValue *value = [useInfo objectForKey:UIKeyboardFrameEndUserInfoKey];
 //键盘高度
 CGFloat height = [value CGRectValue].size.height;
 if ([sender.name isEqualToString:UIKeyboardWillShowNotification]) {
   //键盘弹起时
 } else {
   //键盘收起时
 }
}

第三步__计算contentoffset的y值要改变的差值并修改contentoffset的值

我们以点击第7个输入框为例,当点击第7个输入框的时候,我们想要的效果是让第7个输入框跑到键盘上边,如图2所示

iOS中表单列表样式键盘遮挡的解决方案

图2

那么这里我们就要计算一下需要向上移动的距离delta=3-(2-1),2是list的高度,1是键盘的高度,3是第7个输入框所在cell的maxY值-当前list的contentoffset的y值,如图3,

iOS中表单列表样式键盘遮挡的解决方案

图3

1和2我们很好获得,重点是获取3的值,我们只要获取到第7个输入框所在cell的实例,然后通过CGRectGetMaxY(cell.frame)即可获得此值。下边是获取到cell实例的代码

- (UICollectionViewCell *)firstResponderCell {
 __block UICollectionViewCell *cell = nil;
 [self.collectionView.visibleCells enumerateObjectsUsingBlock:^(__kindof UICollectionViewCell * _Nonnull obj,NSUInteger idx,BOOL * _Nonnull stop) {
  UICollectionViewCell *visibleCell = obj;
  //焦点所在的textField
  if (visibleCell.textField.isFirstResponder) {
   cell = visibleCell;
  }
 }];
 return cell;
}

计算差值改变contentoffset

// 键盘监听事件
- (void)keyboardAction:(NSNotification*)sender{
 NSDictionary *useInfo = [sender userInfo];
 NSValue *value = [useInfo objectForKey:UIKeyboardFrameEndUserInfoKey];
 //键盘高度
 CGFloat keyboardHeight = [value CGRectValue].size.height;
 //列表的高度
 CGFloat collectionViewHeight = self.collectionView.frame.size.height;
 if ([sender.name isEqualToString:UIKeyboardWillShowNotification]) {
  //键盘弹出时
  //获取输入框焦点所在的cell
  UICollectionViewCell *cell = [self firstResponderCell];
  if (cell) {
   //cell的maxY值
   CGFloat cellMaxY = CGRectGetMaxY(cell.frame)- self.collectionView.contentOffset.y;
   //差值 = 3 -(2-1)
   if (cellMaxY > collectionViewHeight-keyboardHeight) {
    //记录delta值,键盘收起恢复原来位置时使用
    self.delta = cellMaxY-(collectionViewHeight-keyboardHeight);
    self.collectionView.contentOffset = CGPointMake(0,self.collectionView.contentOffset.y+self.delta);
   }
  }
 } else {
   //键盘收起时
 }

}

第四步__滑动列表时收起键盘

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
 UICollectionViewCell *cell = [self firstResponderCell];
 if (cell) {
  [cell.textField resignFirstResponder];
 }
}

第五步__键盘收起时还原contentoffset的值

// 键盘监听事件
- (void)keyboardAction:(NSNotification*)sender{
 NSDictionary *useInfo = [sender userInfo];
 NSValue *value = [useInfo objectForKey:UIKeyboardFrameEndUserInfoKey];
 //键盘高度
 CGFloat keyboardHeight = [value CGRectValue].size.height;
 //列表的高度
 CGFloat collectionViewHeight = self.collectionView.frame.size.height;
 if ([sender.name isEqualToString:UIKeyboardWillShowNotification]) {
  //键盘出现时
 } else {
  //键盘收起时
  //根据self.delta复原
  self.collectionView.contentOffset = CGPointMake(0,self.collectionView.contentOffset.y-self.delta);
  self.delta = 0
 }
}

实现完毕,怎么样,是不是很简单~~~~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


当我们远离最新的 iOS 16 更新版本时,我们听到了困扰 Apple 最新软件的错误和性能问题。
欧版/美版 特别说一下,美版选错了 可能会永久丧失4G,不过只有5%的概率会遇到选择运营商界面且部分必须连接到iTunes才可以激活
一般在接外包的时候, 通常第三方需要安装你的app进行测试(这时候你的app肯定是还没传到app store之前)。
前言为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了。那么接下来我们看一下Flutter是如何实现的。Flutter中实现整个App变为灰色在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下:ColorFiltered(颜色过滤器)看名字就知道是增加颜色滤镜效果的,ColorFiltered( colorFilter:ColorFilter.mode(Colors.grey, BlendMode.
flutter升级/版本切换
(1)在C++11标准时,open函数的文件路径可以传char指针也可以传string指针,而在C++98标准,open函数的文件路径只能传char指针;(2)open函数的第二个参数是打开文件的模式,从函数定义可以看出,如果调用open函数时省略mode模式参数,则默认按照可读可写(ios_base:in | ios_base::out)的方式打开;(3)打开文件时的mode的模式是从内存的角度来定义的,比如:in表示可读,就是从文件读数据往内存读写;out表示可写,就是把内存数据写到文件中;
文章目录方法一:分别将图片和文字置灰UIImage转成灰度图UIColor转成灰度颜色方法二:给App整体添加灰色滤镜参考App页面置灰,本质是将彩色图像转换为灰度图像,本文提供两种方法实现,一种是App整体置灰,一种是单个页面置灰,可结合具体的业务场景使用。方法一:分别将图片和文字置灰一般情况下,App页面的颜色深度是24bit,也就是RGB各8bit;如果算上Alpha通道的话就是32bit,RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit,这8bit表示的颜色不是彩色,而是256
领导让调研下黑(灰)白化实现方案,自己调研了两天,根据网上资料,做下记录只是学习过程中的记录,还是写作者牛逼
让学前端不再害怕英语单词(二),通过本文,可以对css,js和es6的单词进行了在逻辑上和联想上的记忆,让初学者更快的上手前端代码
用Python送你一颗跳动的爱心
在uni-app项目中实现人脸识别,既使用uni-app中的live-pusher开启摄像头,创建直播推流。通过快照截取和压缩图片,以base64格式发往后端。
商户APP调用微信提供的SDK调用微信支付模块,商户APP会跳转到微信中完成支付,支付完后跳回到商户APP内,最后展示支付结果。CSDN前端领域优质创作者,资深前端开发工程师,专注前端开发,在CSDN总结工作中遇到的问题或者问题解决方法以及对新技术的分享,欢迎咨询交流,共同学习。),验证通过打开选择支付方式弹窗页面,选择微信支付或者支付宝支付;4.可取消支付,放弃支付会返回会员页面,页面提示支付取消;2.判断支付方式,如果是1,则是微信支付方式。1.判断是否在微信内支付,需要在微信外支付。
Mac命令行修改ipa并重新签名打包
首先在 iOS 设备中打开开发者模式。位于:设置 - 隐私&安全 - 开发者模式(需重启)
一 现象导入MBProgressHUD显示信息时,出现如下异常现象Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MBProgressHUD", referenced from: objc-class-ref in ViewController.old: symbol(s) not found for architecture x86_64clang: error: linker command failed wit
Profiles >> 加号添加 >> Distribution >> "App Store" >> 选择 2.1 创建的App ID >> 选择绑定 2.3 的发布证书(.cer)>> 输入描述文件名称 >> Generate 生成描述文件 >> Download。Certificates >> 加号添加 >> "App Store and Ad Hoc" >> “Choose File...” >> 选择上一步生成的证书请求文件 >> Continue >> Download。
今天有需求,要实现的功能大致如下:在安卓和ios端实现分享功能可以分享链接,图片,文字,视频,文件,等欢迎大佬多多来给萌新指正,欢迎大家来共同探讨。如果各位看官觉得文章有点点帮助,跪求各位给点个“一键三连”,谢啦~声明:本博文章若非特殊注明皆为原创原文链接。