運(yùn)行效果:

運(yùn)行效果

類似這樣多行多排的 cell 用 UICollectionView 來(lái)實(shí)現(xiàn)還是很方便的，之前不太常常用到，對(duì) api 比較生疏，寫(xiě)了一個(gè)最基礎(chǔ)的 demo。

demo .m 所有的代碼

#import "ViewController.h"

@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, strong) UICollectionView                          *collectionView;
@property (nonatomic, strong) UICollectionViewFlowLayout                *layout;

@end



@implementation ViewController

#pragma mark - Life Circle
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.collectionView];
    [self.collectionView setFrame:CGRectMake(0,
                                             0,
                                             self.view.frame.size.width,
                                             self.view.frame.size.height)];
    
}


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

#pragma mark - Delegates
#pragma mark   UICollectionViewDelegate
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 4;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"UICollectionViewCell"
                                                                           forIndexPath:indexPath];
    [cell setBackgroundColor:[UIColor redColor]];
    
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"哎呀，點(diǎn)我");
}

- (UICollectionReusableView *) collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    UICollectionReusableView *reusableview = nil;
    
    if (kind == UICollectionElementKindSectionHeader) {
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
                                                                                  withReuseIdentifier:@"HeaderView"
                                                                                         forIndexPath:indexPath];
        [headerView setBackgroundColor:[UIColor yellowColor]];
        
        reusableview = headerView;
    }
    
    if (kind == UICollectionElementKindSectionFooter) {
        UICollectionReusableView *footerview = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter
                                                                                  withReuseIdentifier:@"FooterView"
                                                                                         forIndexPath:indexPath];
        [footerview setBackgroundColor:[UIColor orangeColor]];
        reusableview = footerview;
    }
    
    return reusableview;
}

#pragma mark - Getters & Setters
- (UICollectionView *)collectionView {
    if (_collectionView == nil) {
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero
                                             collectionViewLayout:self.layout];
        [_collectionView setBackgroundColor:[UIColor whiteColor]];
        [_collectionView setDelegate:self];
        [_collectionView setDataSource:self];
        [_collectionView registerClass:[UICollectionViewCell class]
            forCellWithReuseIdentifier:@"UICollectionViewCell"];
        [_collectionView registerClass:[UICollectionReusableView class]
            forSupplementaryViewOfKind:@"UICollectionElementKindSectionHeader"
                   withReuseIdentifier:@"HeaderView"];
        [_collectionView registerClass:[UICollectionReusableView class]
            forSupplementaryViewOfKind:@"UICollectionElementKindSectionFooter"
                   withReuseIdentifier:@"FooterView"];
    }
    
    return _collectionView;
}

- (UICollectionViewFlowLayout *)layout {
    if (_layout == nil) {
        _layout = [[UICollectionViewFlowLayout alloc] init];
        _layout.minimumInteritemSpacing = 16.0f;
        _layout.minimumLineSpacing = 16.0f;
        _layout.itemSize = CGSizeMake((self.view.frame.size.width - 48.0f)/2,
                                      100.0f);
        _layout.sectionInset = UIEdgeInsetsMake(16.0f,
                                                16.0f,
                                                16.0f,
                                                16.0f);
        _layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        _layout.headerReferenceSize = CGSizeMake(self.view.frame.size.width,
                                                 100.0f);
        _layout.footerReferenceSize = CGSizeMake(self.view.frame.size.width,
                                                 100.0f);
    }
    
    return _layout;
}