UI总结 - CollectionView

collectionView经常用在商品展示(淘宝),图片展示等APP上,作用和用法和tableView差不多,最大的不同点是:collectionView里面有个瀑布流的用法,它可以在竖直滑动的情况下一横排不知可以铺一个cell,它可以铺很多cell.我觉得以后在APP项目中会出现越来越多的collectionView.上代码:

#import "ViewController.h"
#import "MyCell.h"
#import "UIImageView+WebCache.h"
@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property(nonatomic, strong)NSMutableArray *arr;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //这是苹果给我们提供一种瀑布流
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    //layout设置item的尺寸
    layout.itemSize = CGSizeMake(120, 160);
    //最小的行间距
    layout.minimumLineSpacing = 30;
    //最小的列间距
    layout.minimumInteritemSpacing = 10;
    //修改滚动的方向,默认是垂直的方向
    //layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //距离屏幕四边的距离
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //layout.headerReferenceSize = CGSizeMake(200, 200);
    UICollectionView *collection = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:layout
                                    ];
    collection.delegate = self;
    collection.dataSource = self;
    collection.backgroundColor = [UIColor orangeColor];
    [self.view addSubview:collection];
    //注册
    [collection registerClass:[MyCell class] forCellWithReuseIdentifier:@"cell"];
    [self creatData];
}
-(void)creatData{
    NSString *path = [[NSBundle mainBundle]pathForResource:@"Data" ofType:@"json"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    self.arr = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return self.arr.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath] ;
    cell.contentView.backgroundColor = [UIColor cyanColor];
    cell.nameLable.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    [cell.picImage sd_setImageWithURL:[NSURL URLWithString:self.arr[indexPath.row][@"thumbURL"]]];
    return cell;
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%ld",indexPath.row);
}

下面是cell文件:

//cell.h文件
#import <UIKit/UIKit.h>

@interface MyCell : UICollectionViewCell
@property(nonatomic, retain)UILabel *nameLable;
@property(nonatomic, retain)UIImageView *picImage;
@end

//cell.m文件
#import "MyCell.h"

@implementation MyCell
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self creatView];
    }
    return self;
}

-(void)creatView{
    self.picImage = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.contentView.frame.size.width, self.contentView.frame.size.height - 50)];
    [self.contentView addSubview:self.picImage];
    
    self.nameLable = [[UILabel alloc]initWithFrame:CGRectMake(0, self.contentView.frame.size.height - 50, self.contentView.frame.size.width, 50)];
    [self.contentView addSubview:self.nameLable];
   
}


@end

2.gif

UI总结 - CollectionView

下面是cell文件:

推荐阅读更多精彩内容