UICollectlionView继承自UIScrollerview,跟tableview的使用很相似。
下面是UIcollectionView的一些属性和代理方法。
#import "ViewController.h" #import "GoodsCollectionViewCell.h" @interface ViewController () @property(nonatomic,strong)NSMutableArray *dataArray; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor lightGrayColor]; _dataArray = [NSMutableArray array]; for (int i = 0; i < 10; i ++) { [_dataArray addObject:[NSString stringWithFormat:@"%d",i]]; } //确定是水平滚动,还是垂直滚动 UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc] init]; flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; self.collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout]; self.collectionView.dataSource=self; self.collectionView.delegate=self; [self.collectionView setBackgroundColor:[UIColor clearColor]]; //注册Cell,必须要有 [self.collectionView registerNib:[UINib nibWithNibName:@"GoodsCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"GoodsCollectionViewCell"]; [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"]; [self.view addSubview:self.collectionView]; } #pragma mark -- UICollectionViewDataSource //定义展示的UICollectionViewCell的个数 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 10; } //定义展示的Section的个数 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 2; } //每个UICollectionView展示的内容 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { GoodsCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GoodsCollectionViewCell" forIndexPath:indexPath]; cell.goodsImageView.image = [UIImage imageNamed:_dataArray[indexPath.row]]; cell.backgroundColor = [UIColor whiteColor]; return cell; } - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { UICollectionReusableView *headReusableView; //此处是headerView if (kind == UICollectionElementKindSectionHeader) { headReusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath]; //防止复用时候重复添加title [headReusableView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)]; if (indexPath.section == 0) { UIView *headerADView = [[ UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size. width, 100)]; headerADView.backgroundColor = [UIColor yellowColor]; UILabel *titleADLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 40, self.view.frame.size. width - 40, 20)]; titleADLabel.text = @"这个是广告位"; UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 110, self.view.frame.size. width - 40, 20)]; titleLabel.text = @"推荐商品"; headReusableView.backgroundColor = [UIColor colorWithWhite:.95 alpha:1]; [headerADView addSubview:titleADLabel]; [headReusableView addSubview:headerADView]; [headReusableView addSubview:titleLabel]; }else{ UILabel *titleLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 10, self.view.frame.size. width - 40, 20)]; titleLabel.text = @"推荐商品"; headReusableView.backgroundColor = [UIColor colorWithWhite:.95 alpha:1]; [headReusableView addSubview:titleLabel]; } } return headReusableView; } //执行的 headerView 代理 返回 headerView 的高度 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section { if (section == 0) { return CGSizeMake(375, 100 + 44); } return CGSizeMake(375, 44); } #pragma mark --UICollectionViewDelegateFlowLayout //定义每个Item 的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake(self.view.frame.size.width / 3.0, 154); } //定义每个UICollectionView 的 margin -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(0, 0, 0, 0); } #pragma mark --UICollectionViewDelegate //UICollectionView被选中时调用的方法 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { GoodsCollectionViewCell * cell = (GoodsCollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath]; //临时改变个颜色,看好,只是临时改变的。如果要永久改变,可以先改数据源,然后在cellForItemAtIndexPath中控制。(和UITableView差不多吧!O(∩_∩)O~) cell.backgroundColor = [UIColor greenColor]; } //返回这个UICollectionView是否可以被选择 -(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } // 两个cell之间的最小间距,是由API自动计算的,只有当间距小于该值时,cell会进行换行 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { return 0; } // 两行之间的最小间距 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 0; } @end
注意:
1.定义collectionView的头文件的时候,需要先注册。
2.collectionView每一行显示几个cell是根据cell 的宽度自动显示的。如:scrollerview的宽度为320,cell宽度为 90, 3 * 90 = 270 < 320 , 4 * 90 = 360 > 320,这个时候就显示3个cell。
3.每一行cell的位置的微调可以通过代理方法进行调整。