iOS关于UICollectionView横向分页滚动,cell左右排版功能的实现

释放双眼,带上耳机,听听看~!

因为项目需求,需要做一个送礼物的界面,需求如下图,需要礼物界面数据后台获取,页数不定.可以左右滑动分页显示,每页中上排排完之后才能跳到下排进行排列 ,

第一页

第二页 .空缺的为白色collectionView背景.

 

面对这样的需求,首先想到是用UICollectionView来写,用UICollectionViewFlowLayout,然后设置为横向的。但是,采用这种方式来写(都是系统自带默认的布局),出来的效果就会是这样的:

 

cell 是上下排排列.

考虑到都使用系统自带的布局,无法解决这些问题,,查了下UICollectionViewLayoutAttributes可以改变collection view的布局..于是尝试 去重写这个UICollectionViewLayoutAttributes的方法 改变布局.下面是我的实现中的部分主要代码

// 使用自定义的LWLCollectionViewHorizontalLayout;


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


// 根据 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;

}

}

 

得出的效果图如下:

第一页

第二页

 

横向排列解决了.但是第二页个数不是刚好为整页铺满的时候.会有重用时候cell出现重复的bug. (第二页中出现第三个和第七个重复出现了)

这里我使用了新建空白的cell 填充满第二页 去解决这个问题..缺多少个就补充多少个 ,下面是我的实现中的部分主要代码

_items = @[ @"a", @"b", @"c", @"4", @"5", @"6", @"7", @"8", @"9", @"10", @"11", @"b", @"c", ];


NSLog(@"%f", _items.count / 8.0);

//  CGFloat pageC = _items.count / 4.0;

_pageCount = _items.count;

//一排显示四个,两排就是八个

while (_pageCount % 8 != 0) {

++_pageCount;

}


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

return _pageCount;

}

 

到此完美解决UICollectionView横向分页滚动,cell左右排版功能的问题 ..满足项目的功能需求

值得提醒的是在实际项目中要考虑到空白的cell 在被点击的时候(或者被反选disDidselected)可能会出现崩溃问题..需要做个判断.是空白cell就给忽略掉即可

~~~~如果你有更好的思路解决这个问题

 


demo 地址 https://github.com/GouWeiBaCao/CollectionViewDemoWithHorziDispaly      觉得有用就给个star

人已赞赏
iOS文章

swift之mutating关键字的使用

2020-2-19 13:56:03

iOS文章

IOS开发CGContextAddArc与CGContextAddArcToPoint参数解析

2020-2-19 15:55:42

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索