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 *)indexPathresultX:(NSUInteger *)xresultY:(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)xy:(NSUInteger)yindexPath:(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实现。

学习记录，每天不停进步。