YYKit
源码阅读预热篇之WBEmoticonInputView
WBEmoticonInputView
是 YYKit
Demo中的表情键盘的实现。预热一下,看看作者怎么实现的,以后慢慢分析所有的YYKit
整个表情键盘的结构比较简单
整个表情键盘是一个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];
方法的。