您的位置:首页 > 产品设计 > UI/UE

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

2015-09-22 20:10 956 查看
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);
}
// 重点:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: