iOS 怎么做成和微信一样的一体键盘?

前言: 在应用中不可避免使用到评论或者聊天输入框,但是或多或少都会出现下面和简书一样的效果,在返回的时候,输入框会被键盘遮挡,这一点微信和支付宝做的不错,对于细节控来说,这个不能忍。

可以看到,在侧滑返回的时候自定义的输入框会被键盘遮挡,但是微信或者支付宝的键盘看起来就是一体的,如果你是细节控有强迫症,你肯定也想实现这种一体键盘。

1、首先还是要了解监听键盘弹出的通知,键盘通知,这篇文章大概讲述了几个的通知的区别。
2、在使用通知UIKeyboardWillChangeFrameNotification 过程中也不可避免出现和简书聊天键盘返回时输入框被键盘遮挡的问题

看一下效果:


WillChangFrame.gif

可以看到,跟随键盘做到了,但是在返回的时候还是会出现和简书聊天键盘一样的问题。

3、再加上一直很好奇,返回时输入框和键盘一体返回是怎么实现的,如果我们在键盘Frame已经改变的时候然后再操作输入框 会不会实现一体的效果呢 ,所以 试了一下UIKeyboardDidChangeFrameNotification这个通知。

看一下效果:


DidChangeFrame.gif

效果图不是很明显,在返回的时候做到了和键盘一起返回,假假的一体效果,但是 在进入Viewcontroller的时候,会 出现问题。后来发现是做了动画效果。

4、最终如果要实现既能跟随键盘一起上下,返回的时候也做成假假的一体效果,我们可以 结合两个通知使用下,我们需要使用的是:UIKeyboardWillChangeFrameNotification的进入页面后的效果,以及UIKeyboardDidChangeFrameNotification页面消失后单独处理键盘(不加动画)

注册两个通知


    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
  
    self.view.backgroundColor =[UIColor whiteColor];
    self.textview =[[UITextView alloc]initWithFrame:CGRectMake(20, KScreenH - 40, KScreenW-40, 40)];
    self.textview.layer.borderColor = [UIColor blueColor].CGColor;
    self.textview.layer.borderWidth =3;
    self.textview.layer.cornerRadius = 5;
    self.textview.layer.masksToBounds = YES;
    [self.view addSubview:self.textview];
    
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyboardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil];
    [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(keyboarDidChangeFrame:) name:UIKeyboardDidChangeFrameNotification object:nil];
}

给一个是否做动画的标识;

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    _isDisappear = NO;
}
-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    _isDisappear = YES;
}

针对是否需要动画对 通知做区分,DidChangeFrame不需要添加动画:

-(void)keyboardWillChangeFrame:(NSNotification *)notification{
//        if (self.picking) return;
    /**
     notification.userInfo = @{
      键盘弹出\隐藏后的frame
     UIKeyboardFrameEndUserInfoKey = NSRect: {{0, 352}, {320, 216}},
      键盘弹出\隐藏所耗费的时间
     UIKeyboardAnimationDurationUserInfoKey = 0.25,
      键盘弹出\隐藏动画的执行节奏(先快后慢,匀速)
     UIKeyboardAnimationCurveUserInfoKey = 7
     }
     */
    
    NSDictionary *userInfo = notification.userInfo;
    // 动画的持续时间
    double duration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    // 键盘的frame
    CGRect keyboardF = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
    NSLog(@"%@",NSStringFromCGRect(keyboardF));
    // 执行动画
    if (!_isDisappear) {
        [UIView animateWithDuration:duration animations:^{
            // 工具条的Y值 == 键盘的Y值 - 工具条的高度
            
            if (keyboardF.origin.y > self.view.height) {
                self.textview.y = self.view.height- self.textview.height;
            }else
            {
                self.textview.y = keyboardF.origin.y - self.textview.height;
            }
            NSLog(@"%f",self.textview.y);
        }];

    }
   
}

-(void)keyboarDidChangeFrame:(NSNotification *)notification{
    //    if (self.picking) return;
    /**
     notification.userInfo = @{
     // 键盘弹出\隐藏后的frame
     UIKeyboardFrameEndUserInfoKey = NSRect: {{0, 352}, {320, 216}},
     // 键盘弹出\隐藏所耗费的时间
     UIKeyboardAnimationDurationUserInfoKey = 0.25,
     // 键盘弹出\隐藏动画的执行节奏(先快后慢,匀速)
     UIKeyboardAnimationCurveUserInfoKey = 7
     }
     */
    
    NSDictionary *userInfo = notification.userInfo;
    // 动画的持续时间
//    double duration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
    // 键盘的frame
    CGRect keyboardF = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
    NSLog(@"%@",NSStringFromCGRect(keyboardF));
    // 执行动画
//    [UIView animateWithDuration:duration animations:^{
        // 工具条的Y值 == 键盘的Y值 - 工具条的高度
    
    if (_isDisappear) {
       
            if (keyboardF.origin.y > self.view.height) {
                            self.textview.y = self.view.height- self.textview.height;
            }else
            {
                self.textview.y = keyboardF.origin.y - self.textview.height;
            }

      
    }

    
}

最后假假的实现了这个效果:


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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,598评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,644评论 4 59
  • 上周六,老师结婚,今天来上课。我们为此惊奇不已,距她结完婚只有两天... 我们私下偷偷议论,老师为什么放着18天的...
    寂川Y阅读 387评论 5 2
  • 一直不喜欢看时尚达人写的畅销书,因为觉得时尚就像流行感冒,虽然来势汹汹,却终究逃不掉被淘汰的命运,而这些达人们写的...
    姬红阅读 939评论 3 9
  • 1 微信聊多于见面寒暄 偶然一次,在朋友圈见到有个朋友说自己刚刚清除了一遍微信联系人,由原本的一千多人清除到剩下两...
    梁豆芽阅读 8,223评论 0 1