iOS開發--UICollectionView網格視圖

UICollectionViewFlowLayout: 確定網格視圖的佈局

上下左右的間距 : sectionInset(left, top, bottom, right)
每一個Cell的大小 : itemSize(width, height)
橫向Cell之間的間距 : minimumInteritemSpacing
縱向Cell之間的間距 : minimumLineSpacing

首先：定製Cell
#import "CollectionViewCell.h"

@implementation CollectionViewCell
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
      self.backgroundColor = [UIColor lightGrayColor];

        self.imgView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, CGRectGetWidth(self.frame)-10, CGRectGetHeight(self.frame)-10)];
        self.imgView.backgroundColor = [UIColor groupTableViewBackgroundColor];
        [self addSubview:self.imgView];

        self.text = [[UILabel alloc] initWithFrame:CGRectMake(5, CGRectGetMaxY(self.imgView.frame)-50, CGRectGetWidth(self.frame)-10, 20)];
        self.text.backgroundColor = [UIColor brownColor];
        self.text.textAlignment = NSTextAlignmentCenter;
        [self addSubview:self.text];

        self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
        self.btn.frame = CGRectMake(5, CGRectGetMaxY(self.text.frame), CGRectGetWidth(self.frame)-10, 30);
        [self.btn setBackgroundColor:[UIColor orangeColor]];
        [self.btn setTitle:@"按鈕" forState:UIControlStateNormal];
        [self addSubview:self.btn];
    }
    return self;
}

@end

#define fDeviceWidth [UIScreen mainScreen].bounds.size.width
#define fDeviceHeight [UIScreen mainScreen].bounds.size.height

#import "JCollectionController.h"
#import "CollectionViewCell.h"
#import "CustomHeaderView.h"

static const float fHeaderHeight = 200.0f;

@interface JCollectionController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
{
    CustomHeaderView *_headerView;
}
@end

@implementation JCollectionController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self setupCollectionView];

}

- (void)setupCollectionView
{
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
    //頭部大小
    flowLayout.headerReferenceSize = CGSizeMake(fDeviceWidth, fHeaderHeight);

    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, fDeviceWidth , fDeviceHeight) collectionViewLayout:flowLayout];

    //註冊Cell，必須要有 、、、註冊ReuseableView---頭部（尾部同理）
    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ReuseableView"];

    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];

    _headerView = [[CustomHeaderView alloc] initWithFrame:CGRectMake(5, 0, fDeviceWidth-10, fHeaderHeight)];
    [self.view addSubview:_headerView];
}

#pragma mark ---UICollectionViewDataSource
/**
 *  UICollectionViewCell的個數
 */
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}
/**
 *  section的個數
 */
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

/**
 *  每個UICollectionView展示的內容
 */
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * CellIdentifier = @"myCell";
    CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
    if (!cell) {
        NSLog(@"----------------");
    }
    cell.imgView.image = [UIImage imageNamed:@"aaa"];
    cell.text.text = [NSString stringWithFormat:@"cell-%ld",indexPath.row];
    return cell;
}
/**
 *  頭部顯示的內容
 */
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ReuseableView" forIndexPath:indexPath];
    [headerView addSubview:_headerView];
    return headerView;
}

#pragma mark --UICollectionViewDelegateFlowLayout
/**
 *  定義每個UICollectionView 的大小
 */
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGFloat spacing = 10.0;
    CGFloat itemWidth = (fDeviceWidth - spacing *3)/2.0;
    CGFloat itemHeight = itemWidth;
    return CGSizeMake(itemWidth,itemHeight);
}
/**
 *  定義每個UICollectionView 的 margin
 */
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(10.0, 10.0, 10.0, 10.0);
}
/**
 *  定義每個UICollectionView 的橫向間距
 */
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}
/**
 *  定義每個UICollectionView 的 豎向間距
 */
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}
#pragma mark --UICollectionViewDelegate
/**
 *  UICollectionView被選中時調用的方法
 */
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor whiteColor];
    NSLog(@"點擊：{區%ld,%ld個}寬：%f",indexPath.section,indexPath.row,cell.frame.origin.x);
}
/**
 *  返回這個UICollectionView是否可以被選擇
 */
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
@end