iOS開發(fā)-聊天emoji表情與自定義動(dòng)圖表情左右滑動(dòng)控件
之前開發(fā)中遇到需要實(shí)現(xiàn)聊天emoji表情與自定義動(dòng)圖表情左右滑動(dòng)控件。使用UICollectionView實(shí)現(xiàn)。
一、效果圖
二、實(shí)現(xiàn)代碼
UICollectionView是一種類似于UITableView但又比UITableView功能更強(qiáng)大、更靈活的視圖，這是源于它將UICollectionView對(duì)cell的布局交給了UICollectionViewLayout，而且允許用戶自定義layout來進(jìn)行布局。
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實(shí)現(xiàn)控件
emoji表情與自定義動(dòng)圖表情左右切換，需要根據(jù)拆分多個(gè)section，UICollectionView的datasource
我這里使用的是5個(gè)分組，每個(gè)分組的數(shù)量如下。
- (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設(shè)置為YES。
界面上用到了UIPageControl，由于UICollectionView繼承UIScrollView。不同section的頁(yè)碼不一樣，所以在scrollViewDidEndDecelerating方法中更改UIPageControl的numberOfPages與currentPage。
/** 手指滑動(dòng)屏幕時(shí)，視圖停止?jié)L動(dòng)會(huì)調(diào)用此方法 */
- (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 - 注冊(cè)cell
/**
注冊(cè)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 實(shí)現(xiàn)表情的排列UICollectionViewFlowLayout
由于emoji表情需要3行8列，自定義貼圖表情需要2行4列排列。我這里實(shí)現(xiàn)一下UICollectionViewFlowLayout
要在layoutAttributesForItemAtIndexPath中區(qū)分，如果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;
}
// 根據(jù) item 計(jì)算目標(biāo)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;
}
}
// 根據(jù)偏移量計(jì)算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實(shí)現(xiàn)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的序號(hào)
*/
@property (nonatomic, strong) NSString *cellNumber;
/**
按照序號(hào)，從小到大
@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);
}
/**
按照序號(hào)，從小到大
@param cell cell
@return 排序
*/
- (NSComparisonResult)sortAscCells:(INEmotionSystemEmojiCell *)cell {
//先按照時(shí)間排序
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的序號(hào)
*/
@property (nonatomic, strong) NSString *cellNumber;
/**
按照序號(hào)，從小到大
@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);
}
/**
按照序號(hào)，從小到大
@param cell cell
@return 排序
*/
- (NSComparisonResult)sortAscCells:(INEmotionCustomEmojiCell *)cell {
//先按照時(shí)間排序
NSComparisonResult result = [self.cellNumber compare:cell.cellNumber];
return result;
}
@end
至此整個(gè)效果的代碼實(shí)現(xiàn)完了。
三、小結(jié)
iOS開發(fā)-聊天emoji表情與自定義動(dòng)圖表情左右滑動(dòng)控件.使用UICollectionView實(shí)現(xiàn)。文章來源：http://www.zghlxwxcb.cn/news/detail-616733.html
學(xué)習(xí)記錄，每天不停進(jìn)步。文章來源地址http://www.zghlxwxcb.cn/news/detail-616733.html
到了這里，關(guān)于iOS開發(fā)-聊天emoji表情與自定義動(dòng)圖表情左右滑動(dòng)控件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
