iOS开发专题

自定义键盘系列之三自定义无表情的键盘

2017-05-04  本文已影响171人  摸着石头过河_崖边树

前言##

本文是在前文的基础上展开的，如果对自定义UITextView不熟悉，可以参考前文:

自定义键盘系列之一怎样自定义输入文本框

自定义键盘系列之二键盘自适应响应者

本文详细讲解怎样自定义无表情的键盘，什么是无表情的键盘，意思就是没有集成表情包的键盘，如果需要有表情包的键盘，可以参考下文
自定义键盘系列之四自定义带表情的键盘

本文效果图

自定义无表情键盘.gif

怎么自定义无表情包键盘###

前期准备####

1、一般都是从一个输入工具条开始，工具条包括发送按钮 + 自定义的UITextView

2、自定义的UITextView，可以设置占位文字，前文中我已经自定义一个LZBTextView自定义键盘系列之一怎样自定义输入文本框

自定义无表情包键盘功能分析####

当我们封装一个工具的时候一定会考虑几个问题：
1、我们把这个工具当做是一个黑盒子，那么整体思路应该怎么设计？
2、API怎么设计，才会让使用者使用更加方便？
3、把复杂的逻辑尽量封装到内部处理？
4、内部数据变化之后，怎么让外界知道等。

了解了设计需要考虑的问题之后，我们还需要想一想我们这个功能的核心点在哪里，小编以为有以下几点：
A、工具条的位置怎么随着键盘的弹出或者隐藏而变化?
B、计算输入文字的高度？
C、输入框的高度怎么随着文字的增多而高度增加?
D、当文字输入到限制高度的时候，不会在增加输入框的高度等?

自定义无表情包键盘功能实现####

我自定义的工具条通过block方式传输给外界数据
并且使用类方法快速创建

 toolBarHeight:设置自定义条的高度，没有设置为默认值

  + (LZBKeyBoardToolBar *)showKeyBoardWithConfigToolBarHeight:(CGFloat)toolBarHeight sendTextCompletion:(void(^)(NSString *sendText))sendTextBlock
{
LZBKeyBoardToolBar *toolBar = [[LZBKeyBoardToolBar alloc]init];
toolBar.backgroundColor = LZBColorRGB(247, 248, 250);
if(toolBarHeight < kKeyboardViewToolBarHeight)
    toolBarHeight = kKeyboardViewToolBarHeight;
toolBar.frame = CGRectMake(0, LZBScreenHeight - toolBarHeight, LZBScreenWidth, toolBarHeight);
toolBar.sendTextBlock = sendTextBlock;
return toolBar;   
  }

同时设置占位文字

- (void)setInputViewPlaceHolderText:(NSString *)placeText;

A、工具条的位置怎么随着键盘的弹出或者隐藏而变化?
监听键盘UIKeyboardWillChangeFrameNotification通知,注意通知三部曲（增加、移除、实现方法）

 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil];

在通知方法中实现工具条的y值变化

  - (void)keyboardWillChangeFrame:(NSNotification *)notification

{
 CGRect keyboardFrame = [notification.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
 CGFloat keyboardHeight = keyboardFrame.size.height;
 CGFloat keyboardAnimaitonDuration = [notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
 self.animationDuration = keyboardAnimaitonDuration;
 NSInteger option = [notification.userInfo[UIKeyboardAnimationCurveUserInfoKey] integerValue];
//判断键盘是否出现
BOOL isKeyBoardHidden = LZBScreenHeight == keyboardFrame.origin.y;
CGFloat offsetMarginY = isKeyBoardHidden ? LZBScreenHeight - self.LZB_heigth :LZBScreenHeight - self.LZB_heigth - keyboardHeight;
[UIView animateKeyframesWithDuration:self.animationDuration delay:0 options:option animations:^{
    self.LZB_y = offsetMarginY;
} completion:nil];    
}

B、计算输入文字的高度？
注意:我们输入的文本内容实际是通过textContainer显示的，所以我们计算文字高度的时候，一定要考虑textContainer的边距问题,详细问题请点击自定义键盘系列之一怎样自定义输入文本框

 CGFloat margin = self.inputTextView.textContainerInset.left + self.inputTextView.textContainerInset.right;

 CGFloat height = [self.inputTextView.text boundingRectWithSize:CGSizeMake(self.inputTextView.LZB_width - margin, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : self.inputTextView.font} context:nil].size.height;

C、输入框的高度怎么随着文字的增多而高度增加?
D、当文字输入到限制高度的时候，不会在增加输入框的高度等?
通过通知监听文字的输入

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textDidChange) name:UITextViewTextDidChangeNotification object:self.inputTextView];

