iOS开发--UICollectionView简单使用

简介
  • UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似。简单来说,UICollectionView是比UITbleView更加强大的一个UI控件,有如下几个方面:
    1、支持水平和垂直两种方向的布局
    2、通过layout配置方式进行布局
    3、类似于TableView中的cell特性外,CollectionView中的Item大小和位置可以自由定义
    4、通过layout布局回调的代理方法,可以动态的定制每个item的大小和collection的大体布局属性
    5、更加强大一点,完全自定义一套layout布局方案,可以实现意想不到的效果

下面说使用的时候有哪些需要的东西

  • 使用的时候,需要包含
UICollectionViewDataSource
UICollectionViewDelegate
UICollectionViewDelegateFlowLayout

这三个。

  • UICollectionView的初始化:
  - (UICollectionView *)collectionView
{
    if (_collectionView == nil) {
        //创建一个layout布局类
        UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];
        //设置布局方向为垂直流布局
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        //设置每个item的大小为100*100
        layout.itemSize = CGSizeMake(100, 100);
        // item距离四周的位置(上,左,下,右)
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        // item行与行之间的距离
        layout.minimumLineSpacing = 15;
        // item列与列之间的距离
        layout.minimumInteritemSpacing = 10;
        
        //创建collectionView 通过一个布局策略layout来创建
        _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0,0, WIDTH, HEIGHT) collectionViewLayout:layout];
        
        //代理设置
        _collectionView.delegate=self;
        _collectionView.dataSource=self;
        _collectionView.backgroundColor = [UIColor whiteColor];
        //注册item类型 这里使用系统的类型
        [_collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:cellId];
  //  注册头部脚部视图
 // [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerId];      
 // 注册脚部视图
 // [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerId];
    }
    return _collectionView;
}

这里我的初始化时用了懒加载的方式,在这个控制器中除了这个方法中的其他地方,用到collectionView,都要self.collectionView调用

接下来是代理方法
  • 首先是UICollectionViewDataSource
 //定义展示的UICollectionViewCell的个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.dataSourceArray.count;
}
//定义展示的Section的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
// 这里是类似于tableView的cell创建的地方
 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CollectionViewCell *cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];
    UIImage * JHimage = self.dataSourceArray[indexPath.row];
//    UIImage * JHImage = [UIImage imageNamed:imageNamed];
    cell.myImgView.image = JHimage;
    cell.close.hidden = self.isDelItem;
    cell.delegate = self;
//    cell.backgroundColor = arcColor;
    return cell;
}
  • 接下来是UICollectionViewDelegate
  - (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
// 点击高亮,高亮状态显示状况暂时关闭
//- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
//{
//    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
//    cell.backgroundColor = [UIColor redColor];
//}
// 选中某item
 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
   //    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
//    cell.selected = YES;
//    NSLog(@"选中第%ld组-----第%ld个",indexPath.section,indexPath.row);
//    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(10, 10, 60, 30)];
//    label.text = @"删  除";
//    cell.backgroundColor = [UIColor redColor];
//    label.textColor = [UIColor blackColor];
//    [cell addSubview:label];
//    [self.dataSourceArray addObject:indexPath];
}

这些是基本的用法,后续会分享下类似于tableView的cell的增加、删除、移动等内容。

  • 希望大家多多指正,这是我的公众号:


    iOS开发--UICollectionView简单使用_第1张图片
    MyCodingWorld.jpg

    有兴趣可以关注下谢谢

你可能感兴趣的:(iOS开发--UICollectionView简单使用)