标签:
1.创建一个UIView --- 创建UICollectionView放在view上 --- 在这之前先初始化UICollectionViewFlowLayout实例对象
#import <UIKit/UIKit.h> @interface BCView : UIView @property(nonatomic,strong)UICollectionView *collectionView; @property(nonatomic,strong)UICollectionViewFlowLayout *layout; @end #import "BCView.h" @implementation BCView -(instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self creatCollectionView]; } return self; } #pragma mark 创建collectionView - (void)creatCollectionView { // @property (nonatomic) CGSize headerReferenceSize; // @property (nonatomic) CGSize footerReferenceSize; // 创建flowLayout self.layout = [[UICollectionViewFlowLayout alloc] init]; // 设置属性布局 self.layout.footerReferenceSize = CGSizeMake(0, 40); self.layout.headerReferenceSize = CGSizeMake(0, 40); // 设置cell的大小 self.layout.itemSize = CGSizeMake(100, 115); // 设置cell之间的间隔 // 上下行之间的距离 self.layout.minimumLineSpacing = 10; // 左右列之间的距离 self.layout.minimumInteritemSpacing = 10; // 设置滑动方向 // layOut.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 设置item的两边距离 self.layout.sectionInset = UIEdgeInsetsMake(30, 18, 30, 18); // 创建UICollectionView的时候必须指定布局(UICollectionViewFlowLayout) self.collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:self.layout]; // 默认背景色---黑色 self.collectionView.backgroundColor = [UIColor groupTableViewBackgroundColor]; [self addSubview:self.collectionView]; } @end
2.UIViewController
》Json数据转模型数据
》根据模型数据来设置UICollectionViewCell
类似于UITableView先给collectionView注册UICollectionViewCell
// 注册 --- 给CollectionView注册cell // [self.rootView.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCel"]; [self.rootView.collectionView registerClass:[BCMyCollectionViewCell class] forCellWithReuseIdentifier:@"BCMyCollectionViewCell"];
》这里自定义cell
#import <UIKit/UIKit.h> @interface BCMyCollectionViewCell : UICollectionViewCell @property(nonatomic,strong)UIImageView *headerImageView; @property(nonatomic,strong)UILabel *textLabel; #pragma mark 创建view - (void)creatAllViews; - (void)updateFram; @end #import "BCMyCollectionViewCell.h" @implementation BCMyCollectionViewCell -(instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { //[self creatAllViews]; } return self; } #pragma mark 创建view - (void)creatAllViews { [self.headerImageView removeFromSuperview]; self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, (self.frame.size.height/5)*4)]; [self.contentView addSubview:self.headerImageView]; [self.textLabel removeFromSuperview]; self.textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, (self.frame.size.height/5)*4, self.frame.size.width, self.frame.size.height/5)]; // 居中 self.textLabel.textAlignment = NSTextAlignmentCenter; [self.contentView addSubview:self.textLabel]; } - (void)updateFram { self.headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, (self.frame.size.height/5)*4)]; self.textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, (self.frame.size.height/5)*4, self.frame.size.width, self.frame.size.height/5)]; }
》代理方法设置分组的个数,每个分组的item数量,cell显示的内容--- UICollectionViewDataSource,UICollectionViewDelegate
#pragma mark 代理方法 // 分组的个数 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 5; } // 设置item个数 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return self.dataArray.count; } // 设置展示的内容(设置cell) - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { static NSString *cell_id = @"BCMyCollectionViewCell"; // 去重用队列里面寻找cell BCMyCollectionViewCell *myCell = [collectionView dequeueReusableCellWithReuseIdentifier:cell_id forIndexPath:indexPath]; myCell.backgroundColor = [UIColor whiteColor]; //[myCell updateFram]; [myCell creatAllViews]; // NSLog(@"%@",cell.contentView); BCModel *model = self.dataArray[indexPath.row]; //self.rootView.layout [myCell.headerImageView sd_setImageWithURL:[NSURL URLWithString:model.thumbURL]]; myCell.textLabel.text = [NSString stringWithFormat:@"第%ld张",indexPath.row+1]; return myCell; }
》设置每个分组的头部和尾部 --- 先注册
// 注册头部和尾部 // 注册头部 --- UICollectionElementKindSectionHeader [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"]; // 注册尾部 [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
#pragma mark 代理方法 --- 设置 collectionView的头部和尾部 // collectionView的头部和尾部也需要重用 --- 先注册 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { // 头部 if (kind == UICollectionElementKindSectionHeader) { // 重用队列里面去找头部 UICollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath]; // 直接添加按钮 UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 2, 100, 60)]; [button setTitle:@"哈哈哈" forState:UIControlStateNormal]; [reusableView addSubview:button]; reusableView.backgroundColor = [UIColor lightGrayColor]; return reusableView; } // 重用队列去寻找尾部 UICollectionReusableView *reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath]; reusableView.backgroundColor = [UIColor redColor]; return reusableView; }
》设置cell的尺寸(大小)--- 优先级最高
#pragma mark 设置cell的大小 --- 设置每个cell的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { BCModel *model = self.dataArray[indexPath.row]; self.rootView.layout.itemSize = CGSizeMake([model.width floatValue]/4, [model.height floatValue]/4); return self.rootView.layout.itemSize; }
标签:
原文地址:http://www.cnblogs.com/bachl/p/4692426.html