并在文字监听的方法中实现计算文字的高度并布局

 - (void)textDidChange

{
  if([self.inputTextView.text containsString:@"\n"])
{
   [self sendBtnClick];
   return;
 }  
CGFloat margin = self.inputTextView.textContainerInset.left + self.inputTextView.textContainerInset.right;
CGFloat height = [self.inputTextView.text boundingRectWithSize:CGSizeMake(self.inputTextView.LZB_width - margin, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : self.inputTextView.font} context:nil].size.height;
if(height == self.textHeight) return;
// 确保输入框不会无限增高，控制在显示4行
if (height > kKeyboardViewToolBar_TextView_LimitHeight) {
    return;
}
self.textHeight = height;
[self setNeedsLayout];
}

在布局中，整体的工具条的y值和高度在改变,内部的输入框和发送按钮也在改变（注意先后顺序）

- (void)layoutSubviews

{
[super layoutSubviews];
 __weak typeof(self) weakSelf = self;
//计算高度
CGFloat height = (self.textHeight + kKeyboardViewToolBar_TextView_Height)> kKeyboardViewToolBarHeight ? (self.textHeight + kKeyboardViewToolBar_TextView_Height) : kKeyboardViewToolBarHeight;
CGFloat offsetY = self.LZB_heigth - height;
 //一定是整体的工具条先动画
[UIView animateWithDuration:self.animationDuration animations:^{
    weakSelf.LZB_y  += offsetY;
    weakSelf.LZB_heigth = height;
}];
self.topLine.LZB_width = self.LZB_width;
self.bottomLine.LZB_width = self.LZB_width;
//设置发送按钮的尺寸
CGSize sendButtonSize = self.sendBtn.currentImage.size;
self.sendBtn.LZB_width = sendButtonSize.width;
self.sendBtn.LZB_heigth = sendButtonSize.height;
self.sendBtn.LZB_x = self.LZB_width - sendButtonSize.width - kKeyboardViewToolBar_Horizontal_DefaultMargin;
self.inputTextView.LZB_width = self.LZB_width - sendButtonSize.width - 3 *kKeyboardViewToolBar_Horizontal_DefaultMargin;
self.inputTextView.LZB_x = kKeyboardViewToolBar_Horizontal_DefaultMargin;
 //子控件的动画  
[UIView animateWithDuration:self.animationDuration animations:^{
    weakSelf.inputTextView.LZB_heigth = weakSelf.LZB_heigth - 2 *kKeyboardViewToolBar_Vertical_DefaultMargin;
    weakSelf.inputTextView.LZB_centerY = weakSelf.LZB_heigth * 0.5;
    weakSelf.sendBtn.LZB_y = weakSelf.LZB_heigth - sendButtonSize.height -kKeyboardViewToolBar_Vertical_DefaultMargin;
    weakSelf.bottomLine.LZB_y = weakSelf.LZB_heigth - weakSelf.bottomLine.LZB_heigth;
}];
[self.inputTextView setNeedsUpdateConstraints];
}

最后效果截图


自定义无表情键盘.png

小建议###

我觉得每个公司都应该有自己的一套键盘，小编在这里给大家整理出来了一套，但是可能不一定适合您的项目，但是依然具有参考价值，真正合适的是要自己写的。

详情代码请直接下载demo查看：
自定义键盘-LZBKeyBoardView

最后赠言###

star 是对我们程序猿最大的鼓励

上一篇下一篇

猜你喜欢

热点阅读