iOS开发系列 ---- UI(UICollectionView的使用)

本章实现效果:

本章我们依然使用MVC架构来实现UICollectionView

Model层:
HTDataSource.h

#import <Foundation/Foundation.h>

@interface HTDataSource : NSObject

+ (NSArray *)getInfo;

@end

HTDataSource.m

#import "HTDataSource.h"

@implementation HTDataSource

+ (NSArray *)getInfo {
    NSMutableArray * array = [[NSMutableArray alloc] init];
    for (int i = 0; i < 16; i++) {
        NSString * str = [NSString stringWithFormat:@"%d",i];
        [array addObject:str];
    }
    return array;
}

@end

View层:
HTCollectionViewCell.h

@interface HTCollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView * imageView;
@property (nonatomic, strong) UILabel * labelNum;

@end

HTCollectionViewCell.m

#import "HTCollectionViewCell.h"

@implementation HTCollectionViewCell

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

- (void)setupSubviews {
    //图片和我们的item一样大
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)];
    self.imageView.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.imageView];

    self.labelNum = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, 20)];
    self.labelNum .backgroundColor = [UIColor clearColor];
    self.labelNum .font = [UIFont systemFontOfSize:17];
    self.labelNum .textAlignment = NSTextAlignmentCenter;
    [self.contentView addSubview:self.labelNum ];
}

@end

ViewController层:
ViewController.m

#import "ViewController.h"
#import "HTDataSource.h"
#import "HTCollectionViewCell.h"

@interface ViewController ()<
UICollectionViewDataSource,
UICollectionViewDelegate,
UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) NSMutableArray *arrayDS;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self setupDatas];
    [self setupSubviews];
}

- (void)setupDatas {
    //拿到数据
    self.arrayDS = [[NSMutableArray alloc] initWithArray:[HTDataSource getInfo]];
}

- (void)setupSubviews {

    //通过UICollectionViewFlowLayout类决定滚动方向
    UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];
    //设置滑动方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    UICollectionView * collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, 568 - 20) collectionViewLayout:layout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:collectionView];

    //注册cell类
    [collectionView registerClass:[HTCollectionViewCell class] forCellWithReuseIdentifier:@"HTCollectionViewCell"];
}

#pragma mark - UICollectionViewDataSource
//有几个段数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 2;
}

//每个段数返回多少个item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return _arrayDS.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    HTCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"HTCollectionViewCell" forIndexPath:indexPath];
    cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",(long)indexPath.item]];
    cell.labelNum.text = _arrayDS[indexPath.item];
    return cell;
}

//设置item大小，默认是50x50
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(110, 110);
}

//设置距离屏幕上左下右的距离
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(5, 5, 5, 5);
}

//设置header的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
    return CGSizeMake(60, 60);
}

//设置footer的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
    return CGSizeMake(60, 60);
}

//设置水平间隙
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 10;
}

//设置垂直间隙
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 50;
}

@end

demo(内含图片)

好了，我们UI的教学课程到这里就结束了，感谢一直在默默关注我的小伙伴儿们，是你们的持续关注给了我写下去的动力。月底了，定一个博客小目标，5月完成网络部分的教学。