天天看点

UICollectionViewController xcode6.1 自定义Cell

虽然这个早已不是新东西了,但是之前项目中一直没有机会用,只知道跟tableView原理相同。

弄了个自定义UICollectionViewCell的小DEMO:

(1)在storyboard中拖拽一个UICollectionViewController:

UICollectionViewController xcode6.1 自定义Cell

(2)新建RootCollectionViewController继承自UICollectionViewController

#import "RootCollectionViewController.h"
#import "RootCollectionViewCell.h"

@interface RootCollectionViewController ()

@end

@implementation RootCollectionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.clearsSelectionOnViewWillAppear = NO;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}


#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 20;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    static NSString * CellIdentifier = @"GradientCell";
    RootCollectionViewCell *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];
    [cell.lab setText:@"xxxx"];
    [cell.frontView setBackgroundColor:[UIColor redColor]];
    return cell;
}

#pragma mark <UICollectionViewDelegate>


@end
           

(3)新建RootCollectionViewCell继承自UICollectionViewCell,头文件如下,自定义两个控件

#import <UIKit/UIKit.h>

@interface RootCollectionViewCell : UICollectionViewCell

@property(nonatomic,weak)IBOutlet UILabel *lab;
@property(nonatomic,weak)IBOutlet UIView *frontView;

@end
           

(4)storyboard操作:

点击CollectionViewController,设置Class:

UICollectionViewController xcode6.1 自定义Cell

点击CollectionCell设置Class:

UICollectionViewController xcode6.1 自定义Cell

拖动一个View和lab到CollectionView上,设置约束为固定宽高上下居中:

UICollectionViewController xcode6.1 自定义Cell

点击左侧的CollectionCell,,将IBOutlet,连接到lab和frontView上:

UICollectionViewController xcode6.1 自定义Cell

设置大小及边距,当然了,xcode6以后,也可以根据不同的屏幕设置相应SizeClass下的边距:

UICollectionViewController xcode6.1 自定义Cell

(5)运行效果:

UICollectionViewController xcode6.1 自定义Cell

RootCollectionViewController