【转】swift实现ios类似微信输入框跟随键盘弹出的效果

swift实现ios类似微信输入框跟随键盘弹出的效果

为什么要做这个效果

在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实现的呢,也许你会说直接在键盘弹出的时候把输入框也向上移动不就行了?但是我使用这种方法的时候,发现效果十分不理想,会有明显的滞后现象,原因有以下几点:

  1. 键盘弹出动画并不是匀速,键盘和输入框的时间曲线不完全一致,运动不同步
  2. 各种键盘的高度不一样(比如搜狗输入法就比系统自带键盘要高)
  3. 无法确定键盘动画的时间,会导致延迟

解决方案

使用本地通知,对键盘的状态(弹出、收回)进行监控,当键盘状态发生改变时,在相应的方法中对输入框的位置进行操作。

这里应用了两种在ios编程中很重要的思想:Key-value coding (KVC) 和 key-value observing (KVO)

1.使用NSNotificationCenter.defaultCenter().addObserver()添加对UIKeyboardWillShowNotification和UIKeyboardWillHideNotification键的监控,当这些值发生改变时发送通知

NSNotificationCenter.defaultCenter().addObserver(self, selector:"keyBoardWillShow:", name:UIKeyboardWillShowNotification, object: nil)
NSNotificationCenter.defaultCenter().addObserver(self, selector:"keyBoardWillHide:", name:UIKeyboardWillHideNotification, object: nil)

2.实现两个监控方法

实现键盘弹出的方法:

