Pro :
SDWebImage第三方类库加载图片的使用:
1.在MRC 环境下 使用ARC 的类库:
-fobjc-arc (Build Phases ——> Compile Sources ——>凡是所有该类的都要加上)
2. 导入头文件
#import
"UIImageView+WebCache.h"
3.调用方法
[cell.
girlImageView
sd_setImageWithURL
:url
placeholderImage
:[
UIImage
imageNamed
:
@"
花粥
.jpg"
]];
4.清除缓存图片 因为调用第三方类库进行图片异步加载 会将加载的图片缓存在本地沙盒里面 在清除缓存的时候 需要调用以下的方法删除沙盒固定文件夹下所有加载的图片
[[SDImageCache sharedImageCache] clearDisk];
一. UICollectionView是一种新的数据展示方式, 简单的说可以把他理解成多列的UITableView.
#import "RootViewController.h"
@interface RootViewController ()<UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
// 点击去发现 UICollectionViewDelegateFlowLayout 该协议又遵守了 UICollectionViewDelegate 协议,实际上 UICollectionViewDelegateFlowLayout 是 UICollectionViewDelegate 的子协议
// 点击去发现 UICollectionViewDelegateFlowLayout 该协议又遵守了 UICollectionViewDelegate 协议,实际上 UICollectionViewDelegateFlowLayout 是 UICollectionViewDelegate 的子协议
@end
@implementation RootViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self addCollectionView];
// Do any additional setup after loading the view.
}
// 创建一个集合视图
- (void)addCollectionView
{
// UICollectionViewLayout 是一个抽象类 其功能是由子类来实现的 其自己本身没有什么具体功能
// 布局 (网格状布局)
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// 行边距 (相对于 上下滚动) 如果左右滑动 行边距就是列边距
layout.minimumLineSpacing = 30;
// 列边距 (相对于 上下滚动) 如果左右滑动 列边距就是行边距
layout.minimumInteritemSpacing = 20;
// 设置item 的宽高
layout.itemSize = CGSizeMake(150, 200);
// 设置滑动方向 默认垂直的
/*
UICollectionViewScrollDirectionVertical,
UICollectionViewScrollDirectionHorizontal
*/
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 设置表头和表尾
layout.headerReferenceSize = CGSizeMake(0, 90);
layout.footerReferenceSize = CGSizeMake(0, 100);
// 设置内边距 一定要记得
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
[super viewDidLoad];
[self addCollectionView];
// Do any additional setup after loading the view.
}
// 创建一个集合视图
- (void)addCollectionView
{
// UICollectionViewLayout 是一个抽象类 其功能是由子类来实现的 其自己本身没有什么具体功能
// 布局 (网格状布局)
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// 行边距 (相对于 上下滚动) 如果左右滑动 行边距就是列边距
layout.minimumLineSpacing = 30;
// 列边距 (相对于 上下滚动) 如果左右滑动 列边距就是行边距
layout.minimumInteritemSpacing = 20;
// 设置item 的宽高
layout.itemSize = CGSizeMake(150, 200);
// 设置滑动方向 默认垂直的
/*
UICollectionViewScrollDirectionVertical,
UICollectionViewScrollDirectionHorizontal
*/
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 设置表头和表尾
layout.headerReferenceSize = CGSizeMake(0, 90);
layout.footerReferenceSize = CGSizeMake(0, 100);
// 设置内边距 一定要记得
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:(layout)];
// 设置代理
collectionView.delegate = self;
collectionView.dataSource = self;
// 默认是黑色的
collectionView.backgroundColor = [UIColor whiteColor];
// 显示视图
self.view = collectionView;
[collectionView release];
[layout release];
// 注册cell
//参数1: 填写cell 样式所在的类名 (使用系统的就注册系统的类 自定义的就用自定义的类)
//参数2: identifier 标识符一定要一致
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];
// 注册表头和表尾
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeader"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooter"];
// 设置代理
collectionView.delegate = self;
collectionView.dataSource = self;
// 默认是黑色的
collectionView.backgroundColor = [UIColor whiteColor];
// 显示视图
self.view = collectionView;
[collectionView release];
[layout release];
// 注册cell
//参数1: 填写cell 样式所在的类名 (使用系统的就注册系统的类 自定义的就用自定义的类)
//参数2: identifier 标识符一定要一致
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];
// 注册表头和表尾
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeader"];
[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooter"];
}
// 必须实现的俩方法
// 返回每个分区的item数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
// 默认就一个分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
// 返回每个cell的样式
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 这个方法里面包括了 之前写的UITableView的一堆
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 这个方法里面包括了 之前写的UITableView的一堆
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
// 需要注意的是 必须要注册cell
// 系统没有像tableview 一样给提供给出默认布局方式 我们需要使用UICollectionViewCell 的话都是自定义再使用 根 tableView一样 所有的自定义控件都要加在contentView上面
cell.contentView.backgroundColor = [UIColor blueColor];
return cell;
}
// 设置表头表尾 通过设置代理方法
// Reusable 复用 重用 可重复
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
// 通过kind 来判断是表头 还是表尾
// 因为参数 kind 是字符串的 判断相同 不能用 '='
if ([kind isEqualToString: UICollectionElementKindSectionHeader]) {
// 返回表头
/**
* 复用 需要从复用的集合中得到
*/
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeader" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor grayColor];
return headerView;
} else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
// 返回表尾
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooter" forIndexPath:indexPath];
footerView.backgroundColor = [UIColor greenColor];
return footerView;
}
return nil;
cell.contentView.backgroundColor = [UIColor blueColor];
return cell;
}
// 设置表头表尾 通过设置代理方法
// Reusable 复用 重用 可重复
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
// 通过kind 来判断是表头 还是表尾
// 因为参数 kind 是字符串的 判断相同 不能用 '='
if ([kind isEqualToString: UICollectionElementKindSectionHeader]) {
// 返回表头
/**
* 复用 需要从复用的集合中得到
*/
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeader" forIndexPath:indexPath];
headerView.backgroundColor = [UIColor grayColor];
return headerView;
} else if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
// 返回表尾
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooter" forIndexPath:indexPath];
footerView.backgroundColor = [UIColor greenColor];
return footerView;
}
return nil;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"第%ld分区 第%ld个", (long)indexPath.section,(long)indexPath.row);
{
NSLog(@"第%ld分区 第%ld个", (long)indexPath.section,(long)indexPath.row);
}
二. 使用UICollectionView 加载一系列美女图片.
难点: 1. collectionView的布局
2. 每个Item 的自适应
3. 图片大小的自适应
4. 头视图和脚视图的自定义
5. 自定义Cell 的布局
实现:
1).加载数据
- (void)setUpData
{
NSString *json = [[NSBundle mainBundle]pathForResource:@"imageResource" ofType:@"json"];
NSData *data = [NSData dataWithContentsOfFile:json];
NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:(NSJSONReadingMutableContainers) error:nil];
self.dataArray = [NSMutableArray array];
for (NSDictionary *dic in array) {
GirlModel *model = [[GirlModel alloc]init];
[model setValuesForKeysWithDictionary:dic];
[self.dataArray addObject:model];
[model release];
}
{
NSString *json = [[NSBundle mainBundle]pathForResource:@"imageResource" ofType:@"json"];
NSData *data = [NSData dataWithContentsOfFile:json];
NSArray *array = [NSJSONSerialization JSONObjectWithData:data options:(NSJSONReadingMutableContainers) error:nil];
self.dataArray = [NSMutableArray array];
for (NSDictionary *dic in array) {
GirlModel *model = [[GirlModel alloc]init];
[model setValuesForKeysWithDictionary:dic];
[self.dataArray addObject:model];
[model release];
}
NSLog(@"%@", self.dataArray);
}
2).布局视图
- (void)addSubViews
{
// 先创建网格状视图
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// 设置一堆布局属性
// 行间距
layout.minimumLineSpacing = 10;
// 列间距
layout.minimumInteritemSpacing = 5;
// item 宽高
layout.itemSize = CGSizeMake(150, 150);
// 滑动方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 头
layout.headerReferenceSize = CGSizeMake(0, 50);
// 尾
layout.footerReferenceSize = CGSizeMake(0, 100);
// 内边距
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
// 利用layout 创建一个集合视图
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
[collectionView registerClass:[GirlCollectionViewCell class] forCellWithReuseIdentifier:@"GirlCell"];
[collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
[collectionView registerClass:[FooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];
[self.view addSubview:collectionView];
[collectionView release];
[layout release];
{
// 先创建网格状视图
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
// 设置一堆布局属性
// 行间距
layout.minimumLineSpacing = 10;
// 列间距
layout.minimumInteritemSpacing = 5;
// item 宽高
layout.itemSize = CGSizeMake(150, 150);
// 滑动方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 头
layout.headerReferenceSize = CGSizeMake(0, 50);
// 尾
layout.footerReferenceSize = CGSizeMake(0, 100);
// 内边距
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
// 利用layout 创建一个集合视图
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
[collectionView registerClass:[GirlCollectionViewCell class] forCellWithReuseIdentifier:@"GirlCell"];
[collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
[collectionView registerClass:[FooterCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];
[self.view addSubview:collectionView];
[collectionView release];
[layout release];
}
3).实现方法
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
NSLog(@"%ld", self.dataArray.count);
return self.dataArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
GirlCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GirlCell" forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor blackColor];
GirlModel *model = self.dataArray[indexPath.row];
NSString *path = model.thumbURL;
NSURL *url = [NSURL URLWithString:path];
[cell.girlImageView sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"花粥.jpg"]];
// 把model 传入cell 中
cell.model = model;
// NSURLRequest *request = [NSURLRequest requestWithURL:url];
// NSData *data = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
// cell.girlImageView.image = [UIImage imageWithData:data];
return cell;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
HeaderCollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header" forIndexPath:indexPath];
header.titleLabel.text = @"自古英雄出少年, 无奈英雄都折美人关";
header.titleLabel.textAlignment = NSTextAlignmentCenter;
return header;
} else {
FooterCollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer" forIndexPath:indexPath];
return footer;
}
return nil;
{
NSLog(@"%ld", self.dataArray.count);
return self.dataArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
GirlCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GirlCell" forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor blackColor];
GirlModel *model = self.dataArray[indexPath.row];
NSString *path = model.thumbURL;
NSURL *url = [NSURL URLWithString:path];
[cell.girlImageView sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"花粥.jpg"]];
// 把model 传入cell 中
cell.model = model;
// NSURLRequest *request = [NSURLRequest requestWithURL:url];
// NSData *data = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
// cell.girlImageView.image = [UIImage imageWithData:data];
return cell;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
HeaderCollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header" forIndexPath:indexPath];
header.titleLabel.text = @"自古英雄出少年, 无奈英雄都折美人关";
header.titleLabel.textAlignment = NSTextAlignmentCenter;
return header;
} else {
FooterCollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer" forIndexPath:indexPath];
return footer;
}
return nil;
}
// 重点:
// 返回 item 的宽高
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 先取出图片的宽高
// 取出对应的model 用对应的model取出宽高
GirlModel *model = self.dataArray[indexPath.row];
// CGFloat width = model.width;
// CGFloat height = model.height;
// 取出刻度 或者 比例
CGFloat scale = model.width / 150;
CGFloat newHeight = model.height / scale;
return CGSizeMake(150, newHeight);
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 先取出图片的宽高
// 取出对应的model 用对应的model取出宽高
GirlModel *model = self.dataArray[indexPath.row];
// CGFloat width = model.width;
// CGFloat height = model.height;
// 取出刻度 或者 比例
CGFloat scale = model.width / 150;
CGFloat newHeight = model.height / scale;
return CGSizeMake(150, newHeight);
}
4).自定义Cell
// 重写初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// CGFloat width = frame.size.width;
// CGFloat height = frame.size.height;
//
// // 添加自定义视图
// self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, width, height)];
// // 添加到显示视图上
// [self.contentView addSubview:self.girlImageView];
{
self = [super initWithFrame:frame];
if (self) {
// CGFloat width = frame.size.width;
// CGFloat height = frame.size.height;
//
// // 添加自定义视图
// self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, width, height)];
// // 添加到显示视图上
// [self.contentView addSubview:self.girlImageView];
// [_girlImageView release];
// 动态ImageView的高度
// CGRectZero frame 设置为 0
self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectZero];
[self.contentView addSubview:self.girlImageView];
// CGRectZero frame 设置为 0
self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectZero];
[self.contentView addSubview:self.girlImageView];
[_girlImageView release];
}
return self;
return self;
}
// 重写方法 进行重新布局子视图
// 改变视图的frame 触发该方法
- (void)layoutSubviews
{
// 先走下父类的方法
[super layoutSubviews];
// 重新给image一个宽高
CGFloat scale = self.model.width / 150;
CGFloat newHeight = self.model.height / scale;
self.girlImageView.frame = CGRectMake(0, 0, 150, newHeight);
- (void)layoutSubviews
{
// 先走下父类的方法
[super layoutSubviews];
// 重新给image一个宽高
CGFloat scale = self.model.width / 150;
CGFloat newHeight = self.model.height / scale;
self.girlImageView.frame = CGRectMake(0, 0, 150, newHeight);
}
// 重点: