zoukankan      html  css  js  c++  java
  • UICollectionView布局功能

    UIConllectionView和UITableView类似,也是展示数据,但不同于UITableView那种规则的布局,UICollectionView可以实现不规则的布局,即瀑布流。

    创建UICollectionView

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:layout];

    集合视图的创建,必须要指定布局,如果没有布局,显示不了任何东西,即layout。

     //创建一个布局对象,采用系统布局类UICollectinviewFlowLayout
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    因为是系统的布局类,所以也是规则的,但可以自定义FlowLayout的,可以根据自己的需求,来创建不规则的网格。

    可以对各个的布局细节分别进行设置

    //设置最小的行间距
        layout.minimumLineSpacing = 20;
        //设置item与item之间的间距
        layout.minimumInteritemSpacing = 10;
        
        //集合视图的分区间隔               //四个值  上左下右
        layout.sectionInset = UIEdgeInsetsMake(20, 10, 10, 10);
        
        //设置集合视图的滑动方向
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;// 向下
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;  // 向右
        CGFloat totalWidth = self.view.frame.size.width;
        //设置每一个item的尺寸大小
    //    layout.itemSize = CGSizeMake((totalWidth - 40) / 3, 80);

    当然,签订协议之后也可以通过方法进行设置

    说到协议 ,协议 分为两个部分,数据源协议UICollectionViewDelegateSource和代理协议UICollectionViewDelegate

    因为涉及到布局,也会签订的布局协议UICollectionViewDelegateFlowLayout

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
        return CGSizeMake((kWidth - 40) / 3, 100);
    }
    - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
        return UIEdgeInsetsMake(0, 0, 0, 0);
    }
    
    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
        return 20;
    }
    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
        return 20;
    }  

    UICollectionViewDataSource和UITableView一样,也有两个必须要实现的方法

    //显示个数
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        return 50;
    }
    //每个cell显示的内容
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
        cell.contentView.backgroundColor = [UIColor colorWithRed:kColor green:kColor blue:kColor alpha:1.0];
        cell.numberLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
        return cell;
    }

    我这边cell的显示内容是显示一个Label。自定义cell,来设置label的格式。

    同UITableView一样,每个item都可以点击,触发 方法

    //item点击之后触发的方法
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
        NSLog(@"分区数%ld, 行数%ld",indexPath.section, indexPath.row);
    }

    值得注意的是,集合视图不像表视图那样,集合视图,如果想显示内容,就必须注册cell

    //集合视图如果想要显示内容,就必须将cell进行注册
        [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"reuse"];

    注意:

    集合视图的不规则布局在日常使用还是比较频繁的,因为每个空间布局都不一定会是规则,也会有差别,通过自定义FlowLayout..来显示不同的布局

  • 相关阅读:
    MVC5个人用户账户身份验证集成google和facebook的OAuth2登陆
    2016.8.5
    2016.7.29
    2016.7.25
    如何将返回的JSon字符串用MAP格式读取
    代码里获得系统时间写法
    Mybatis中<![cdata[ ]]>
    Orcal语法Merge into用法
    Page.IsPostBack属性
    Android之打开闪光灯关键代码
  • 原文地址:https://www.cnblogs.com/xueyao/p/5186764.html
Copyright © 2011-2022 走看看