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

前言

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

实现方案

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

具体实现分以下几步:

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


图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所示

图2

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

图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
 }
}

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

总结

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

(0)

相关推荐

  • IOS TextFiled与TextView 键盘的收起以及处理键盘遮挡

    IOS TextFiled与TextView 键盘的收起以及处理键盘遮挡 在iOS开发中,UITextFiled和UITextView是很常见的两个控件,当我们设置好这两个控件后,点击文字输入区域,系统会自动弹出键盘,但是如何收起键盘.点击哪里收起键盘,以及在iPhone4中键盘弹出后遮挡输入框怎么办呢? 这篇文章将带领大家解决: 1>点击其他空白区域收起键盘 2>点击键盘右下角的键收起键盘 3>处理键盘遮挡问题 一,点击其他空白区域收起键盘 - (void)viewDidLoad {

  • 解决移动端 ios 系统键盘遮挡的问题

    亲测 ios 9 ,ios10 系统有效,其他请自行测试,建议通过判断系统类型来动态引入此脚本 var isIPHONE = navigator.userAgent.toUpperCase().indexOf("IPHONE")!= -1; if(isIPHONE){ // 元素失去焦点隐藏iphone的软键盘 function objBlur(obj,time){ var startTime=0,endTime=0, time = !time?30:time, docTouchend

  • iOS项目开发键盘弹出遮挡输入框问题解决方案

    在iOS或Android等移动端开发过程中,经常遇到很多需要我们输入信息的情况,例如登录时要输入账号密码.查询时要输入查询信息.注册或申请时需要填写一些信息等都是通过我们键盘来进行输入的,在iOS开发过程中,一般用于进行输入信息的有两类:UITextField和UITextView,前者是单行输入文本框,后者是可滑动的多行输入文本框,在这整个开发过程中,我们需要控制键盘的弹出和收起.在输入结束的时候获取输入的信息,此外,我们还需要保证在键盘弹起的时候不遮挡我们输入的文本框.今天,我们就主要来说一

  • iOS 防键盘遮挡的实例

    当我们在UITextField输入数据时经常弹出键盘遮挡界面,解决方法是:在弹出键盘时将整个UIVIew向上移动,在键盘消失时,UIVIew还原. 实例代码如下: @interface ViewController ()<UITextFieldDelegate> @property(nonatomic,strong)UITextField* tf; @end @implementation ViewController - (void)viewDidLoad { [super viewDidL

  • IOS NSNotification 键盘遮挡问题的解决办法

    IOS NSNotification 键盘遮挡问题的解决办法 从键盘通知中获得键盘尺寸 键盘尺寸存在于NSNotification中. 1:在AddDrinkViewController中添加keyboardDidShow和keyboardDidHide方法 2:在viewWillAppear中注册UIKeyboardDidshowNotification与UIKeyboardDidHideNotification. 3:在viewWillDisappear中取消对所有事件的订阅注册 4:在Ad

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

    前言 近期参与了一个招聘类app的开发,注册流程比较多,基本都是cell带输入框的表单列表样式,避免不了的就会遇到键盘遮挡问题.相信大家也一定遇到过类似的问题,今天在这里就给大家分享一下,这个问题的解决思路. 实现方案 我们先来分析一下这个需求,首先,这个表单是一个列表list(UITableView或者UICollectionView),如图1所示,当用户点击输入框1.2.3.4.5的时候,弹出键盘但不会被遮挡,这种情况,不用做处理,当用户点击输入框6.7.8,弹出键盘会遮挡输入框,想要让输入

  • Yii中表单用法实例详解

    本文实例讲述了Yii中表单用法.分享给大家供大家参考,具体如下: 在 Yii 中处理表单时,通常需要以下步骤: 1. 创建用于表现所要收集数据字段的模型类. 2. 创建一个控制器动作,响应表单提交. 3. 在视图脚本中创建与控制器动作相关的表单. 一.创建模型 在编写表单所需的 HTML 代码之前,我们应该先确定来自最终用户输入的数据的类型,以及这些数据应符合什么样的规则.模型类可用于记录这些信息.正如模型章节所定义的,模型是保存用户输入和验证这些输入的中心位置. 取决于使用用户所输入数据的方式

  • 详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)

    本文介绍了React-Native键盘遮挡问题,分享给大家 在开发中经常遇到需要输入的地方,RN给我们提过的TextInput虽然好用,可惜并没有处理遮挡问题. 很多时候键盘弹出来都会遮挡住编辑框,让人很头疼. 本来想在js.coach 库里面找一找第三方的插件,看到最好的一个就是React-native-keyboard-spacer了,然而我们还差一个东西,那就是获取键盘的高度. 这个我也查了半天并没有提供,获取没找到吧.于是只好自己写原生模块去获取键盘的高度了. 关于原生iOS获取键盘高度

  • Bootstrap中表单控件状态(验证状态)

    在制作表单时,难免要做表单验证.同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果. 1..has-warning:警告状态(黄色) 2..has-error:错误状态(红色) 3..has-success:成功状态(绿色) 使用的时候只需要在form-group容器上对应添加状态类名. <form role="form"> <div class="form-group has-success"> <label c

  • Android软键盘遮挡的四种完美解决方案

    一.问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决? 二.简单解决方案 方法一 在你的activity中的oncreate中setContentView之前写上这个代码 getWindow().setSoftInputMode(WindowManage

  • js解决软键盘遮挡输入框的问题分享

    经验须知 弹出软键盘时: ios端$('body').scrollTop()会改变 android端$(window).height()会改变 拉起键盘不是一瞬间,而是有一个缓动过程 问题重现 ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图: 问题解决 我们只需要在输入框聚焦之后,开启一个定时器,执行$('body').scrollTop(1000000),这样由于整个body滚动到了最下面,输入框自然就看见了,具体请查看以下示例 示例源码

随机推荐