<code>YYKit</code>源碼閱讀預(yù)熱篇之<code>WBEmoticonInputView</code>

<code>WBEmoticonInputView</code>是 <code>YYKit</code> Demo中的表情鍵盤的實(shí)現(xiàn)。預(yù)熱一下，看看作者怎么實(shí)現(xiàn)的，以后慢慢分析所有的<code>YYKit</code>

表情鍵盤

整個(gè)表情鍵盤的結(jié)構(gòu)比較簡(jiǎn)單
整個(gè)表情鍵盤是一個(gè)<code>UIView</code> 頂部是一個(gè)<code>CollectionView</code> 底部工具欄是一個(gè)<code>View</code>

聲明比較簡(jiǎn)單

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

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

聲明了一個(gè)代理，一個(gè)單例的表情鍵盤。

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

以上幾個(gè)宏定義：表情鍵盤的高度，底部工具欄的高度，每一個(gè)表情按鈕的高度，每一頁(yè)的個(gè)數(shù)。

<code>cell</code>的實(shí)現(xiàn)

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

唯一不同就是區(qū)分一下刪除按鈕

接下來(lái)自定義一個(gè)<code>UICollectionView</code>

@interface WBEmoticonScrollView : UICollectionView
@end

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

WBEmoticonScrollView 的 主要功能就是在 UICollectionView基礎(chǔ)上，添加了 放大鏡的功能，放大將就是點(diǎn)擊某個(gè)表情按鈕的時(shí)候，上面顯示一個(gè)比較大的表情圖

通過(guò)重寫 touches 系列的方法實(shí)現(xiàn)的放大鏡

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    //沒移動(dòng)
    _touchMoved = NO;
    //點(diǎn)擊的哪個(gè)cell
    WBEmoticonCell *cell = [self cellForTouches:touches];
    _currentMagnifierCell = cell;
    //根據(jù)當(dāng)前點(diǎn)擊的cell顯示放大鏡
    [self showMagnifierForCell:_currentMagnifierCell];
    
    if (cell.imageView.image && !cell.isDelete) {
    //發(fā)出聲音，效果跟點(diǎn)擊系統(tǒng)鍵盤一樣
        [[UIDevice currentDevice] playInputClick];
    }
    //如果點(diǎn)擊的刪除
    if (cell.isDelete) {
        [self endBackspaceTimer];
        // 啟動(dòng)定時(shí)器，調(diào)用刪除
        [self performSelector:@selector(startBackspaceTimer) afterDelay:0.5];
    }
}

手勢(shì)移動(dòng) 判斷移動(dòng)到哪個(gè)cell上，然后在對(duì)應(yīng)的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> 啟動(dòng)定時(shí)器，0.1秒調(diào)用一次代理的刪除方法。

@interface WBEmoticonInputView () <UICollectionViewDelegate, UICollectionViewDataSource, UIInputViewAudioFeedback,WBEmoticonScrollViewDelegate>
///底部工具欄按鈕
@property (nonatomic, strong) NSArray<UIButton *> *toolbarButtons;
// 表情鍵盤容器
@property (nonatomic, strong) UICollectionView *collectionView;
// 每一頁(yè)的指示器，多少頁(yè)
@property (nonatomic, strong) UIView *pageControl;
// 多少組表情
@property (nonatomic, strong) NSArray<WBEmoticonGroup *> *emoticonGroups;
// 每一組頁(yè)數(shù)
@property (nonatomic, strong) NSArray<NSNumber *> *emoticonGroupPageIndexs;
@property (nonatomic, strong) NSArray<NSNumber *> *emoticonGroupPageCounts;
// 總共多少頁(yè)
@property (nonatomic, assign) NSInteger emoticonGroupTotalPageCount;
@property (nonatomic, assign) NSInteger currentPageIndex;

@end

WBEmoticonInputView 表情鍵盤。

<code>emoticonGroupPageIndexs</code> 用來(lái)記錄每一個(gè)<code>section</code>距離最左邊有多少頁(yè)，整個(gè)例子中存的值是<code>[0,6,10]</code>,

<code>emoticonGroupPageCounts</code> 存的是每一個(gè) <code>section</code>有多少頁(yè)數(shù)據(jù)<code>[6, 4, 2]</code>，以后排版下面指示器的時(shí)候有用到

接下來(lái)就是普通的 CollectionView方法了。

實(shí)現(xiàn)UIInputViewAudioFeedback 協(xié)議，通過(guò)實(shí)現(xiàn)下面的方法，來(lái)允許用戶點(diǎn)擊表情鍵盤的時(shí)候發(fā)出系統(tǒng)標(biāo)注的聲音

- (BOOL)enableInputClicksWhenVisible {
    return NO;
}

當(dāng)然系統(tǒng)標(biāo)準(zhǔn)的聲音還是要調(diào)用<code>[[UIDevice currentDevice] playInputClick];</code>方法的。