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

YYKit源码阅读预热篇之WBEmoticonInputView

WBEmoticonInputViewYYKit Demo中的表情键盘的实现。预热一下,看看作者怎么实现的,以后慢慢分析所有的YYKit

YYKit源码阅读预热篇之WBEmoticonInputView表情键盘实现_第1张图片
表情键盘

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

声明比较简单

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

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

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

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

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

cell的实现

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

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

接下来自定义一个UICollectionView

@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 *)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 *)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) self.delegate) emoticonScrollViewDidTapCell:cell];
            }
        }
    } repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:_backspaceTimer forMode:NSRunLoopCommonModes];
}

startBackspaceTimer 启动定时器,0.1秒调用一次代理的删除方法。

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

@end

WBEmoticonInputView 表情键盘。

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

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

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

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

- (BOOL)enableInputClicksWhenVisible {
    return NO;
}

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

你可能感兴趣的:(YYKit源码阅读预热篇之WBEmoticonInputView表情键盘实现)