上次把键盘上方的toolbar工具条已经写好，直接拿过来就可以使用。细心的你会发现，每次在使用聊天工具或者微博等社交软件时会发现有一个切换切换到表情的自定义键盘动作。今天就简单的把这个切换键盘的框架搭建好。
首先分析键盘大致分为两部分一部分是表情list(HMEmotionListView)，一部分是底部的工具条(HMEmotionToolbar)。
封装自定义键盘(HMEmotionKeyboard包含表情list和工具条)
1–>先自定义HMEmotionKeyboard
#import <UIKit/UIKit.h>
@interface HMEmotionKeyboard : UIView
+(instancetype)keyboard;
@end
#import "HMEmotionKeyboard.h"
#import "UIImage+Extension.h"
#import "UIView+WLFrame.h"
#import "UIView+Extension.h"
#import "HMEmotionListView.h" // 自定义表情
#import "HMEmotionToolbar.h" // 自定义toolbar
@interface HMEmotionKeyboard ()<HMEmotionToolbarDelegate>
@property (nonatomic, weak) HMEmotionListView *listView;
@property (nonatomic, weak) HMEmotionToolbar *toollbar;
@end
@implementation HMEmotionKeyboard
+(instancetype)keyboard {
return [[self alloc]init];
}
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
HMEmotionListView *listView = [[HMEmotionListView alloc] init];
listView.backgroundColor = [UIColor greenColor];
listView.backgroundColor = [UIColor blackColor];
[self addSubview:listView];
self.listView = listView;
HMEmotionToolbar *toollbar = [[HMEmotionToolbar alloc] init];
[self addSubview:toollbar];
toollbar.delegate = self;
self.toollbar = toollbar;
}
return self;
}
#pragma mark - HMEmotionToolbarDelegate
- (void)emotionToolbar:(HMEmotionToolbar *)toolbar didSelectedButton:(HMEmotionType)emotionType
{
switch (emotionType) {
case HMEmotionTypeDefault:
break;
case HMEmotionTypeEmoji:
break;
case HMEmotionTypeLxh:
break;
default:
break;
}
NSLog(@"%lu %@", (unsigned long)self.listView.emotions.count, [self.listView.emotions firstObject]);
}
-(void)layoutSubviews {
[super layoutSubviews];
self.toollbar.x = 0;
self.toollbar.width = self.width;
self.toollbar.height = 35;
self.toollbar.y = self.height - self.toollbar.height;
self.listView.width = self.width;
self.listView.height = self.toollbar.y;
}
@end
2–> list表情
#import <UIKit/UIKit.h>
@interface HMEmotionListView : UIView
/** 需要展示的所有表情 */
@property (nonatomic, strong) NSArray *emotions;
@end
#import "HMEmotionListView.h"
@implementation HMEmotionListView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
@end
3–>底部的toolbar
#import <UIKit/UIKit.h>
@class HMEmotionToolbar;
typedef enum {
HMEmotionTypeRecent,
HMEmotionTypeDefault,
HMEmotionTypeEmoji,
HMEmotionTypeLxh
} HMEmotionType;
@protocol HMEmotionToolbarDelegate <NSObject>
@optional
- (void)emotionToolbar:(HMEmotionToolbar *)toolbar didSelectedButton:(HMEmotionType)emotionType;
@end
@interface HMEmotionToolbar : UIView
@property (nonatomic, weak) id<HMEmotionToolbarDelegate> delegate;
@end
#import "HMEmotionToolbar.h"
#import "UIImage+Extension.h"
#import "UIView+WLFrame.h"
#import "UIView+Extension.h"
#define HMEmotionToolbarButtonMaxCount 4
@interface HMEmotionToolbar ()
@property (nonatomic, weak) UIButton *selectedButton;
@end
@implementation HMEmotionToolbar
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupButton:@"最近" tag:HMEmotionTypeRecent];
UIButton *defaultButton = [self setupButton:@"默认" tag:HMEmotionTypeDefault];
[self setupButton:@"Emoji" tag:HMEmotionTypeEmoji];
[self setupButton:@"浪小花" tag:HMEmotionTypeLxh];
[self buttonClick:defaultButton];
}
return self;
}
- (UIButton *)setupButton:(NSString *)title tag:(HMEmotionType)tag{
UIButton *button = [[UIButton alloc] init];
button.tag = tag;
[button setTitle:title forState:UIControlStateNormal];
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor darkGrayColor] forState:UIControlStateSelected];
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];
button.titleLabel.font = [UIFont systemFontOfSize:13];
[self addSubview:button];
int count = self.subviews.count;
if (count == 1) {
[button setBackgroundImage:[UIImage resizedImage:@"compose_emotion_table_left_normal"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage resizedImage:@"compose_emotion_table_left_selected"] forState:UIControlStateSelected];
} else if (count == HMEmotionToolbarButtonMaxCount) {
[button setBackgroundImage:[UIImage resizedImage:@"compose_emotion_table_right_normal"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage resizedImage:@"compose_emotion_table_right_selected"] forState:UIControlStateSelected];
} else {
[button setBackgroundImage:[UIImage resizedImage:@"compose_emotion_table_mid_normal"] forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage resizedImage:@"compose_emotion_table_mid_selected"] forState:UIControlStateSelected];
}
return button;
}
- (void)buttonClick:(UIButton *)button
{
self.selectedButton.selected = NO;
button.selected = YES;
self.selectedButton = button;
if ([self.delegate respondsToSelector:@selector(emotionToolbar:didSelectedButton:)]) {
[self.delegate emotionToolbar:self didSelectedButton:button.tag];
}
}
-(void)layoutSubviews {
[super layoutSubviews];
CGFloat buttonW = self.width / HMEmotionToolbarButtonMaxCount;
CGFloat buttonH = self.height;
for (int i = 0; i<HMEmotionToolbarButtonMaxCount; i++) {
UIButton *button = self.subviews[i];
button.width = buttonW;
button.height = buttonH;
button.x = i * buttonW;
}
}
@end
4–>控制器里设置自定义键盘的属性
@interface ViewController ()< UITextViewDelegate, HMComposeToolbarDelegate>
@property (nonatomic, strong)HMComposeToolbar *toolbar;
添加键盘工具条
- (void)addToolBar {
HMComposeToolbar *toolbar = [[HMComposeToolbar alloc]init]
toolbar.width = self.view.width
toolbar.height = 44
toolbar.y = self.view.height - toolbar.height
toolbar.delegate = self
[self.view addSubview:toolbar]
self.toolbar = toolbar
}
实现键盘工具条代理
#pragma mark -- toolBar 代理方法
- (void)composeTool:(HMComposeToolbar *)toolbar didClickedButton:(HMComposeToolbarButtonTypes)buttonType{
switch (buttonType) {
case HMComposeToolbarButtonTypeEmotion:
NSLog(@"表情");
[self openEmotion];
break;
default:
break;
}
}
初始化自定义键盘
/**
* 是否正在切换键盘
*/
@property (nonatomic, assign, getter = isChangingKeyboard) BOOL changingKeyboard;
@property (nonatomic, strong)HMEmotionKeyboard *keyboard;
键盘出现后只加载一次，用懒加载操作
/**
* 自定义键盘 懒加载
*/
-(HMEmotionKeyboard *)keyboard {
if (!_keyboard) {
self.keyboard = [HMEmotionKeyboard keyboard];
self.keyboard.backgroundColor = [UIColor blueColor];
self.keyboard.width = self.view.width;
self.keyboard.height = 216;
}
return _keyboard;
}
点击键盘表情相应方法
#pragma mark -- 表情
- (void)openEmotion {
NSLog(@"调用表情");
self.changingKeyboard = YES;
if (self.textViews.inputView) {
self.textViews.inputView = nil;
self.toolbar.showEmotionButton = YES;
} else {
self.textViews.inputView = self.keyboard;
self.toolbar.showEmotionButton = NO;
}
[self.textViews resignFirstResponder];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.textViews becomeFirstResponder];
});
}
之前把自定义工具条弹出和拖动退出工具条已经写好。这篇微博只是当你点击键盘表情按钮时候切换系统自带和自定义键盘操作，和自定义键盘下面的工具条。