func keyBoardWillShow(note:NSNotification)
{

    //1
    let userInfo  = note.userInfo as! NSDictionary
    //2
    var  keyBoardBounds = (userInfo[UIKeyboardFrameEndUserInfoKey] as! NSValue).CGRectValue()
    let duration = (userInfo[UIKeyboardAnimationDurationUserInfoKey] as! NSNumber).doubleValue
    //3
    var keyBoardBoundsRect = self.view.convertRect(keyBoardBounds, toView:nil)
    //4
    var keyBaoardViewFrame = keyBaordView.frame
    var deltaY = keyBoardBounds.size.height
    //5
    let animations:(() -> Void) = {

        self.keyBaordView.transform = CGAffineTransformMakeTranslation(0,-deltaY)

    if duration > 0 {
        let options = UIViewAnimationOptions(UInt((userInfo[UIKeyboardAnimationCurveUserInfoKey] as! NSNumber).integerValue << 16))

        UIView.animateWithDuration(duration, delay: 0, options:options, animations: animations, completion: nil)

    }else{

        animations()
    }

}

代码分析

//1

let userInfo  = note.userInfo as! NSDictionary

将通知的用户信息取出,转化为字典类型,里面所存的就是我们所需的信息:键盘动画的时长、时间曲线;键盘的位置、高度信息。有了这些信息我们就可以do some magic了~
//2
通过对应的键UIKeyboardFrameEndUserInfoKey,取出键盘位置信息
通过UIKeyboardAnimationDurationUserInfoKey,取出动画时长信息
//3

var keyBoardBoundsRect = self.view.convertRect(keyBoardBounds, toView:nil)

由于取出的位置信息是绝对的,所以要将其转换为对应于当前view的位置,否则位置信息会出错!
//4

var keyBaoardViewFrame = keyBaordView.frame
var deltaY = keyBoardBounds.size.height

保存下输入框的位置信息和y坐标需要变换的量以便后面调用

//5

    let animations:(() -> Void) = {

        self.keyBaordView.transform = CGAffineTransformMakeTranslation(0,-deltaY)

    if duration > 0 {
        let options = UIViewAnimationOptions(UInt((userInfo[UIKeyboardAnimationCurveUserInfoKey] as! NSNumber).integerValue << 16))

        UIView.animateWithDuration(duration, delay: 0, options:options, animations: animations, completion: nil)

    }else{

        animations()
    }

}

首先使用仿射变换CGAffineTransformMakeTranslation,使输入框的高度减少deltaY也就是跟随键盘的位置向上移动;

此处难点在这里

     let options =     UIViewAnimationOptions(UInt((userInfo[UIKeyboardAnimationCurveUserInfoKey] as! NSNumber).integerValue << 16))

这里是将时间曲线信息(一个64为的无符号整型)转换为UIViewAnimationOptions类型,要通过左移16来完成类型转换

这个方法是在一个比较著名的解决bug的网站stackoverflow里找到的。

自我感觉这是比较坑的地方,它居然没有用来进行类型转换的方法,竟然还得要位!运!算!不过相信今后这个坑会被apple填上吧。。

然后呢就是把这些东西全部装进UIView的动画函数中,执行动画。

 UIView.animateWithDuration(duration, delay: 0, options:options, animations: animations, completion: nil)

这样键盘弹出的方法就完全实现了!

接下来就是收回键盘的部分了:
这部分呢就比较简单了,收回键盘时只需要动画时长duration和时间曲线信息options所以只要留下他们就行了,然后再将输入框的位置还原即可,这里有一个很巧妙的办法

self.keyBaordView.transform = CGAffineTransformIdentity

这样就可以还原所有变换~
下面是该方法的实现:

func keyBoardWillHide(note:NSNotification)
{

    let userInfo  = note.userInfo as! NSDictionary

    let duration = (userInfo[UIKeyboardAnimationDurationUserInfoKey] as! NSNumber).doubleValue

    let animations:(() -> Void) = {

        self.keyBaordView.transform = CGAffineTransformIdentity

    }

    if duration > 0 {
        let options = UIViewAnimationOptions(UInt((userInfo[UIKeyboardAnimationCurveUserInfoKey] as! NSNumber).integerValue << 16))

        UIView.animateWithDuration(duration, delay: 0, options:options, animations: animations, completion: nil)

    }else{

        animations()
    }

}

实际上这个方法不会运行,因为并没有判断是否应该收回键盘,我的解决方法是当手指点击输入框之上的任何地方就会收回键盘,这个在我的完整demo会看到。

demo源代码github : https://github.com/ShyHornet/keyBoardPopUpDemo/tree/demo

demo的效果:

时间: 2024-10-29 19:08:22

【转】swift实现ios类似微信输入框跟随键盘弹出的效果的相关文章

iOS开发中如何在键盘弹出时改变View的高度

在iOS开发的时候有两个经常要用到的控件UITextfield跟UITextView,我们输入内容基本是通过这两个控件进行的,但是有时候会遇到这样的问题:在点击输入之后弹出键盘遮盖住了输入框,可以通过以下办法解决: 添加通知监听键盘的弹出跟隐藏 //监听键盘弹出和隐藏 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillSho

Android封装类似微信的顶部TitleBar弹出的PopupWindow代码

Android仿微信顶部titlebar,点击加号弹出的PopupWindow,是封装好的PopupWindow,直接拿来用即可,先看效果图:  调用代码非常简单,这是MainActivity的代码: public class MainActivity extends AppCompatActivity { private TitlePopup titlePopup; @Override protected void onCreate(Bundle savedInstanceState) { s

[Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法

http://blog.csdn.net/lovelyelfpop/article/details/52033045 Cordova iOS应用在使用系统自带输入法键盘的时候,聚焦文本框是会将整体webview界面上移的,如下图: 然而,如果你用的是第三方输入法(百度.搜狗.qq输入法等都是),聚焦文本框弹出键盘时,界面却不会整体上移,导致文本框被软键盘遮挡,如下图: 不仅被遮挡,靠底部的文本框还无法往上拖拽滚至可视区域. 解决办法一:第三方键盘弹出,实现界面也能上移 使用 ionic-plug

Android软键盘弹出,覆盖h5页面输入框问题

之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

iOS开发之UI——键盘弹出屏幕上移

平时在开发中,当有输入框时,弹出的键盘有时会遮挡住下方的屏幕,为此我们可以在对输入框进行操作时使屏幕上移,避免下方屏幕被遮挡.(也可以使用ScrollView进行滑动.) #pragma mark - 屏幕上弹 -( void )textFieldDidBeginEditing:(UITextField *)textField {      //键盘高度216           //滑动效果(动画)      NSTimeInterval animationDuration = 0.30f;

iOS开发,使用Category实现键盘弹出时,移动View以防被遮住

嗯,直接上代码!!!! 这是.h文件的 #import <UIKit/UIKit.h> @interface UIView (AboutKeyboard) @property (nonatomic) CGFloat moveDistince; @property (nonatomic) UIView *moveView; /* *指定一个View在键盘出现和消失时移动,如果存在superView则移动superView,否则移动自身 */ - (void)registerWhenKeyboar

iOS键盘弹出高度以及动画时间获取

原文链接: iOS键盘弹出高度以及动画时间获取 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

使用movable-view制作可拖拽的微信小程序弹出层效果。

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style

微信公众号系列 --- ionic在IOS的键盘弹出问题

在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io