2023年12月1日发(作者：无线蓝牙耳机使用说明)

iosuicollectionview实现横向滚动

现在使⽤卡⽚效果的app很多，之前公司让实现⼀种卡⽚效果，就写了⼀篇关于实现卡⽚的⽂章。⽂章最后附有demo

实现上我选择了使⽤UICollectionView ；⽤UICollectionViewFlowLayout来定制样式；下⾯看看具体实现

效果

实现上我选择了使⽤UICollectionView ；⽤UICollectionViewFlowLayout来定制样式；下⾯看看具体实现

具体实现

1、ViViewController.m 代码实现

#import "ViewController.h"

#import "CollModel.h"

#define SCREEN_WIDTH [UIScreen mainScreen].

#define SCREEN_HEIGHT [UIScreen mainScreen].

#define SCREEN_RATE ([UIScreen mainScreen]./375.0)

#import "imageCell.h"

#import "LHHorizontalPageFlowlayout.h"

static NSString * const imageC = @"imageCell";

static NSString * const moreImageC = @"imageCell";

static const NSInteger kItemCountPerRow = 5; //每⾏显⽰5个

static const NSInteger kRowCount = 3; //每页显⽰⾏数

static float imageHeight = 80;//cell ⾼度

@interface ViewController ()

@property (nonatomic, strong) UICollectionView * collectionView;

@property (nonatomic, strong) NSMutableArray * modelArray;

@property (nonatomic, strong) UICollectionView * moreCollectionView;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

NSArray *appArray = [[self getDict] objectForKey:@"dictInfo"];

for (int i = 0; i < ; i++) {

NSDictionary * appDic = appArray[i];

CollModel * model = [[CollModel alloc]init];

= [appDic objectForKey:@"title"];

// UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];

// Direction = UICollectionViewScrollDirectionHorizontal;

mLineSpacing = 0;

mInteritemSpacing = 0;

_moreCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 300, [UIScreen mainScreen]., imageHeight * SCREEN_RATE * kRowCount) collectionViewLayout:layout];

_oundColor = [UIColor clearColor];

_ = 22;

_urce = self;

_te = self;

_s = NO;

_BounceHorizontal = YES;

_BounceVertical = NO;

_oundColor = [UIColor colorWithRed:186 / 255.0 green:186 / 255.0 blue:186 / 255.0 alpha:0.9];

_orizontalScrollIndicator = NO;

_erticalScrollIndicator = NO;

[ addSubview:_moreCollectionView];

[_moreCollectionView registerClass:[imageCell class] forCellWithReuseIdentifier:moreImageC];

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

return ;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

CollModel * model = rray[];

imageCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:imageC forIndexPath:indexPath];

del = model;

untPerRow = itemCountPerRow;

}

return self;

}

#pragma mark - 重写⽗类⽅法

- (instancetype)init

{

self = [super init];

if (self) {

[self setColumnSpacing:0 rowSpacing:0 edgeInsets:UIEdgeInsetsZero];

}

return self;

}

/** 布局前做⼀些准备⼯作 */

- (void)prepareLayout

{

[super prepareLayout];

if (utesArrayM && > 0) {

[utesArrayM removeAllObjects];

}

// 从collectionView中获取到有多少个item

NSInteger itemTotalCount = [tionView numberOfItemsInSection:0];

// 遍历出item的attributes,把它添加到管理它的属性数组中去

for (int i = 0; i < itemTotalCount; i++) {

NSIndexPath *indexpath = [NSIndexPath indexPathForItem:i inSection:0];

UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexpath];

[utesArrayM addObject:attributes];

}

}

/** 计算collectionView的滚动范围 */

- (CGSize)collectionViewContentSize

{

// 计算出item的宽度

CGFloat itemWidth = ( - - untPerRow * Spacing) / untPerRow;

// 从collectionView中获取到有多少个item

NSInteger itemTotalCount = [tionView numberOfItemsInSection:0];

// 理论上每页展⽰的item数⽬

NSInteger itemCount = nt * untPerRow;

// 余数（⽤于确定最后⼀页展⽰的item个数）

NSInteger remainder = itemTotalCount % itemCount;

// 除数（⽤于判断页数）

NSInteger pageNumber = itemTotalCount / itemCount;

// 总个数⼩于nt * untPerRow

if (itemTotalCount <= itemCount) {

@property (nonatomic,strong)NSString *title;

@property (nonatomic,strong)NSString *url;

@end