IOS-UICollectionView

UICollectionView和UItableView一样都是继承自UIScrollView，因此它和UItableView非常的相似，但是它的布局比UItableView要丰富得多，可以多列布局，叠堆布局，圆形布局，弧形布局等等。

多列布局：弧形布局：

二.创建UICollectionView的步骤

1、需要一个layout(布局的样式)

 2、初始化UICollectionView  同时需要 注册cellID  一定要与创建cell的地方 是同一个cellID

 3.与tableView一样 有两个必须实现的方法（导入代理UICollectionViewDataSource）

 （1）每组里面有多少行（item）

（ 2）初始化cell的方法

三.代码

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
{
    NSArray * List;
}

@end
static NSString * cellID = @"cellid";
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor blackColor];
   List = @[@"陈3.jpg",@"陈2.jpg",@"是1.jpg",@"是3.jpg"];
  UICollectionViewFlowLayout * flowlayout = [[ UICollectionViewFlowLayout alloc]init];
    //    设置collectionView里面的元素的大小
    flowlayout.itemSize = CGSizeMake(WIDTH/4, HEIGHT/5);
//    设置两个元素之间的间距
    flowlayout.minimumInteritemSpacing = 10;
//    设置UIcollecionView 的滚动方向
//    设置了contentSize 当超出了uicollectionView 范围之后就可以滚动
    flowlayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    UICollectionView * collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 100, WIDTH, HEIGHT/5) collectionViewLayout:flowlayout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    [self.view addSubview:collectionView];
//    初始化UIcollectionView的时候 注册cell
    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:cellID];
  
}

#pragma mark--------collectionView必须实现的代理方法----------------------
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return List.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    cell.imageView.image = [UIImage imageNamed:List[indexPath.row]];
    cell.nameLabel.text = @"hehehe";
    return cell;
    
    
}

代码里面的CollectionViewCell是我自己自定义的cell，代码如下：

CollectionViewCell.h文件的代码

#import <UIKit/UIKit.h>

@interface CollectionViewCell : UICollectionViewCell
@property (nonatomic,retain) UIImageView *imageView;
@property (nonatomic,retain) UILabel *nameLabel;
@end

CollectionViewCell.m文件的代码

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        
        self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH/5, HEIGHT/5)];
        self.imageView.layer.cornerRadius = WIDTH/10;
        self.imageView.layer.masksToBounds = YES;
        self.imageView.layer.borderWidth = 2;
      
        self.imageView.layer.borderColor = [UIColor grayColor].CGColor;
        self.nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.imageView.frame)-20, WIDTH/5, 20)];
        self.nameLabel.textColor = [UIColor blackColor];
                self.nameLabel.textAlignment =  NSTextAlignmentCenter;
        [self.contentView addSubview:self.imageView];
          [self.contentView addSubview:self.nameLabel];
        
        
    }
    
    return self;
    
}

然后把CollectionViewCell.h导入ViewController.m就可以实现多列布局了

四.弧形布局

弧形布局，弧形布局是我利用第三方类写出来的

在github上面搜AWCollectionViewDialLayout就可以了，用法也写在上面。

就是在项目里导入

AWCollectionViewDialLayout.h 和 AWCollectionViewDialLayout.m文件

之后在ViewController.m里面写入

AWCollectionViewDialLayout *dialLayout = [[AWCollectionViewDialLayout alloc] initWithRadius:300.0  andAngularSpacing:20.0 andCellSize:CGSizeMake(10, 10) andAlignment:WHEELALIGNMENTCENTER andItemHeight:100  andXOffset:100];

代码的数据可以修改，产生出不同效果。然后其他步骤不变。