實現類似微信表情包橫向滾動翻頁的功能，運用UICollectionView，自定義UICollectionViewFlowLayout，cell左右排版 ，支持多組Cell實現。
結合：https://blog.csdn.net/qiuhaozhou/article/details/54582741
下面是我所要的樣式的實現的代碼：
.h文件如下：
#import <UIKit/UIKit.h>
@interface JYECircleFlowLayout : UICollectionViewFlowLayout
// 一行中 cell 的個數
@property (nonatomic,assign) NSUInteger itemCountPerRow;
// 一頁顯示多少行
@property (nonatomic,assign) NSUInteger rowCount;
/** 列間距 */
@property (nonatomic, assign) CGFloat columnSpacing;
/** 行間距 */
@property (nonatomic, assign) CGFloat rowSpacing;
/** collectionView的內邊距 */
@property (nonatomic, assign) UIEdgeInsets edgeInsets;
/** 設置行列間距及collectionView的內邊距 */
- (void)setColumnSpacing:(CGFloat)columnSpacing rowSpacing:(CGFloat)rowSpacing edgeInsets:(UIEdgeInsets)edgeInsets;
@end
.m文件
#import "JYECircleFlowLayout.h"
@interface JYECircleFlowLayout () <UICollectionViewDelegateFlowLayout>
@property (strong, nonatomic) NSMutableArray *allAttributes;
@end
@implementation JYECircleFlowLayout
#pragma mark - Public
- (void)setColumnSpacing:(CGFloat)columnSpacing rowSpacing:(CGFloat)rowSpacing edgeInsets:(UIEdgeInsets)edgeInsets
{
self.columnSpacing = columnSpacing;
self.rowSpacing = rowSpacing;
self.edgeInsets = edgeInsets;
}
#pragma mark - 重寫父類方法
- (instancetype)init
{
self = [super init];
if (self) {
}
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];
}
}
/** 計算collectionView的滾動範圍 */
- (CGSize)collectionViewContentSize
{
NSInteger sections = [self.collectionView numberOfSections];
return CGSizeMake(JYEScreenWidth*sections, 0);
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSUInteger item = indexPath.item;
NSUInteger x;
NSUInteger y;
[self targetPositionWithItem:item resultX:&x resultY:&y];
NSUInteger item2 = [self originItemAtX:x y:y];
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:(NSUInteger)item resultX:(NSUInteger *)x resultY:(NSUInteger *)y{
NSUInteger page = item/(self.itemCountPerRow*self.rowCount);
NSUInteger theX = item % self.itemCountPerRow + page * self.itemCountPerRow;
NSUInteger theY = item / self.itemCountPerRow - page * self.rowCount;
if (x != NULL) {
*x = theX;
}
if (y != NULL) {
*y = theY;
}
}
// 根據偏移量計算item
- (NSUInteger)originItemAtX:(NSUInteger)x y:(NSUInteger)y{
NSUInteger item = x * self.rowCount + y;
return item;
}
@end
實現類似微信表情包橫向滾動翻頁的功能，運用UICollectionView，自定義UICollectionViewFlowLayout，cell左右排版 ，支持多組Cell實現。