day15---UICollectionView

1.1 概念
UICollectionView是多行多列的形式下显示数据的一种控件,从UITableView演变而来,所以使用上大致与UITableView一样,但是比UITableView更加灵活,实现的效果更多样化;

1.2 UICollectionView与UITableView的异同点:
a 相同点:
UITableView:
.dataSource
.delegate
加载数据:三问(有几个分区?每个分区多少行?每行什么内容?)
响应用户:一答(选中某行后响应)
每个分区都有自己的头部视图,尾部视图;

    UICollectionView:
        .dataSource
        .delegate
    加载数据:三问(有几个分区?每个分区有多少项?每项显示什么内容?)
    响应用户:一答(选中某项后响应)
    每个分区有自己的头部,尾部视图;



b 不同点:
    1)  UICollectionView是以多行多列的形式展现数据
            UITableView是以单行单列的形式展现数据

    2)  UITableView只能默认是上下滚动
        UICollectionView即可以上下滚,也可以左右滚;
    
    3)  UITableViewCell 自带系统的四个样式,并且还提供了三种控件(头像,主标题,副标题)
        UICollectionViewCell 没有任何系统自定义好的样式,也没有系统提供的任何子控件,只提供了三个属性:设置背景颜色,设置背景视图,contentView; 

                                            【** 最大区别 **】
    4)  UITableView的每一行,在设定好行高以后,排布位置就固定了;
        UICollectionView需要明确的使用一个“布局对象”来对其中包含的所有向进行定位,其中布局对象,是从UICollectionViewLayout派生出来的子类对象,系统给我们默认提供了一个流式布局“UICollectionViewFlowLayout”,继承自UICollectionViewLayout; 
                        
【Demo】-【1-UICollectionView】                   
  • (void)viewDidLoad {
    [super viewDidLoad];

    //1.请求数据
    [self reloadData];

//2.创建UICollectionView
[self creatCollectionView];

}

-(void)reloadData
{
self.dataArray = [[MyModel requestData] mutableCopy];
}

-(void)creatCollectionView
{
self.automaticallyAdjustsScrollViewInsets = NO;

//流式布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//***************这只流式布局的相关属性
//1.单元格(项)的大小                           流式布局单元格大小决定了每行有几个项
layout.itemSize = CGSizeMake((screenBounds.size.width-60)/3, 180);
//2.每个单元格之间最小的间距
layout.minimumInteritemSpacing = 10;
//3.每行之间的最小间距
layout.minimumLineSpacing = 10;
//4.设置每个分区之间的边距
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
//5.设置滚动的方式(横向滚动/竖向滚动)
 collectionView即可以横向滚动,也可以竖向滚动
layout.scrollDirection = UICollectionViewScrollDirectionVertical;




//1.创建collectionView对象
UICollectionView *cView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, screenBounds.size.width, screenBounds.size.height-64) collectionViewLayout:layout];
cView.delegate = self;
cView.dataSource = self;
cView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:cView];

//提前注册cell
[cView registerClass:[MyCell class] forCellWithReuseIdentifier:@"Cell"];

//提前注册,头部/尾部视图
//第二个参数:表示注册的是头部视图?还是尾部视图?
[cView registerClass:[SectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
[cView registerClass:[SectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];

}

  • (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
    }

pragma mark -UICollectionViewDataSource

//1问 有多少个分区
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return self.dataArray.count;
}

//2问 每个分区有多少项
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return [self.dataArray[section] count];
}

//3问 每一项显示什么内容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//从复用池中取有没有符合要求的单元格,如果有,直接返回使用,如果没有,系统会根据之前注册的单元格,自动的创建一个单元格对象,并返回;
MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
//因为UICollectionViewCell是系统自带的cell,所以没有提供样式,没有提供对应的空间,只能设置相关属性;
cell.model = self.dataArray[indexPath.section][indexPath.row];

cell.backgroundColor = [UIColor orangeColor];


return cell;

}

//如果要给UICollectionView添加分区的头部,尾部视图
//注意:
//1.分区的头部,尾部视图必须是UICollectionReusableView类型的对象
//2.提前先注册头部,尾部视图的类型
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
//需要返回的是头部视图
//从复用池取出对应的头部视图
SectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"Header" forIndexPath:indexPath];
headerView.myLabel.text = [NSString stringWithFormat:@"我是第%ld分区的头部视图",indexPath.section+1];
return headerView;
}
//没有尾部视图,直接返回nil;
else if ([kind isEqualToString:UICollectionElementKindSectionFooter])
{
SectionHeaderView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"Footer" forIndexPath:indexPath];
footerView.myLabel.text = [NSString stringWithFormat:@"我是第%ld分区的尾部视图",indexPath.section+1];
return footerView;
}
return nil;
}

pragma mark -UICollectionViewDelegateFlowLayout

                                【** collectionView的头部尾部视图设置方法 **】

//设置头部视图的高度
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(collectionView.frame.size.width, 50);

}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeMake(collectionView.frame.size.width, 30);
}

pragma mark -UICollectionViewDelegate

//当选中某一个单元格,则相应
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
DetailViewController *detailView = [[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil];
detailView.model = self.dataArray[indexPath.section][indexPath.row];

detailView.block = ^(NSString *title){
    MyModel *model = self.dataArray[indexPath.section][indexPath.row];
    model.title = title;
    [collectionView reloadData]; 
};

[self.navigationController pushViewController:detailView animated:YES];

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • UITableView 表格视图一 UITableView1.1是什么?以列表的方式展示数据的一种控件,且继承自...
    037e3257fa3b阅读 260评论 0 1
  • 一、UICollectionView介绍 UICollectionView和UICollectionViewCon...
    无沣阅读 4,523评论 4 18
  • 近代以来,中国传统文化在西方文化的强烈冲击下,正在不断流失,令人堪忧。 昨天晚上,看到一个小视频,就是类似于过万圣...
    上善若水_张建国阅读 412评论 0 0
  • 昨天下午第一次给这个学生上课,晚上微信就收到了妈妈这样的反馈,早上妈妈打电话过来,学生说从此喜欢上了数学。这实在是...
    Ellis方阅读 235评论 0 0
  • 结果: enumerate还可以接收第二个参数,用于指定索引起始值,如: 结果:
    SingleDiego阅读 265评论 0 0