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传值
单例传值
原文:http://www.cnblogs.com/OrangesChen/p/4976059.html