因为项目需求,需要做一个送礼物的界面,需求如下图,需要礼物界面数据后台获取,页数不定.可以左右滑动分页显示,每页中上排排完之后才能跳到下排进行排列 ,
第一页
第二页 .空缺的为白色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就给忽略掉即可
~~~~如果你有更好的思路解决这个问题
欢迎交流 qq 1062080667
本例参考了 http://www.jianshu.com/p/d1e6223a5eb4 的部分思路,并进行了完善,
demo 地址 https://github.com/GouWeiBaCao/CollectionViewDemoWithHorziDispaly 觉得有用就给个star
