1.创建自定义UICollectionViewCell
选中工程,右键-New File…选择“Cocoa Touch Class”-Next,选择继承于UICollectionViewCell类,给个合理的名称CollectionViewCell,再Next完成。
在UICollectionViewCell中定义你所需要的控件
//图片 @property(strong,nonatomic)UIImageView *fruitImage; //标题 @property(strong,nonatomic)UILabel *fruitTitle; //价格 @property(strong,nonatomic)UILabel *priceLabel;
在UICollectionViewCell.m文件中重写
-(instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { _fruitImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth/2-1 , kScreenHeight/3.4)]; _fruitImage.image = [UIImage imageNamed:@"pic_fruit"]; [self.contentView addSubview:_fruitImage]; _fruitTitle = [[UILabel alloc]initWithFrame:CGRectMake(7, kScreenHeight/3.4 , kScreenWidth/2-6, 50)]; _fruitTitle.numberOfLines = 0; _fruitTitle.font = [UIFont systemFontOfSize:13]; _fruitTitle.textColor = [UIColor grayColor]; [self.contentView addSubview:_fruitTitle]; } return self; }
2.在ViewController.m文件中创建UICollectionView实例
//创建collectionView -(void)creatCollectionView{ //1.初始化layout UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; //设置collectionView滚动方向 // [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal]; //设置headerView的尺寸大小 // layout.headerReferenceSize = CGSizeMake(kScreenWidth, 100); //该方法也可以设置itemSize // layout.itemSize =CGSizeMake(0, 150); //2.初始化collectionView mainCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, kScreenHeight /1.1, kScreenWidth, kScreenHeight*1.6) collectionViewLayout:layout]; [self.upDownScrollView addSubview:mainCollectionView]; mainCollectionView.backgroundColor = [UIColor colorWithRed:235/255.0 green:235/255.0 blue:235/255.0 alpha:1]; //3.注册collectionViewCell //注意,此处的ReuseIdentifier 必须和 cellForItemAtIndexPath 方法中 一致 均为 cellId [mainCollectionView registerClass:[FruitCollectionViewCell class] forCellWithReuseIdentifier:@"cellId"]; // //注册headerView 此处的ReuseIdentifier 必须和 cellForItemAtIndexPath 方法中 一致 均为reusableView // [mainCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"]; //4.设置代理 mainCollectionView.delegate = self; mainCollectionView.dataSource = self; }
3.实现UICollectionView代理方法
#pragma mark collectionView代理方法 //返回section个数 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } //每个section的item个数 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 6; } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { FruitCollectionViewCell *cell = (FruitCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath]; if (indexPath.section == 0 && indexPath.row == 1 ) { cell.fruitTitle.text = @"正宗台湾产高雄特产热带香蕉好吃包邮123"; }else{ cell.fruitTitle.text = @"火爆进口马来西亚特产大金龙芒果包邮500g"; } cell.backgroundColor = [UIColor whiteColor]; return cell; } //设置每个item的尺寸 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake(kScreenWidth/2-4, kScreenHeight/2.5); } //footer的size //- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section //{ // return CGSizeMake(10, 10); //} //header的size //- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section //{ // return CGSizeMake(10, 10); //} //设置每个item的UIEdgeInsets - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(0, 2, 0, 2); } //设置每个item水平间距 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { return 2; } //设置每个item垂直间距 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 5; } //通过设置SupplementaryViewOfKind 来设置头部或者底部的view,其中 ReuseIdentifier 的值必须和 注册是填写的一致,本例都为 “reusableView” //- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath //{ // UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView" forIndexPath:indexPath]; // headerView.backgroundColor =[UIColor grayColor]; // UILabel *label = [[UILabel alloc] initWithFrame:headerView.bounds]; // label.text = @"这是collectionView的头部"; // label.font = [UIFont systemFontOfSize:20]; // [headerView addSubview:label]; // return headerView; //} //点击item方法 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { FruitCollectionViewCell *cell = (FruitCollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath]; NSString *msg = cell.fruitTitle.text; NSLog(@"%@",msg); }
看到这里相信你已经掌握了UICollectionView的使用方法啦!给大家看一下最终效果图
本文永久地址:http://blog.it985.com/17216.html
本文出自IT985博客 ,转载时请注明出处及相应链接。