<code>YYKit</code>源碼閱讀預(yù)熱篇之<code>WBEmoticonInputView</code>
<code>WBEmoticonInputView</code>是 <code>YYKit</code> Demo中的表情鍵盤(pán)的實(shí)現(xiàn)。預(yù)熱一下，看看作者怎么實(shí)現(xiàn)的，以后慢慢分析所有的<code>YYKit</code>
整個(gè)表情鍵盤(pán)的結(jié)構(gòu)比較簡(jiǎn)單
整個(gè)表情鍵盤(pán)是一個(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
/// 表情輸入鍵盤(pán)
@interface WBEmoticonInputView : UIView
@property (nonatomic, weak) id<WBStatusComposeEmoticonViewDelegate> delegate;
+ (instancetype)sharedView;
@end
聲明了一個(gè)代理，一個(gè)單例的表情鍵盤(pán)。
#define kViewHeight 216
#define kToolbarHeight 37
#define kOneEmoticonHeight 50
#define kOnePageCount 20
以上幾個(gè)宏定義：表情鍵盤(pán)的高度，底部工具欄的高度，每一個(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ò)重寫(xiě) touches 系列的方法實(shí)現(xiàn)的放大鏡
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
//沒(méi)移動(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)鍵盤(pán)一樣
[[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;
// 表情鍵盤(pán)容器
@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 表情鍵盤(pán)。
<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)允許用戶(hù)點(diǎn)擊表情鍵盤(pá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>方法的。
