利用collectionView来创建视图（1）

UICollection在我们平时生活中用到了很多，很多阅读软件的书架一栏就由这个完成的，所以很有用，当你学会之后呢，就能做出你喜欢的样式了，话不多说来看看我们做的样式把。

效果图1

效果图2

基本思路：
1.创建UICollectoinView
2.调用代理，数据源方法
3.写数据源方法，给予数据
4.建立UICollectionViewCell构建视图

代码：

#import "TopView.h"
#import "TopCell.h"
#import "TopModel.h"
#import "UIViewExt.h"

#define  kScreenWidth [UIScreen mainScreen].bounds.size.width
#define  kScreenHeight [UIScreen mainScreen].bounds.size.height
@implementation TopView

-(instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    if (self != nil) {
        [self createCollectionView];
    }
    return self;
}

- (void)createCollectionView {
    //设置布局
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.minimumInteritemSpacing = 5;
    flowLayout.minimumLineSpacing = 10;
    flowLayout.itemSize = CGSizeMake(110, 150);
    //创建collectionView
    CGRect frame = CGRectMake(0, 0, kScreenWidth, kScreenHeight);
    UICollectionView *topCollectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout];
    topCollectionView.backgroundColor = [UIColor clearColor];
    
    topCollectionView.pagingEnabled = YES;
    topCollectionView.dataSource = self;
    topCollectionView.delegate = self;
    
    //注册单元格
    [topCollectionView registerClass:[TopCell class] forCellWithReuseIdentifier:@"top_Cell"];
    
    [self addSubview:topCollectionView];
    
    
}


#pragma mark -dataSource数据源设置必选方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return _data.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    TopCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"top_Cell" forIndexPath:indexPath];
    
    TopModel *model = self.data[indexPath.item];
    
    cell.model = model;
    
    return cell;
    
}

//偏移量设置
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    
    return UIEdgeInsetsMake(10, 10, 0, 10);
}


@end

cell.m

//
//  TopCell.h
//  MovieReader
//
//  Created by mac on 16/7/21.
//  Copyright © 2016年 mac. All rights reserved.
//

#import 
@class TopModel;
#import "starView.h"
@interface TopCell : UICollectionViewCell {
    
    UIImageView *_imageView;
    UILabel *_movieLabel;
    starView *_starView;
    UILabel *_averageLabels;
    
}

@property(nonatomic,strong)TopModel *model;

@end

cell.m

#import "TopCell.h"
#import "UIViewExt.h"
#import "UIImageView+WebCache.h"
#import "TopModel.h"
@implementation TopCell

-(instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    if (self != nil) {
        //布局
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.width , self.height -20)];
        
        //label的设置
        _movieLabel = [[UILabel alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(_imageView.frame)-20 ,_imageView.width, 20)];
        _movieLabel.textColor = [UIColor whiteColor];
        _movieLabel.backgroundColor = [UIColor blackColor];
        _movieLabel.alpha = 0.7;
        _movieLabel.textAlignment = NSTextAlignmentCenter;
        _movieLabel.font = [UIFont systemFontOfSize:14];
        
        //星星视图
        _starView = [[starView alloc] initWithFrame:CGRectMake(0,  _imageView.height, self.width -33, self.height - _imageView.height-5)];
        
        //评分
        _averageLabels = [[UILabel alloc] initWithFrame:CGRectMake(_starView.width +10,_imageView.height , 35, 20)];
        _averageLabels.font = [UIFont systemFontOfSize:10];
        _averageLabels.textColor = [UIColor orangeColor];
        _averageLabels.textAlignment = NSTextAlignmentNatural;

    }
    
    return self;
}


- (void)setModel:(TopModel *)model {
    
    _model = model;
    
    //设置图片
    NSString *imageName = [model.images objectForKey:@"medium"];
    NSURL *imageUrl= [NSURL URLWithString:imageName ];
    [_imageView sd_setImageWithURL:imageUrl];
    
    //电影标题
    _movieLabel.text = model.title;
    
    //星星视图
    _starView.rating = [[model.rating objectForKey:@"average"] floatValue];
    
    //评分
    _averageLabels.text = [NSString stringWithFormat:@"%.1lf", [[model.rating objectForKey:@"average"] floatValue]];
    //添加到collectionViewCell上（注意顺序）
    [self.contentView addSubview:_imageView];
    [self.contentView addSubview:_movieLabel];
    [self.contentView addSubview:_starView];
    [self.contentView addSubview:_averageLabels];
}

@end