iOS开发-聊天emoji表情与自定义动图表情左右滑动控件
iOS开发-聊天emoji表情与自定义动图表情左右滑动控件
之前开发中遇到需要实现聊天emoji表情与自定义动图表情左右滑动控件。使用UICollectionView实现。
一、效果图
二、实现代码
UICollectionView是一种类似于UITableView但又比UITableView功能更强大、更灵活的视图，这是源于它将UICollectionView对cell的布局交给了UICollectionViewLayout，而且允许用户自定义layout来进行布局。
2.1 UICollectionView初始化
INEmotionView.h
@interface INEmotionView : UIView
@property (nonatomic, weak) id delegate;
@property (nonatomic, strong) INEmotionFlowLayout *flowLayout;
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) UIPageControl *pageControl;
- (id)initWithFrame:(CGRect)frame;
@end
INEmotionView.m
#import "INEmotionView.h"
#import "UIColor+Addition.h"
static CGFloat kCollectionHeight = 260;
@implementation INEmotionView
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor colorWithHexString:@"efeff4"];
self.flowLayout =[[INEmotionFlowLayout alloc] init];
self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
self.collectionView = [[UICollectionView alloc]initWithFrame:frame collectionViewLayout:self.flowLayout];
self.collectionView.backgroundColor = [UIColor clearColor];
self.collectionView.scrollEnabled = YES;
self.collectionView.pagingEnabled = YES;
self.collectionView.showsVerticalScrollIndicator = NO;
self.collectionView.showsHorizontalScrollIndicator = NO;
self.collectionView.userInteractionEnabled = YES;
self.collectionView.exclusiveTouch = YES;
[self addSubview:self.collectionView];
self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectZero];
self.pageControl.backgroundColor = [UIColor clearColor];
self.pageControl.currentPage = 0;
self.pageControl.numberOfPages = 0;
self.pageControl.currentPageIndicatorTintColor = [UIColor redColor];
self.pageControl.pageIndicatorTintColor = [UIColor greenColor];
[self addSubview:self.pageControl];
}
return self;
}
- (id)init {
return [self initWithFrame:CGRectZero];
}
- (void)layoutSubviews {
[super layoutSubviews];
self.collectionView.frame = CGRectMake(0.0, (CGRectGetHeight(self.bounds) - kCollectionHeight)/2, CGRectGetWidth(self.bounds), kCollectionHeight);
self.pageControl.frame = CGRectMake(0.0, CGRectGetMaxY(self.collectionView.frame), CGRectGetWidth(self.bounds), 50);
}
- (void)setDelegate:(id)delegate {
_delegate = delegate;
self.collectionView.delegate = delegate;
self.collectionView.dataSource = delegate;
}
@end
2.2 UICollectionView实现控件
emoji表情与自定义动图表情左右切换，需要根据拆分多个section，UICollectionView的datasource
我这里使用的是5个分组，每个分组的数量如下。
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 5;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
NSInteger sectionNumber = 60;
switch (section) {
case 0:
sectionNumber = 72;
break;
case 1:
sectionNumber = 8;
break;
case 2:
sectionNumber = 16;
break;
case 3:
sectionNumber = 24;
break;
case 4:
sectionNumber = 32;
break;
default:
break;
}
return sectionNumber;
}
UICollectionView左右切换，需要将pagingEnabled设置为YES。
界面上用到了UIPageControl，由于UICollectionView继承UIScrollView。不同section的页码不一样，所以在scrollViewDidEndDecelerating方法中更改UIPageControl的numberOfPages与currentPage。
/** 手指滑动屏幕时，视图停止滚动会调用此方法 */
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
NSInteger collectionPage = scrollView.contentOffset.x/scrollView.frame.size.width;
NSInteger aIndex = 0;
NSInteger sectionIndex = 0;
for (NSInteger index = 0; index < self.sectionPageNumbers.count; index ++) {
NSString *sectionPage = [self.sectionPageNumbers objectAtIndex:index];
aIndex = aIndex+[sectionPage integerValue];
if (collectionPage >= 0 && collectionPage < aIndex) {
sectionIndex = index;
break;
}
}
NSString *sectionCount = [self.sectionPageNumbers objectAtIndex:sectionIndex];
NSLog(@"sectionCount:%@",sectionCount);
NSInteger preCount = 0;
for (NSInteger i = 0; i < sectionIndex; i++) {
NSString *sectionPage = [self.sectionPageNumbers objectAtIndex:i];
preCount = preCount + sectionPage.integerValue;
}
NSInteger sectionPageCount = sectionCount.integerValue;
NSInteger sectionCurPage = collectionPage - preCount;
NSLog(@"sectionPageCount:%ld",(long)sectionPageCount);
NSLog(@"sectionCurPage:%ld",(long)sectionCurPage);
self.emojiView.pageControl.numberOfPages = sectionPageCount;
self.emojiView.pageControl.currentPage = sectionCurPage;
}
整体使用UICollectionView代理delegate方法代码如下
#import "INEmotionPresenter.h"
#define kCustomEmotionScreenWidth [UIScreen mainScreen].bounds.size.width
@interface INCollectionSectionPageRange : NSObject
@property (nonatomic, assign) NSString *beginNumber;
@property (nonatomic, assign) NSString *endNumber;
@end
@implementation INCollectionSectionPageRange
@end
@implementation INEmotionPresenter
#pragma mark - 注册cell
/**
注册cell
*/
- (void)registerCollectionCell {
[self.emojiView.collectionView registerClass:[INEmotionSystemEmojiCell class] forCellWithReuseIdentifier:kEmotionEmojiSystemIdentifier];
[self.emojiView.collectionView registerClass:[INEmotionCustomEmojiCell class] forCellWithReuseIdentifier:kEmotionEmojiCustomIdentifier];
}
#pragma mark - UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
UIEdgeInsets contentInset = collectionView.contentInset;
NSInteger columnCount = 4;
NSInteger rowCount = 2;
if (indexPath.section == 0) {
columnCount = 8;
rowCount = 3;
}
CGFloat w = (CGRectGetWidth(collectionView.bounds) - contentInset.left - contentInset.right)/ columnCount;
CGFloat h = (CGRectGetHeight(collectionView.bounds) - contentInset.top - contentInset.bottom)/rowCount;
return CGSizeMake(w, h);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 0.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 0.0;
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 5;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
NSInteger sectionNumber = 60;
switch (section) {
case 0:
sectionNumber = 72;
break;
case 1:
sectionNumber = 8;
break;
case 2:
sectionNumber = 16;
break;
case 3:
sectionNumber = 24;
break;
case 4:
sectionNumber = 32;
break;
default:
break;
}
return sectionNumber;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 0) {
//emoji表情
INEmotionSystemEmojiCell *cell = (INEmotionSystemEmojiCell *)[collectionView dequeueReusableCellWithReuseIdentifier:kEmotionEmojiSystemIdentifier forIndexPath:indexPath];
cell.emojiLabel.text = @"";
cell.emojiLabel.text = [NSString stringWithFormat:@"%ld",(long)indexPath.item];
cell.cellNumber = [NSString stringWithFormat:@"%ld",(long)indexPath.item];
return cell;
}
//自定义表情贴图
INEmotionCustomEmojiCell *cell = (INEmotionCustomEmojiCell *)[collectionView dequeueReusableCellWithReuseIdentifier:kEmotionEmojiCustomIdentifier forIndexPath:indexPath];
cell.cellNumber = [NSString stringWithFormat:@"%ld",(long)indexPath.item];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath {
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
NSInteger collectionPage = scrollView.contentOffset.x/scrollView.frame.size.width;
NSInteger aIndex = 0;
NSInteger sectionIndex = 0;
for (NSInteger index = 0; index < self.sectionPageNumbers.count; index ++) {
NSString *sectionPage = [self.sectionPageNumbers objectAtIndex:index];
aIndex = aIndex+[sectionPage integerValue];
if (collectionPage >= 0 && collectionPage < aIndex) {
sectionIndex = index;
break;
}
}
NSString *sectionCount = [self.sectionPageNumbers objectAtIndex:sectionIndex];
NSLog(@"sectionCount:%@",sectionCount);
NSInteger preCount = 0;
for (NSInteger i = 0; i < sectionIndex; i++) {
NSString *sectionPage = [self.sectionPageNumbers objectAtIndex:i];
preCount = preCount + sectionPage.integerValue;
}
NSInteger sectionPageCount = sectionCount.integerValue;
NSInteger sectionCurPage = collectionPage - preCount;
NSLog(@"sectionPageCount:%ld",(long)sectionPageCount);
NSLog(@"sectionCurPage:%ld",(long)sectionCurPage);
self.emojiView.pageControl.numberOfPages = sectionPageCount;
self.emojiView.pageControl.currentPage = sectionCurPage;
}
#pragma mark - SETTER/GETTER
- (NSMutableArray *)sectionPageNumbers {
if (!_sectionPageNumbers) {
_sectionPageNumbers = [NSMutableArray arrayWithCapacity:0];
[_sectionPageNumbers addObject:@"3"];
[_sectionPageNumbers addObject:@"1"];
[_sectionPageNumbers addObject:@"2"];
[_sectionPageNumbers addObject:@"3"];
[_sectionPageNumbers addObject:@"4"];
}
return _sectionPageNumbers;
}
- (INEmotionConfig *)emojiConfig {
if (!_emojiConfig) {
_emojiConfig = [[INEmotionConfig alloc] init];
}
return _emojiConfig;
}
- (INEmotionInteractor *)emojiInteractor {
if (!_emojiInteractor) {
_emojiInteractor = [[INEmotionInteractor alloc] init];
}
return _emojiInteractor;
}
- (INEmotionView *)emojiView {
if (!_emojiView) {
_emojiView = [[INEmotionView alloc] initWithFrame:CGRectZero];
}
return _emojiView;
}
@end
2.3 实现表情的排列UICollectionViewFlowLayout
由于emoji表情需要3行8列，自定义贴图表情需要2行4列排列。我这里实现一下UICollectionViewFlowLayout
要在layoutAttributesForItemAtIndexPath中区分，如果section为0，则为3行8列；否则为2行4列。
INEmotionFlowLayout.h
#import <UIKit/UIKit.h>
@interface INEmotionFlowLayout : UICollectionViewFlowLayout
- (UICollectionViewLayoutAttributes *)customLayoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
@end
INEmotionFlowLayout.m
#import "INEmotionFlowLayout.h"
#define kLayScreenWidth [UIScreen mainScreen].bounds.size.width
@interface INEmotionFlowLayout () <UICollectionViewDelegateFlowLayout>
@property (strong, nonatomic) NSMutableArray *allAttributes;
@property (nonatomic, assign) NSInteger currentRow;
@property (nonatomic, assign) NSInteger currentCol;
@end
@implementation INEmotionFlowLayout
-(instancetype)init
{
if (self = [super init])
{
}
return self;
}
- (void)prepareLayout
{
[super prepareLayout];
self.allAttributes = [NSMutableArray array];
NSInteger sections = [self.collectionView numberOfSections];
for (int i = 0; i < sections; i++)
{
NSMutableArray * tmpArray = [NSMutableArray array];
NSUInteger count = [self.collectionView numberOfItemsInSection:i];
for (NSUInteger j = 0; j<count; j++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:j inSection:i];
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
[tmpArray addObject:attributes];
}
[self.allAttributes addObject:tmpArray];
}
}
- (CGSize)collectionViewContentSize
{
return [super collectionViewContentSize];
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSUInteger item = indexPath.item;
NSUInteger x;
NSUInteger y;
[self targetPositionWithItem:indexPath resultX:&x resultY:&y];
NSUInteger item2 = [self originItemAtX:x y:y indexPath:indexPath];
NSIndexPath *theNewIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];
UICollectionViewLayoutAttributes *theNewAttr = [super layoutAttributesForItemAtIndexPath:theNewIndexPath];
theNewAttr.indexPath = indexPath;
return theNewAttr;
}
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
NSMutableArray *tmp = [NSMutableArray array];
for (UICollectionViewLayoutAttributes *attr in attributes) {
for (NSMutableArray *attributes in self.allAttributes)
{
for (UICollectionViewLayoutAttributes *attr2 in attributes) {
if (attr.indexPath.item == attr2.indexPath.item) {
[tmp addObject:attr2];
break;
}
}
}
}
return tmp;
}
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
// 根据 item 计算目标item的位置
// x 横向偏移 y 竖向偏移
- (void)targetPositionWithItem:(NSIndexPath *)indexPath
resultX:(NSUInteger *)x
resultY:(NSUInteger *)y
{
NSInteger columnCount = 4;
NSInteger rowCount = 2;
if (indexPath.section == 0) {
columnCount = 8;
rowCount = 3;
}
NSInteger item = indexPath.item;
NSUInteger page = item/(columnCount*rowCount);
NSUInteger theX = item % columnCount + page * columnCount;
NSUInteger theY = item / columnCount - page * rowCount;
if (x != NULL) {
*x = theX;
}
if (y != NULL) {
*y = theY;
}
}
// 根据偏移量计算item
- (NSUInteger)originItemAtX:(NSUInteger)x
y:(NSUInteger)y
indexPath:(NSIndexPath *)indexPath
{
NSInteger columnCount = 4;
NSInteger rowCount = 2;
if (indexPath.section == 0) {
columnCount = 8;
rowCount = 3;
}
NSUInteger item = x * rowCount + y;
return item;
}
- (UICollectionViewLayoutAttributes *)customLayoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
return [self layoutAttributesForItemAtIndexPath:indexPath];
}
@end
2.4 emoji表情的UICollectionViewCell
继承UICollectionViewCell实现INEmotionSystemEmojiCell表情
INEmotionSystemEmojiCell.h
#import <UIKit/UIKit.h>
#import "UIColor+Addition.h"
@interface INEmotionSystemEmojiCell : UICollectionViewCell
@property (nonatomic, strong) UIImageView *emojiImageView;
@property (nonatomic, strong) UILabel *emojiLabel;
/**
cell的序号
*/
@property (nonatomic, strong) NSString *cellNumber;
/**
按照序号，从小到大
@param cell cell
@return 排序
*/
- (NSComparisonResult)sortAscCells:(INEmotionSystemEmojiCell *)cell;
@end
INEmotionSystemEmojiCell.m
#import "INEmotionSystemEmojiCell.h"
static CGFloat kEmotionEmojiSize = 40.0;
@implementation INEmotionSystemEmojiCell
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.emojiImageView = [[UIImageView alloc] initWithFrame:CGRectMake((CGRectGetWidth(self.bounds) - kEmotionEmojiSize)/2, (CGRectGetHeight(self.bounds) - kEmotionEmojiSize)/2, kEmotionEmojiSize, kEmotionEmojiSize)];
self.emojiImageView.backgroundColor = [UIColor randomColor];
self.emojiImageView.layer.cornerRadius = kEmotionEmojiSize/2;
self.emojiImageView.layer.masksToBounds = YES;
[self addSubview:self.emojiImageView];
self.emojiLabel = [[UILabel alloc] initWithFrame:CGRectMake((CGRectGetWidth(self.bounds) - kEmotionEmojiSize)/2, (CGRectGetHeight(self.bounds) - kEmotionEmojiSize)/2, kEmotionEmojiSize, kEmotionEmojiSize)];
self.emojiLabel.textColor = [UIColor grayColor];
self.emojiLabel.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.emojiLabel];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.emojiImageView.frame = CGRectMake((CGRectGetWidth(self.bounds) - kEmotionEmojiSize)/2, (CGRectGetHeight(self.bounds) - kEmotionEmojiSize)/2, kEmotionEmojiSize, kEmotionEmojiSize);
self.emojiLabel.frame = CGRectMake((CGRectGetWidth(self.bounds) - kEmotionEmojiSize)/2, (CGRectGetHeight(self.bounds) - kEmotionEmojiSize)/2, kEmotionEmojiSize, kEmotionEmojiSize);
}
/**
按照序号，从小到大
@param cell cell
@return 排序
*/
- (NSComparisonResult)sortAscCells:(INEmotionSystemEmojiCell *)cell {
//先按照时间排序
NSComparisonResult result = [self.cellNumber compare:cell.cellNumber];
return result;
}
@end
2.5 自定义贴图表情的UICollectionViewCell
INEmotionCustomEmojiCell.h
#import <UIKit/UIKit.h>
#import "UIColor+Addition.h"
@interface INEmotionCustomEmojiCell : UICollectionViewCell
@property (nonatomic, strong) UIImageView *emojiImageView;
/**
cell的序号
*/
@property (nonatomic, strong) NSString *cellNumber;
/**
按照序号，从小到大
@param cell cell
@return 排序
*/
- (NSComparisonResult)sortAscCells:(INEmotionCustomEmojiCell *)cell;
@end
INEmotionCustomEmojiCell.m
#import "INEmotionCustomEmojiCell.h"
static CGFloat kCustomEmotionEmojiSize = 80.0;
@implementation INEmotionCustomEmojiCell
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.emojiImageView = [[UIImageView alloc] initWithFrame:CGRectMake((CGRectGetWidth(self.bounds) - kCustomEmotionEmojiSize)/2, (CGRectGetHeight(self.bounds) - kCustomEmotionEmojiSize)/2, kCustomEmotionEmojiSize, kCustomEmotionEmojiSize)];
self.emojiImageView.backgroundColor = [UIColor randomColor];
self.emojiImageView.layer.cornerRadius = 4;
self.emojiImageView.layer.masksToBounds = YES;
[self addSubview:self.emojiImageView];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.emojiImageView.frame = CGRectMake((CGRectGetWidth(self.bounds) - kCustomEmotionEmojiSize)/2, (CGRectGetHeight(self.bounds) - kCustomEmotionEmojiSize)/2, kCustomEmotionEmojiSize, kCustomEmotionEmojiSize);
}
/**
按照序号，从小到大
@param cell cell
@return 排序
*/
- (NSComparisonResult)sortAscCells:(INEmotionCustomEmojiCell *)cell {
//先按照时间排序
NSComparisonResult result = [self.cellNumber compare:cell.cellNumber];
return result;
}
@end
至此整个效果的代码实现完了。
三、小结
iOS开发-聊天emoji表情与自定义动图表情左右滑动控件.使用UICollectionView实现。
学习记录，每天不停进步。