CollectionViewController 集合视图

 CollectionViewController 集合视图

    UICollectionView, 继承于UIScollView, 可以滚动, 从iOS6才出现, 和UITableView的用法非常相似

    tableView

    dataSource: 显示数据

    delegate: 样式和触发方法

    collectionView

    dataSource: 显示数据

    delegate: 触发方法

    UICollectionViewLayout: 样式

    UICollectionViewLayout, 继承于NSObject, 控制集合视图的样式, 是一个抽象基类, 可以使用它的子类

   UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; 

static NSString *identifier = @"cell";
static NSString *header = @"Header";
static NSString *footer = @"Footer";

    cell大小, 默认(50, 50)
    flowLayout.itemSize = CGSizeMake(80, 100);
    滚动方向(水平滚动, 垂直排列; 垂直滚动, 水平排列)
     flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    最小行间距
    flowLayout.minimumLineSpacing = 20;
    最小列间距
    flowLayout.minimumInteritemSpacing = 10;
    分区间距
    flowLayout.sectionInset = UIEdgeInsetsMake(20, 10, 10, 10);
    区头大小
    flowLayout.headerReferenceSize = CGSizeMake(375, 50);
    区尾大小
    flowLayout.footerReferenceSize = CGSizeMake(375, 40);
    集合视图的创建
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    collectionView.backgroundColor = [UIColor colorWithRed:0.983 green:1.000 blue:0.598 alpha:1.000];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    注册cell
    [collectionView registerClass:[PhotoCell class] forCellWithReuseIdentifier:identifier];
    注册区头
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:header];
    注册区尾
    [collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footer];
    [self.view addSubview:collectionView];
    [collectionView release];

#pragma mark - UICollectionViewDataSource

分区的item个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 100;
}
展示cell的时候执行, 创建cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    从复用池找cell
    PhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
  UICollectionViewCell, 继承于UICollectionReusableView
//    cell.contentView.backgroundColor = [UIColor greenColor];

  tableView中的indexpath(section, row)
  collectionView中的indexpath(section, item)

    展示数据
    cell.imageView.image = [UIImage imageNamed:@"lufei.jpg"];
    cell.textLabel.text = [NSString stringWithFormat:@"路飞%ld", indexPath.item];
    return cell;
}

分区个数, 默认1
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 3;
}

创建附加视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    附加视图: 区头, 区尾
    kind, 用于区分区头和区尾
    区头: UICollectionElementKindSectionHeader
    区尾: UICollectionElementKindSectionFooter
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        区头
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:header forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor colorWithRed:0.750 green:0.984 blue:0.814 alpha:1.000];
        return headerView;
    } else {
        区尾
        FooterView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footer forIndexPath:indexPath];
        footerView.label.text = @"一场说走就走的旅行";
        return footerView;
    }
}

#pragma mark - UICollectionViewDelegate

选中那个item
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"%ld %ld", indexPath.section, indexPath.item);
}

#pragma mark - UICollectionViewDelegateFlowLayout

item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 0) {
        return CGSizeMake(170, 100);
    }
    return CGSizeMake(80, 100);
}

分区间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(10, 10, 10, 10);
}

效 果 图

源代码

storyboard上创建的视图

CollectionViewController.m

#import "CollectionViewController.h"
#import "JokeCell.h"
#import "Joke.h"
#import "UIImageView+WebCache.h"
@interface CollectionViewController ()
@property (nonatomic, retain) NSMutableArray *jokeArray;
@end
@implementation CollectionViewController
static NSString * const reuseIdentifier = @"Cell";

- (void)dealloc
{
    [_jokeArray release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self netWork];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)netWork {
    异步get请求
    NSURL *url = [NSURL URLWithString:@"http://mobile.ximalaya.com/m/category_tag_list?category=entertainment&device=iPhone&type=album"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        if (!data) {
            return;
        }
        JSON解析
        NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];
//            NSLog(@"%@", dic);
        self.jokeArray = [NSMutableArray arrayWithCapacity:11];
        for (NSDictionary *dictionary in dic[@"list"]) {
            Joke *joke = [[Joke alloc] initWithDictionary:dictionary];
            [self.jokeArray addObject:joke];
            [joke release];
        }
//        NSLog(@"%@ %ld", _jokeArray, self.jokeArray.count);
        重新加载数据
        [self.collectionView reloadData];
    }];
}

#pragma mark <UICollectionViewDataSource>

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

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.jokeArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    JokeCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    Joke *joke = self.jokeArray[indexPath.item];
    [cell.imageView sd_setImageWithURL:[NSURL URLWithString:joke.cover_path]];
    cell.titleLabel.text = joke.tname;
    return cell;
}

自定义cell
@interface JokeCell : UICollectionViewCell
@property (retain, nonatomic) IBOutlet UIImageView *imageView;
@property (retain, nonatomic) IBOutlet UILabel *titleLabel;
@end

数据封装

Joke.h
#import <Foundation/Foundation.h>
@interface Joke : NSObject
@property (nonatomic, retain) NSString *cover_path, *tname;
- (instancetype)initWithDictionary:(NSDictionary *)otherDictionary;
@end

Joke.m
#import "Joke.h"
@implementation Joke
- (void)dealloc
{
    [_cover_path release];
    [_tname release];
    [super dealloc];
}
- (NSString *)description
{
    return [NSString stringWithFormat:@"name: %@ cover_path: %@", _tname, _cover_path];
}
- (void)setValue:(id)value forUndefinedKey:(NSString *)key {

}
- (instancetype)initWithDictionary:(NSDictionary *)otherDictionary {
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:otherDictionary];
    }
    return self;
}
@end

总           结 

1.搭建页面和控件

页面: UIViewController, UITableViewController, UICollectionViewController

结合展示的内容, 选择系统控件, 如果系统没有提供, 就自定义控件

2.数据

a.数据来源(本地, 网络)

本地: 文件, 数据库

网络: API(GET, POST)

 b.数据模型(自定义类)

c.数据封装(数组, 字典, 自定义类组合起来)

3.展示数据

一般控件, 直接显示

tableView, collectionView, reloadData

4.页面间的切换(设计图)

UINavigationController, push/pop

UITabBarController

模态切换, present/dismiss

5.页面间传值

属性传值

delegate传值/block传值

单例传值