IOS6-UICollectionViewController
1.关于UICollectionView横向滑动分页的问题
首先UICollectionView的布局是由UICollectionViewLayout决定。但使用UICollectionViewFlowLayout设置横向滑动的时候，item会以向下排列的顺序往后排，第二点，collectionView总的滑动范围，由每一个UICollectionViewLayout的itemSize决定，设置contentSize无效,需要通过继承UICollectionViewLayout自定义布局。
CollectViewController.h
@interface CollectViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate> @property(nonatomic,retain)NSMutableArray *dataSource; @property(nonatomic,retain)UICollectionView *myCollectionView;//类似于UITableView
@end
CollectViewController.m
#import "CollectViewController.h" #import "CollectCell.h" #import "CollectLayout.h" @interface CollectViewController () @end @implementation CollectViewController - (void)viewDidLoad { [super viewDidLoad]; UIImageView *bgImageVeiw = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"sharebg"]]; CollectLayout *rac = [[CollectLayout alloc]init]; self.myCollectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:rac];//根据位置大小和collectView布局初始化 [self.myCollectionView registerClass:[CollectCell class] forCellWithReuseIdentifier:@"customCell"];//设置cell的类型 self.myCollectionView.delegate = self; self.myCollectionView.dataSource = self; [self.view addSubview:self.myCollectionView]; self.myCollectionView.backgroundView = bgImageVeiw; self.dataSource = [NSMutableArray arrayWithCapacity:30]; for (int i = 1; i <= 20; i++) { NSDictionary *dic = @{@"imageName":[NSString stringWithFormat:@"%d.jpg",i],@"titleName":[NSString stringWithFormat:@"%d",i]}; [self.dataSource addObject:dic]; } } -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return self.dataSource.count/2;//section的个数 } -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 2;//每个section有2列 } -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { CollectCell *collectionCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"customCell" forIndexPath:indexPath]; if (!collectionCell) { return nil; } NSString *imageName = [[self.dataSource objectAtIndex:(indexPath.section*2+indexPath.row)] objectForKey:@"imageName"]; NSString *titleName = [[self.dataSource objectAtIndex:(indexPath.section*2+indexPath.row)] objectForKey:@"titleName"]; collectionCell.collectImageView.image = [UIImage imageNamed:imageName]; collectionCell.collectContent.text = titleName; return collectionCell; } @end
CollectLayout.m(作用：对CollectionView布局)
#import "CollectLayout.h" @implementation CollectLayout -(id)init { self = [super init]; if (self) { self.itemSize = CGSizeMake(150, 150); // self.scrollDirection = UICollectionViewScrollDirectionHorizontal; self.sectionInset = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0); self.minimumLineSpacing = 50.0; self.minimumInteritemSpacing = 0.0; } return self; } @end
CollectCell.h（类似于UITableCell）
@interface CollectCell : UICollectionViewCell @property(nonatomic,retain)UIImageView *collectImageView; @property(nonatomic,retain)UILabel *collectContent; @end
CollectCell.m
#import "CollectCell.h" @implementation CollectCell - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.frame = CGRectMake(0, 0, 150, 150); UIImageView *bgImageView =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"BookShelfCell"]]; bgImageView.frame = CGRectMake(0, 0,150,150); [self.contentView addSubview:bgImageView]; self.collectImageView = [[UIImageView alloc]initWithFrame:CGRectMake(25,10, 100, 100)]; [self.contentView addSubview:self.collectImageView]; self.collectContent = [[UILabel alloc]initWithFrame:CGRectMake(0, 110,150,30)]; self.collectContent.textAlignment = NSTextAlignmentCenter; [self.contentView addSubview:self.collectContent]; } return self; } @end
part2
#import "ViewController.h" @interface JSCollectionViewCell : UICollectionViewCell @property(nonatomic,strong)UILabel *textLabel; @property(nonatomic,strong)UIImageView *accessoryView; -(void)removeAccessoryImageView; @end @implementation JSCollectionViewCell -(instancetype)initWithFrame:(CGRect)frame{ if (self=[super initWithFrame:frame]) { _textLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)]; _textLabel.textAlignment = NSTextAlignmentCenter; [self addSubview:_textLabel]; } return self; } -(void)removeAccessoryImageView{ if (_accessoryView) { [_accessoryView removeFromSuperview]; } } -(void)setAccessoryView:(UIImageView *)accessoryView{ [self removeFromSuperview];//清理图片缓冲 _accessoryView = accessoryView; _accessoryView.frame = CGRectMake(self.frame.size.width-10-16, (self.frame.size.height-12)/2, 16, 12);//离父视图10个像素,13 [self addSubview:_accessoryView]; } @end //////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// @interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate> @property(nonatomic,retain)UICollectionView *collectionView; @property(nonatomic,retain)NSMutableArray *data; @property(nonatomic,retain)NSString *currentTitle; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self p_initUI]; _data = [NSMutableArray arrayWithObjects:@"不限人数", @"单人餐", @"双人餐", @"3~4人餐", @"不限人数2", @"单人餐2", @"双人餐2", @"3~4人餐2",@"不限人数3", @"单人餐3", @"双人餐3", @"3~4人餐3",nil]; } -(void)p_initUI{ UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init]; flowLayout.minimumInteritemSpacing = 0; _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 65, 320,200) collectionViewLayout:flowLayout]; [_collectionView registerClass:[JSCollectionViewCell class] forCellWithReuseIdentifier:@"CollectionCell"]; _collectionView.backgroundColor = [UIColor groupTableViewBackgroundColor]; _collectionView.dataSource = self; _collectionView.delegate = self; [self.view addSubview:_collectionView]; } #pragma mark --UICollectionViewDataSource -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 1; } -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return _data.count; } -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ static NSString *collectIdentitfer = @"CollectionCell"; JSCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:collectIdentitfer forIndexPath:indexPath]; cell.textLabel.text = [_data objectAtIndex:indexPath.row]; cell.backgroundColor = [UIColor whiteColor]; cell.textLabel.font = [UIFont systemFontOfSize:14]; if ([self.currentTitle isEqualToString:cell.textLabel.text]) { cell.accessoryView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"ico_make"]]; }else{ [cell removeAccessoryImageView]; } return cell; } #pragma mark --UICollectionViewDelegateFlowLayout - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake((collectionView.frame.size.width-1)/2, 38);//想要设置单独定义某个Cell的尺寸(collectionView.frame.size.width-1)/2 } -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(0, 0, 1,0.5);//设置cell边框空隙 } #pragma mark --UICollectionViewDelegate -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"titles = %@",[_data objectAtIndex:indexPath.item]); self.currentTitle = [_data objectAtIndex:indexPath.item]; [_collectionView reloadData]; } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{ return 0.5;//设定全局的行间距，如果想要设定指定区内Cell的最小行距 } @end
3.添加区间头,区间头需要是UICollectionReusableView的子类
[_collectionView registerClass:[CollectionHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"setionHead"];
.
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ if ([kind isEqualToString:UICollectionElementKindSectionHeader]) { CollectionHeadView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"setionHead" forIndexPath:indexPath]; if (headView==nil) { headView =[[CollectionHeadView alloc]initWithFrame:CGRectMake(0, 0,CGRectGetWidth(self.frame), 40)]; } return headView; }else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) { return nil; } return nil; } -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{ return CGSizeMake(CGRectGetWidth(self.frame), 40); }
4.对UICollectionView自定义布局，继承UICollectionViewLayout，重载一些方法
1.-(void)prepareLayout 准备布局方法，初始化一些布局用的参数。
2.-(CGSize)collectionViewContentSize 设置显示范围，是否支持滚动和滚动方向在该方法设置。
3.-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect 设置多少个UICollectionViewLayoutAttributes。通过N个indexPath返回的是包含UICollectionViewLayoutAttributes的NSArray，UICollectionViewLayoutAttributes可以是cell、背景图、区间头尾信息。通过不同的初始化方法可以得到不同类型的：
layoutAttributesForCellWithIndexPath:
layoutAttributesForSupplementaryViewOfKind:withIndexPath:
layoutAttributesForDecorationViewOfKind:withIndexPath:
4.-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath _)indexPath 设置cell的布局
5.-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds 当边界发生改变时，是否应该刷新布局
例子：添加背景装饰
#import "CustomLayout.h" #import "CollectionDecorationView.h" @implementation CustomLayout - (void)prepareLayout{ [super prepareLayout]; //注册装饰CollectionDecorationView，继承UICollectionReusableView [self registerClass:[CollectionDecorationView class] forDecorationViewOfKind:@"CDV"]; } //设置显示范围 -(CGSize)collectionViewContentSize{ return self.collectionView.frame.size; } //设置多少个背景装饰 -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{ NSMutableArray* attributes = [NSMutableArray array]; //把Decoration View的布局加入可见区域布局。 NSIndexPath* indexPath = [NSIndexPath indexPathForItem:0 inSection:0]; [attributes addObject:[self layoutAttributesForDecorationViewOfKind:@"CDV"atIndexPath:indexPath]]; return attributes; } //设置背景装饰的布局 -(UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath{ UICollectionViewLayoutAttributes *att = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:elementKind withIndexPath:indexPath]; att.frame = self.collectionView.frame; return att; } @end
