键盘表情切换

上次把键盘上方的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) {
        // 1.添加表情列表  (设置控件的大小需要在  layoutsubview中写)
        HMEmotionListView *listView = [[HMEmotionListView alloc] init];
        listView.backgroundColor = [UIColor greenColor];
        listView.backgroundColor = [UIColor blackColor];
        [self addSubview:listView];
        self.listView = listView;

        // 2.添加表情工具条
        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:// 默认
//            self.listView.emotions = self.defaultEmotions;
            break;

        case HMEmotionTypeEmoji: // Emoji
//            self.listView.emotions = self.emojiEmotions;
            break;

        case HMEmotionTypeLxh: // 浪小花
//            self.listView.emotions = self.lxhEmotions;
            break;

        default:
            break;
    }

    NSLog(@"%lu %@", (unsigned long)self.listView.emotions.count, [self.listView.emotions firstObject]);
}


// 对控件的frame进行设置
-(void)layoutSubviews {
    [super layoutSubviews];

    // 设置工具条的frame
    self.toollbar.x = 0;
    self.toollbar.width = self.width;
    self.toollbar.height = 35;
    self.toollbar.y = self.height - self.toollbar.height;
    // 设置表情列表的frame
    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) {
        // Initialization code
    }
    return self;
}
@end

3–>底部的toolbar

#import <UIKit/UIKit.h>
@class HMEmotionToolbar;
typedef enum {
    HMEmotionTypeRecent, // 最近
    HMEmotionTypeDefault, // 默认
    HMEmotionTypeEmoji, // Emoji
    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) {

        // 1.添加4个按钮
        [self setupButton:@"最近" tag:HMEmotionTypeRecent];
        UIButton *defaultButton = [self setupButton:@"默认" tag:HMEmotionTypeDefault];
        [self setupButton:@"Emoji" tag:HMEmotionTypeEmoji];
        [self setupButton:@"浪小花" tag:HMEmotionTypeLxh];

        // 4.默认选中“默认”按钮
        [self buttonClick:defaultButton];

    }
    return  self;
}



/**
 *  添加工具条按钮
 *
 *  @param title 按钮文字
 */
- (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
{
    // 1.控制按钮状态
    self.selectedButton.selected = NO;
    button.selected = YES;
    self.selectedButton = button;

    // 2.通知代理
    if ([self.delegate respondsToSelector:@selector(emotionToolbar:didSelectedButton:)]) {
        [self.delegate emotionToolbar:self didSelectedButton:button.tag];
    }
}

// 对控件的frame进行设置
-(void)layoutSubviews {
    [super layoutSubviews];
    // 3.设置工具条按钮的frame
    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];
    });
}

之前把自定义工具条弹出和拖动退出工具条已经写好。这篇微博只是当你点击键盘表情按钮时候切换系统自带和自定义键盘操作，和自定义键盘下面的工具条。