美文网首页
about UICollectionView实例[Basic]

about UICollectionView实例[Basic]

作者: wsgdrfz | 来源:发表于2015-11-19 10:41 被阅读415次

    本文是通过一个实例来了解如何使用UICollectionView,并在文章的最后加上了常用的方法

    UICollectionView 和 UICollectionViewController 用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView 和 UITableViewController 类。
    使用UICollectionView 必须实现UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout这三个协议。


    下面将通过一个例子,来具体介绍

    • 自定义Cell

      1. 新建类CollectionViewCell继承自UICollectionViewCell 并勾上Also create XIB file
        image
        新建后出现三个文件CollectionViewCell.h、CollectionViewCell.m、CollectionViewCell.xib
      2. 点击CollectionViewCell.xib,改变cell大小为200*60
        image
      3. 在CollectionViewCell.xib的CollectionCell中添加一个ImageView和一个Label
        image
      4. 创建imageView与Label的映射


        image
        image
      5. 选中CollectionViewCell.m , 重写init方法
      self = [super initWithFrame:frame];
      if (self) {
          // 初始化时加载collectionCell.xib文件
          NSArray *arrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"CollectionViewCell" owner:self options:nil];
          // 如果路径不存在,return nil
          if (arrayOfViews.count < 1){
              return nil;
          }
          // 如果xib中view不属于UICollectionViewCell类,return nil
          if (![[arrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]]){
              return nil;
          }
          // 加载nib
          self = [arrayOfViews objectAtIndex:0];
      }
      return self;
      } ```
      6. 选中CollectionViewCell.xib 修改其identifier为CollectionCell
      
      
    • 定义UICollectionView

      1. 拖动一个Collection View到指定ViewController的View上
      2. 连线dataSource和delegate,并创建映射,命名为CollectionView
        连线dataSource和delegate:选择collectionView按住CTRL键,拉至ViewController处
      3. 选中Collection View Cell 拉动大小至 200*60
      4. 选中CollectionViewCell,修改Class,继承自CollectionCell
      5. 在ViewDidLoad方法中声明Cell的类,在ViewDidLoad方法中添加,此句不声明,将无法加载,程序崩溃
        其中CollectionCell为cell的Identifier

    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"CollectionCell"];6. 选择十张照片拉入Assets.xcassets 这里我拉入的格式为.jpg 名称1~10 7. 在xxxViewController.h中声明代理
    @interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>```
    8. 在.m文件中实现代理方法

    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
      //返回每个section中item的个数
      return 10;
    }
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
      CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath]; 
      //图片名称
      NSString *imageToLoad = [NSString stringWithFormat:@"%d.jpg", indexPath.row];
      //加载图片
      cell.imageView.image = [UIImage imageNamed:imageToLoad];
      //设置label文字
      cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.row,(long)indexPath.section];
      
      return cell;
    }
    
    • 效果图如下

      image
    • 代码示例我已放在我的github上,欢迎下载

    • 一些常见代码

    pragma mark -- UICollectionViewDataSource

    //定义展示的UICollectionViewCell的个数
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    {
    return 30;
    }
    //定义展示的Section的个数
    -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
    {
    return 1;
    }
    //每个UICollectionView展示的内容
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString * CellIdentifier = @"GradientCell";
    UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

    cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f];  
    return cell;  
    

    }```

    #pragma mark --UICollectionViewDelegateFlowLayout   
    //定义每个UICollectionView 的大小  
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
    {  
        return CGSizeMake(96, 100);  
    }   
    //定义每个UICollectionView 的 margin  
    -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
    {  
        return UIEdgeInsetsMake(5, 5, 5, 5);  
    }
    #pragma mark --UICollectionViewDelegate   
    //UICollectionView被选中时调用的方法  
    -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  
    {  
        UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];  
        cell.backgroundColor = [UIColor whiteColor];  
    }```

    相关文章

      网友评论

          本文标题:about UICollectionView实例[Basic]

          本文链接:https://www.haomeiwen.com/subject/kqjlhttx.html