UI一揽子计划 21 （UICollectionView、SDWebImage第三方类库加载图片的使用、集合视图的布局UICollectionViewFlowLayout 、自定义Cell、布局协议

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 的子协议

@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);

    

    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"];

}

// 必须实现的俩方法

// 返回每个分区的item数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;

}

// 默认就一个分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;

}

// 返回每个cell的样式
- (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;

}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    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];
    }

    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];

}

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;

}

// 重点:

// 返回 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);

}

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];

//        [_girlImageView release];

        // 动态ImageView的高度
        // CGRectZero frame 设置为 0
        self.girlImageView = [[UIImageView alloc]initWithFrame:CGRectZero];
        [self.contentView addSubview:self.girlImageView];

        [_girlImageView release];     

    }
    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);

}

// 重点: