美文网首页
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