iOS个人整理24-集合视图--UICollectionView

来源:互联网 发布:网络动漫产品黑名单 编辑:程序博客网 时间:2024/05/17 22:27

一、UICollection

瀑布流现在好像挺流行,怎么实现呢

用UICollectionView咯,还是先说这个集合视图

这个继承于UIScrollView,可以滚动,

UICollectionView上面也可以添加cell,但不用于UITableView,它可以设置cell的列和行,形成2维结构

就像这样



集合视图的布局稍微复杂了一点,需要一个专门的layout类来实现

创建layout和集合视图的初始化

    //集合视图的布局类初始化(系统)    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];        //设置layout    //设置单元格大小    flowLayout.itemSize = CGSizeMake(100, 100);        //设置最小行间距    flowLayout.minimumLineSpacing = 20;    //最小列间距    flowLayout.minimumInteritemSpacing = 30;        //设置分区间隔,与上下左右的距离    [flowLayout setSectionInset:UIEdgeInsetsMake(10, 10, 10, 10)];        //设置滑动方向    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;        //头部引用的尺寸//    flowLayout.headerReferenceSize = CGSizeMake(100, 100);    //尾部引用尺寸//    flowLayout.footerReferenceSize = CGSizeMake(100, 100);        //集合视图的初始化    UICollectionView *myCollectionView =[[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];    myCollectionView.tag = 1000;        //默认背景色为黑色    myCollectionView.backgroundColor =  [UIColor colorWithRed:200/255.0 green:233/255.0 blue:160/255.0 alpha:1];        //设置代理,和tableview一样有两个代理,三个代理方法    myCollectionView.dataSource = self;    myCollectionView.delegate = self;        //注册单元格    [myCollectionView registerClass:[CustomCollectionViewCell class] forCellWithReuseIdentifier:@"ITEM"];        myCollectionView.pagingEnabled = YES;        //添加

这里要导入三个协议

<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>


UICollectionView必须实现与tableview相似的两个方法

//每个分区下items数-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 9;}//填充cell-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    UICollectionView *myCollectionView = [self.view viewWithTag:1000];    //这里用了自定义的cell    CustomCollectionViewCell *cell = [myCollectionView dequeueReusableCellWithReuseIdentifier:@"ITEM" forIndexPath:indexPath];        cell.backgroundColor = [UIColor colorWithRed:247/255.0 green:162/255.0 blue:120/255.0 alpha:1];        cell.myImageView.image = [UIImage imageNamed:@"640.jpg"];    cell.titleLabel.text = @"面对疾风吧";    //注册头部视图    [myCollectionView registerClass:[CustomHeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier: @"headView"];        //注册底部视图    [myCollectionView registerClass:[CustomFooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];        return cell;}



layout的属性大多可以通过协议方法来动态设置

//分区间隔-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{    return UIEdgeInsetsMake(10, 10, 10, 10);}//最小行间距-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{    return 20;}//最小列间距-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{    return 20;}//头尾视图的大小-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{        return CGSizeMake(25, 50);}-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{    return CGSizeMake(25, 50);}


实现效果



0 0
原创粉丝点击