YYKit源码阅读预热篇之WBEmoticonInputView表情键盘实现

<code>YYKit</code>源码阅读预热篇之<code>WBEmoticonInputView</code>

<code>WBEmoticonInputView</code>是 <code>YYKit</code> Demo中的表情键盘的实现。预热一下，看看作者怎么实现的，以后慢慢分析所有的<code>YYKit</code>

表情键盘

整个表情键盘的结构比较简单
整个表情键盘是一个<code>UIView</code> 顶部是一个<code>CollectionView</code> 底部工具栏是一个<code>View</code>

声明比较简单

@protocol WBStatusComposeEmoticonViewDelegate <NSObject>
@optional
- (void)emoticonInputDidTapText:(NSString *)text;
- (void)emoticonInputDidTapBackspace;
@end

/// 表情输入键盘
@interface WBEmoticonInputView : UIView
@property (nonatomic, weak) id<WBStatusComposeEmoticonViewDelegate> delegate;
+ (instancetype)sharedView;
@end

声明了一个代理，一个单例的表情键盘。

#define kViewHeight 216
#define kToolbarHeight 37
#define kOneEmoticonHeight 50
#define kOnePageCount 20

以上几个宏定义：表情键盘的高度，底部工具栏的高度，每一个表情按钮的高度，每一页的个数。

<code>cell</code>的实现

@interface WBEmoticonCell : UICollectionViewCell
@property (nonatomic, strong) WBEmoticon *emoticon;
@property (nonatomic, assign) BOOL isDelete;
@property (nonatomic, strong) UIImageView *imageView;
@end

唯一不同就是区分一下删除按钮

接下来自定义一个<code>UICollectionView</code>

@interface WBEmoticonScrollView : UICollectionView
@end

@implementation WBEmoticonScrollView {
    NSTimeInterval *_touchBeganTime;
    BOOL _touchMoved;
    UIImageView *_magnifier;
    UIImageView *_magnifierContent;
    __weak WBEmoticonCell *_currentMagnifierCell;
    NSTimer *_backspaceTimer;
}

WBEmoticonScrollView 的主要功能就是在 UICollectionView基础上，添加了放大镜的功能，放大将就是点击某个表情按钮的时候，上面显示一个比较大的表情图

通过重写 touches 系列的方法实现的放大镜

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    //没移动
    _touchMoved = NO;
    //点击的哪个cell
    WBEmoticonCell *cell = [self cellForTouches:touches];
    _currentMagnifierCell = cell;
    //根据当前点击的cell显示放大镜
    [self showMagnifierForCell:_currentMagnifierCell];
    
    if (cell.imageView.image && !cell.isDelete) {
    //发出声音，效果跟点击系统键盘一样
        [[UIDevice currentDevice] playInputClick];
    }
    //如果点击的删除
    if (cell.isDelete) {
        [self endBackspaceTimer];
        // 启动定时器，调用删除
        [self performSelector:@selector(startBackspaceTimer) afterDelay:0.5];
    }
}

手势移动判断移动到哪个cell上，然后在对应的cell上显示出放大镜

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    _touchMoved = YES;
    if (_currentMagnifierCell && _currentMagnifierCell.isDelete) return;
    
    WBEmoticonCell *cell = [self cellForTouches:touches];
    if (cell != _currentMagnifierCell) {
        if (!_currentMagnifierCell.isDelete && !cell.isDelete) {
            _currentMagnifierCell = cell;
        }
        [self showMagnifierForCell:cell];
    }
}

- (void)startBackspaceTimer {
    [self endBackspaceTimer];
    @weakify(self);
    _backspaceTimer = [NSTimer timerWithTimeInterval:0.1 block:^(NSTimer *timer) {
        @strongify(self);
        if (!self) return;
        WBEmoticonCell *cell = self->_currentMagnifierCell;
        if (cell.isDelete) {
            if ([self.delegate respondsToSelector:@selector(emoticonScrollViewDidTapCell:)]) {
                [[UIDevice currentDevice] playInputClick];
                [((id<WBEmoticonScrollViewDelegate>) self.delegate) emoticonScrollViewDidTapCell:cell];
            }
        }
    } repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:_backspaceTimer forMode:NSRunLoopCommonModes];
}

<code> startBackspaceTimer </code> 启动定时器，0.1秒调用一次代理的删除方法。

@interface WBEmoticonInputView () <UICollectionViewDelegate, UICollectionViewDataSource, UIInputViewAudioFeedback,WBEmoticonScrollViewDelegate>
///底部工具栏按钮
@property (nonatomic, strong) NSArray<UIButton *> *toolbarButtons;
// 表情键盘容器
@property (nonatomic, strong) UICollectionView *collectionView;
// 每一页的指示器，多少页
@property (nonatomic, strong) UIView *pageControl;
// 多少组表情
@property (nonatomic, strong) NSArray<WBEmoticonGroup *> *emoticonGroups;
// 每一组页数
@property (nonatomic, strong) NSArray<NSNumber *> *emoticonGroupPageIndexs;
@property (nonatomic, strong) NSArray<NSNumber *> *emoticonGroupPageCounts;
// 总共多少页
@property (nonatomic, assign) NSInteger emoticonGroupTotalPageCount;
@property (nonatomic, assign) NSInteger currentPageIndex;

@end

WBEmoticonInputView 表情键盘。

<code>emoticonGroupPageIndexs</code> 用来记录每一个<code>section</code>距离最左边有多少页，整个例子中存的值是<code>[0,6,10]</code>,

<code>emoticonGroupPageCounts</code> 存的是每一个 <code>section</code>有多少页数据<code>[6, 4, 2]</code>，以后排版下面指示器的时候有用到

接下来就是普通的 CollectionView方法了。

实现UIInputViewAudioFeedback 协议，通过实现下面的方法，来允许用户点击表情键盘的时候发出系统标注的声音

- (BOOL)enableInputClicksWhenVisible {
    return NO;
}

当然系统标准的声音还是要调用<code>[[UIDevice currentDevice] playInputClick];</code>方法的。

YYKit源码阅读预热篇之WBEmoticonInputView表情键盘实现

推荐阅读更多精彩内容