cell 排序
橫向滑動(dòng)的時(shí)候，豎著排列而芥。
豎向滑動(dòng)的時(shí)候律罢，橫著排列
Object-C:
1、橫向分頁(yè)滾動(dòng)的UICollectionView棍丐，cell左右排版的簡(jiǎn)單實(shí)現(xiàn)
2误辑、橫向分頁(yè)滾動(dòng)的UICollectionView，cell左右排版
3歌逢、關(guān)于UICollectionView橫向分頁(yè)滾動(dòng),cell左右排版功能的實(shí)現(xiàn)
笨辦法 swift:思路更簡(jiǎn)單 UICollectionView 橫屏分頁(yè)巾钉，cell 左右排列 ios
小圓點(diǎn)：控件 UIPageControl
下面這種需求應(yīng)該是會(huì)經(jīng)常遇到的：
需求：固定高度一個(gè)區(qū)域，里面左右分頁(yè)顯示很多個(gè)圖標(biāo)秘案，在每一頁(yè)中的圖標(biāo)先從左往右排砰苍，排滿后再?gòu)纳贤屡拧＿@一頁(yè)排滿后排下一頁(yè)踏烙。
圖中這樣的：上面cell的順序我已經(jīng)標(biāo)出來(lái)了师骗。
image
像這樣的需求，第一反應(yīng)是用UICollectionView來(lái)寫讨惩，用UICollectionViewFlowLayout辟癌，然后設(shè)置為橫向的。但是荐捻，采用這種方式來(lái)寫黍少，出來(lái)的效果就會(huì)是這樣的：
image
那么還可以怎么實(shí)現(xiàn)？可以用大的cell包5個(gè)小圖標(biāo)在里面处面。這樣實(shí)現(xiàn)按說沒問題厂置，但是如果單個(gè)圖標(biāo)這里復(fù)雜一點(diǎn)，就需要調(diào)很久了魂角，而且如果要根據(jù)屏幕尺寸來(lái)定每行顯示的圖標(biāo)個(gè)數(shù)也很麻煩昵济。
子類化 UICollectionViewFlowLayout
1、KHomeNewRecommendFunctionFlowLayout.h
@interface KHomeNewRecommendFunctionFlowLayout : UICollectionViewFlowLayout
// 一行中 cell的個(gè)數(shù)
@property (nonatomic) NSUInteger itemCountPerRow;
// 一頁(yè)顯示多少行
@property (nonatomic) NSUInteger rowCount;
@end
2、KHomeNewRecommendFunctionFlowLayout.m
#import "KHomeNewRecommendFunctionFlowLayout.h"
@interface KHomeNewRecommendFunctionFlowLayout ()
@property (strong, nonatomic) NSMutableArray *allAttributes;
@end
@implementation KHomeNewRecommendFunctionFlowLayout
/**
這里只簡(jiǎn)單的實(shí)現(xiàn)只支持1個(gè)section访忿，而且section的items個(gè)數(shù)必須是 itemCountPerRow * rowCount 的整數(shù)倍瞧栗。這里需要在UICollectionView的代理里面做好數(shù)組越界檢查，防止數(shù)組越界造成崩潰海铆。
*/
- (void)prepareLayout {
[super prepareLayout];
self.allAttributes = [NSMutableArray arrayWithCapacity:0];
// iCount section==0 的cell個(gè)數(shù)
NSInteger iCount = [self.collectionView numberOfItemsInSection:0];
for (NSInteger i = 0; i < iCount; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.allAttributes addObject:attributes];
}
}
- (CGSize)collectionViewContentSize {
return [super collectionViewContentSize];
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
NSUInteger item = indexPath.item; // 第幾個(gè)item
NSUInteger x; // 該item的 x坐標(biāo)
NSUInteger y; // 該item的 y坐標(biāo)
[self targetPositionWithItem:item resultX:&x resultY:&y];
NSUInteger item2 = [self originItemAtX:x y:y];
NSIndexPath *newIndexPath = [NSIndexPath indexPathForItem:item2 inSection:indexPath.section];
UICollectionViewLayoutAttributes *newAttributes = [super layoutAttributesForItemAtIndexPath:newIndexPath];
newAttributes.indexPath = indexPath;
return newAttributes;
}
- (NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
NSMutableArray *tmps = [NSMutableArray arrayWithCapacity:0];
for (UICollectionViewLayoutAttributes *bute1 in attributes) {
for (UICollectionViewLayoutAttributes *bute2 in self.allAttributes) {
if (bute1.indexPath.item == bute2.indexPath.item) {
[tmps addObject:bute2];
break;
}
}
}
return tmps;
}
// 根據(jù) item 計(jì)算目標(biāo)item的位置 // (第幾個(gè)item)
// x 橫向偏移 y 豎向偏移
- (void)targetPositionWithItem:(NSUInteger)item
resultX:(NSUInteger *)x
resultY:(NSUInteger *)y {
NSUInteger page = item/(self.itemCountPerRow * self.rowCount); // 第幾頁(yè)(左右翻頁(yè))： 每行的cell個(gè)數(shù) * 幾行
NSUInteger itemX = item % self.itemCountPerRow + page * self.itemCountPerRow; //
NSUInteger itemY = item / self.itemCountPerRow - page * self.rowCount; //
if (x != NULL) {
*x = itemX;
}
if (y != NULL) {
*y = itemY;
}
}
// 根據(jù)偏移量計(jì)算item的origin
- (NSUInteger)originItemAtX:(NSUInteger)x
y:(NSUInteger)y {
NSUInteger item = x * self.rowCount + y;
return item;
}
@end
3迹恐、實(shí)現(xiàn):在數(shù)組沒有的可以添加幾個(gè)空白的cell數(shù)據(jù)
self.arySort = [NSMutableArray arrayWithObjects:
@{@"name" : @"學(xué)習(xí)", @"icon" : @"KHome_學(xué)習(xí)", @"tagIcon":@"KHome_學(xué)習(xí)圖標(biāo)", @"num":@"1"},
@{@"name" : @"考試", @"icon" : @"KHome_考試", @"tagIcon":@"KHome_考試圖標(biāo)", @"num":@"2"},
@{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"14"},
@{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"15"},
@{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"16"},
@{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"17"},
@{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"18"},
@{@"name":@"",@"icon":@"",@"tagIcon":@"",@"num":@"19"},
nil];
KHomeNewRecommendFunctionFlowLayout *layout = [[KHomeNewRecommendFunctionFlowLayout alloc] init];
layout.itemCountPerRow = 5; // 每行幾個(gè)item
layout.rowCount = 2; // 一頁(yè)顯示幾行
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.sectionFootersPinToVisibleBounds = NO;
layout.sectionHeadersPinToVisibleBounds = NO;
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
collectionView.backgroundColor = [UIColor whiteColor];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.showsHorizontalScrollIndicator = NO;
collectionView.pagingEnabled = YES;
[self.contentView addSubview:collectionView];
[collectionView makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.mas_top);
make.left.mas_equalTo(self.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*12.5);
make.right.mas_equalTo(self.mas_right).offset(-[UIScreen mainScreen].bounds.size.width/375*12.5);
make.bottom.mas_equalTo(self.mas_bottom);
}];
self.collectionView = collectionView;
[self.collectionView registerClass:[KHomeNewRecommendFunctionCollectionCell class] forCellWithReuseIdentifier:NSStringFromClass([KHomeNewRecommendFunctionCollectionCell class])];
//設(shè)置的邊界 12.5*2 + 10*2 + 20*4 + 50*5 = 375
需要注意的
我這個(gè)簡(jiǎn)單的實(shí)現(xiàn)只支持1個(gè)section，而且section的items個(gè)數(shù)必須是 itemCountPerRow * rowCount 的整數(shù)倍卧斟。這里需要在UICollectionView的代理里面做好數(shù)組越界檢查殴边，防止數(shù)組越界造成崩潰。
完整的實(shí)現(xiàn)以后再說吧珍语，現(xiàn)在這樣已經(jīng)滿足需求了锤岸。
