iOS- UICollectionView实现表情数据横排横滚动

1.问题提出

        在开发即时通讯项目时会遇到一个需求，那就是开发一个表情键盘。这时候实现的方法有好多种，大部分人会考虑用UIScrollView实现，但是当表情有200个的时候，UIScrollView的button难道就要创建200个么？考虑到按钮重用的，自然想到UICollectionView。想实现表情数据横排横滚动，可能会遇到设置cell的数据源的坑。

笔者数据源文件.plist长这样：

当时这样设置过:

    UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; //横排滚动    layout.itemSize = CGSizeMake(itemWidth, kOneItemHeight);- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    YHExpressionAddCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell1" forIndexPath:indexPath];    NSLog(@"%ld",(long)indexPath.item);    if (indexPath.item < self.dataArray.count) {        cell.model = self.dataArray[indexPath.item];    }    return cell;}

我理想的界面是：                              

    

        

 但实际运行的界面：           

  

   仔细想想，就是cellForItemAtIndexPath设置错误。那么如何正确地实现表情数据横排横滚动呢，请看下文。

2.解决方法

一：获取数据

变量：

kOnePageCount：一页显示的表情数量

emoticonGroupPageIndexs:各表情组起始页下标数组

emoticonGroupTotalPageCount：表情组总页数

情景：

假设一页显示20个表情，1个删除按钮。现在有两个表情组A,B.其中A有6页，B有2页

则

kOnePageCount = 20;

emoticonGroupPageIndexs = @[0,6];

emoticonGroupTotalPageCount = 8;

算法：

    _emoticonGroups = [YHExpressionHelper emoticonGroups];   //获取各表情组起始页下标数组    NSMutableArray *indexs = [NSMutableArray new];    NSUInteger index = 0;    for (YHEmoticonGroup *group in _emoticonGroups) {        [indexs addObject:@(index)];        NSUInteger count = ceil(group.emoticons.count / (float)kOnePageCount);        if (count == 0) count = 1;        index += count;    }    _emoticonGroupPageIndexs = indexs;       //表情组总页数    NSMutableArray *pageCounts = [NSMutableArray new];    _emoticonGroupTotalPageCount = 0;    for (YHEmoticonGroup *group in _emoticonGroups) {        NSUInteger pageCount = ceil(group.emoticons.count / (float)kOnePageCount);        if (pageCount == 0) pageCount = 1;        [pageCounts addObject:@(pageCount)];        _emoticonGroupTotalPageCount += pageCount;    }    _emoticonGroupPageCounts = pageCounts;

二:设置UICollectionView 数据源

//表情组总页数 (eg:有两个表情组A,B.其中A有6页，B有2页。则_emoticonGroupTotalPageCount = 8)- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {    return _emoticonGroupTotalPageCount;}//一页显示的表情数量- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return kOnePageCount + 1; // “1”是删除按钮}//设置Cell- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {        YHEmoticonCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];    if (indexPath.row == kOnePageCount) {        cell.isDelete = YES;        cell.emoticon = nil;    } else {        cell.isDelete = NO;        cell.emoticon = [self _emoticonForIndexPath:indexPath];    }    return cell;}- (YHEmoticon *)_emoticonForIndexPath:(NSIndexPath *)indexPath {    NSUInteger section = indexPath.section;    for (NSInteger i = _emoticonGroupPageIndexs.count - 1; i >= 0; i--) {        NSNumber *pageIndex = _emoticonGroupPageIndexs[i];        if (section >= pageIndex.unsignedIntegerValue) {            YHEmoticonGroup *group = _emoticonGroups[i];            NSUInteger page = section - pageIndex.unsignedIntegerValue;            NSUInteger index = page * kOnePageCount + indexPath.row;                        // transpose line/row            NSUInteger ip = index / kOnePageCount;            NSUInteger ii = index % kOnePageCount;            NSUInteger reIndex = (ii % 3) * 7 + (ii / 3);            index = reIndex + ip * kOnePageCount;                        if (index < group.emoticons.count) {                return group.emoticons[index];            } else {                return nil;            }        }    }    return nil;}

DuangDuang，成功运行并显示出我想要的界面。

另外可以参考我的Demo：(喜欢的点个赞哦O(∩_∩)O哈哈哈~)

仿微信表情键盘