使用UICollectionView

使用UICollectionView

使用UICollectionView的流程:

1. 设定一个UICollectionViewFlowLayout

2. 使用这个设定的UICollectionViewFlowLayout来初始化UICollectionView

3. 设置代理对象

4. 继承UICollectionViewCell设定重用的cell

源码:

LargeUICollectionViewFlowLayout.h +
LargeUICollectionViewFlowLayout.m

#import <UIKit/UIKit.h>


@interface LargeUICollectionViewFlowLayout : UICollectionViewFlowLayout


@end


#import "LargeUICollectionViewFlowLayout.h"


@implementation LargeUICollectionViewFlowLayout


- (instancetype)init

{

    self = [super init];

    if (self)

    {

        self.itemSize                = CGSizeMake(70, 70);

        self.sectionInset            = UIEdgeInsetsMake(0, 0, 0, 0);

        self.minimumInteritemSpacing = 40.0f;

        self.minimumLineSpacing      = 5.0f;

    }

    return self;

}


@end

ShowCollectionViewCell.h + ShowCollectionViewCell.m

#import <UIKit/UIKit.h>


@interface ShowCollectionViewCell : UICollectionViewCell


@end


#import "ShowCollectionViewCell.h"


@implementation ShowCollectionViewCell


- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.backgroundColor = [UIColor redColor];

    }


return self;

}


@end

RootViewController.h + RootViewController.m

#import <UIKit/UIKit.h>


@interface RootViewController : UIViewController


@end


#import "RootViewController.h"

#import "ShowCollectionViewCell.h"

#import "LargeUICollectionViewFlowLayout.h"


static NSString *identify = @"ItemIdentifier";


@interface RootViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>


@property (nonatomic, strong) UICollectionView *collectionView;


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 初始化UICollectionView并指定一个UICollectionViewFlowLayout

    self.collectionView =     [[UICollectionView alloc] initWithFrame:self.view.bounds

                       collectionViewLayout:[LargeUICollectionViewFlowLayout new]];


// 给UICollectionViewCell注册重用标示(collectionView会自动给我们创建重用的cell对象)

    [self.collectionView registerClass:[ShowCollectionViewCell class]

            forCellWithReuseIdentifier:@"ItemIdentifier"];


// 设置代理对象

    self.collectionView.delegate   = self;

    self.collectionView.dataSource = self;


// 将UICollectionView添加进父视图

    [self.view addSubview:_collectionView];

}


-(NSInteger)collectionView:(UICollectionView *)collectionView

    numberOfItemsInSection:(NSInteger)section

{

    return 100;

}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView

                 cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    ShowCollectionViewCell *cell =     [collectionView dequeueReusableCellWithReuseIdentifier:@"ItemIdentifier"

                                              forIndexPath:indexPath];


return cell;

}


@end

运行后效果如下:

很重要的参数如下所示:

在ShowCollectionViewCell.m中执行打印操作:

打印信息如下:

2014-05-19 16:52:58.873 UICollectionView[3077:60b] {{0,
0}, {70, 70}}       A
2014-05-19
16:52:58.875 UICollectionView[3077:60b] {{125,
0}, {70, 70}}   B
2014-05-19 16:52:58.875
UICollectionView[3077:60b] {{250, 0},
{70, 70}}   C
2014-05-19 16:52:58.875
UICollectionView[3077:60b] {{0, 75},
{70, 70}}     D
2014-05-19 16:52:58.876
UICollectionView[3077:60b] {{125, 75}, {70, 70}}
2014-05-19
16:52:58.876 UICollectionView[3077:60b] {{250, 75}, {70,
70}}
2014-05-19 16:52:58.876 UICollectionView[3077:60b] {{0, 150}, {70,
70}}
2014-05-19 16:52:58.877 UICollectionView[3077:60b] {{125, 150},
{70, 70}}
2014-05-19 16:52:58.877 UICollectionView[3077:60b] {{250,
150}, {70, 70}}
2014-05-19 16:52:58.877 UICollectionView[3077:60b] {{0,
225}, {70, 70}}
2014-05-19 16:52:58.878 UICollectionView[3077:60b]
{{125, 225}, {70, 70}}
2014-05-19 16:52:58.878
UICollectionView[3077:60b] {{250, 225}, {70, 70}}
2014-05-19
16:52:58.878 UICollectionView[3077:60b] {{0, 300}, {70, 70}}
2014-05-19
16:52:58.879 UICollectionView[3077:60b] {{125, 300}, {70,
70}}
2014-05-19 16:52:58.879 UICollectionView[3077:60b] {{250, 300},
{70, 70}}
2014-05-19 16:52:58.879 UICollectionView[3077:60b] {{0, 375},
{70, 70}}
2014-05-19 16:52:58.880 UICollectionView[3077:60b] {{125,
375}, {70, 70}}
2014-05-19 16:52:58.901 UICollectionView[3077:60b]
{{250, 375}, {70, 70}}
2014-05-19 16:52:58.901
UICollectionView[3077:60b] {{0, 450}, {70, 70}}
2014-05-19 16:52:58.902
UICollectionView[3077:60b] {{125, 450}, {70, 70}}
2014-05-19
16:52:58.902 UICollectionView[3077:60b] {{250, 450}, {70,
70}}
2014-05-19 16:52:58.902 UICollectionView[3077:60b] {{0, 525}, {70,
70}}
2014-05-19 16:52:58.903 UICollectionView[3077:60b] {{125, 525},
{70, 70}}
2014-05-19 16:52:58.903 UICollectionView[3077:60b] {{250,
525}, {70, 70}}
2014-05-19 16:53:24.995 UICollectionView[3077:60b] {{0,
600}, {70, 70}}
2014-05-19 16:53:24.996 UICollectionView[3077:60b]
{{125, 600}, {70, 70}}
2014-05-19 16:53:24.996
UICollectionView[3077:60b] {{250, 600}, {70, 70}}

分析上述打印信息A,B不难发现:125 - 70 = 55 >
40,所以,minimumInteritemSpacing只是单元格间的最小间距而已.

分析A,D发现,75 - 70 =
5,与minimumLineSpacing设定一致,因为我们是垂直滚动,所以纵向方向的间距是一致的.

知道这些,我们来实现网络请求照片墙的效果.

修改LargeUICollectionViewFlowLayout中的代码如下:

self.itemSize               
= CGSizeMake(100, 150);         //
单元格尺寸
       
self.sectionInset           
= UIEdgeInsetsMake(0, 0, 0, 0); //
单元格边缘
       
self.minimumInteritemSpacing =
10.0f;                       
// 横排单元格最小间隔
       
self.minimumLineSpacing      =
10.0f;                       
// 单元格最小行间距

修改ShowCollectionViewCell.h + ShowCollectionViewCell.m


#import <UIKit/UIKit.h>


@interface ShowCollectionViewCell : UICollectionViewCell


@property (nonatomic, strong) UIImageView  *showImageView;


@end


#import "ShowCollectionViewCell.h"


@implementation ShowCollectionViewCell


- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.backgroundColor = [UIColor whiteColor];


CGRect rect = self.bounds;

        rect.origin.x    += 3;

        rect.origin.y    += 3;

        rect.size.height -= 6;

        rect.size.width  -= 6;


_showImageView = [[UIImageView alloc] initWithFrame:rect];

        [self addSubview:_showImageView];

    }


return self;

}


@end

RootViewController.m


#import "RootViewController.h"

#import "ShowCollectionViewCell.h"

#import "LargeUICollectionViewFlowLayout.h"

#import "YXGCD.h"

#import "SDWebImage.h"


// 重用标示

static NSString *identify = @"ItemIdentifier";


// 数据源

#define SOURCE_DATA @"http://www.duitang.com/album/1733789/masn/p/0/100/"


@interface RootViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>


@property (nonatomic, strong) UICollectionView *collectionView;

@property (nonatomic, strong) NSMutableArray   *dataArray;  // 数据源


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 初始化数据源

    _dataArray = [[NSMutableArray alloc] init];


// 初始化UICollectionView并指定一个UICollectionViewFlowLayout

    self.collectionView =     [[UICollectionView alloc] initWithFrame:self.view.bounds

                       collectionViewLayout:[LargeUICollectionViewFlowLayout new]];


// 给UICollectionViewCell注册重用标示(collectionView会自动给我们创建重用的cell对象)

    [self.collectionView registerClass:[ShowCollectionViewCell class]

            forCellWithReuseIdentifier:@"ItemIdentifier"];


// 设置代理对象

    self.collectionView.delegate   = self;

    self.collectionView.dataSource = self;


// 将UICollectionView添加进父视图

    [self.view addSubview:_collectionView];


[[GCDQueue globalQueue] execute:^{

        // 获取json数据

        NSData *data = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:SOURCE_DATA]];


// 转换数据

        NSDictionary *dataDictionary = [NSJSONSerialization JSONObjectWithData:data

                                                                       options:NSJSONReadingMutableLeaves|| NSJSONReadingMutableContainers

                                                                         error:nil];

        if (dataDictionary)

        {

            NSArray *dataArray = dataDictionary[@"data"][@"blogs"];

            for (NSDictionary *dic in dataArray)

            {

                NSLog(@"%@", dic[@"isrc"]);


// 存储数据

                [_dataArray addObject:dic[@"isrc"]];

            }

        }


// 主线程更新

        [[GCDQueue mainQueue] execute:^{

            [self.collectionView reloadData];

        }];

    }];

}


-(NSInteger)collectionView:(UICollectionView *)collectionView

    numberOfItemsInSection:(NSInteger)section

{

    return [_dataArray count];

}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView

                 cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    ShowCollectionViewCell *cell =     [collectionView dequeueReusableCellWithReuseIdentifier:@"ItemIdentifier"

                                              forIndexPath:indexPath];


[cell.showImageView setImageWithURL:[NSURL URLWithString:_dataArray[indexPath.row]]];


return cell;

}


@end

效果图如下:

一款显示壁纸的软件就这么搞定雏形了......

我们来尝试一下实时更换layout让图片自动布局,效果如下:

源码:

#import "RootViewController.h"

#import "ShowCollectionViewCell.h"

#import "LargeUICollectionViewFlowLayout.h"

#import "AnotherCollectionViewFlowLayout.h"

#import "YXGCD.h"

#import "SDWebImage.h"


// 重用标示

static NSString *identify = @"ItemIdentifier";


// 数据源

#define SOURCE_DATA @"http://www.duitang.com/album/1733789/masn/p/0/100/"


@interface RootViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>


@property (nonatomic, strong) UICollectionView *collectionView;


@property (nonatomic, strong) LargeUICollectionViewFlowLayout *largeLayout;

@property (nonatomic, strong) AnotherCollectionViewFlowLayout *anotherLayout;


@property (nonatomic, strong) NSMutableArray   *dataArray;  // 数据源


@end


@implementation RootViewController


- (void)viewDidLoad

{

    [super viewDidLoad];


// 初始化数据源

    _dataArray = [[NSMutableArray alloc] init];


// 初始化两种布局

    _largeLayout   = [LargeUICollectionViewFlowLayout new];

    _anotherLayout = [AnotherCollectionViewFlowLayout new];


// 初始化UICollectionView并指定一个UICollectionViewFlowLayout

    self.collectionView =     [[UICollectionView alloc] initWithFrame:self.view.bounds

                       collectionViewLayout:_largeLayout];


// 给UICollectionViewCell注册重用标示(collectionView会自动给我们创建重用的cell对象)

    [self.collectionView registerClass:[ShowCollectionViewCell class]

            forCellWithReuseIdentifier:@"ItemIdentifier"];


// 设置代理对象

    self.collectionView.delegate   = self;

    self.collectionView.dataSource = self;


// 将UICollectionView添加进父视图

    [self.view addSubview:_collectionView];


[[GCDQueue globalQueue] execute:^{

        // 获取json数据

        NSData *data = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:SOURCE_DATA]];


// 转换数据

        NSDictionary *dataDictionary = [NSJSONSerialization JSONObjectWithData:data

                                                                       options:NSJSONReadingMutableLeaves|| NSJSONReadingMutableContainers

                                                                         error:nil];

        if (dataDictionary)

        {

            NSArray *dataArray = dataDictionary[@"data"][@"blogs"];

            for (NSDictionary *dic in dataArray)

            {

                NSLog(@"%@", dic[@"isrc"]);


// 存储数据

                [_dataArray addObject:dic[@"isrc"]];

            }

        }


// 主线程更新

        [[GCDQueue mainQueue] execute:^{

            [self.collectionView reloadData];


// 3s后切换布局动画

            [[GCDQueue mainQueue] execute:^{


[_largeLayout invalidateLayout];

                [_collectionView setCollectionViewLayout:_anotherLayout

                                                animated:YES];


} afterDelay:NSEC_PER_SEC * 3];

        }];

    }];

}


-(NSInteger)collectionView:(UICollectionView *)collectionView

    numberOfItemsInSection:(NSInteger)section

{

    return [_dataArray count];

}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView

                 cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    ShowCollectionViewCell *cell =     [collectionView dequeueReusableCellWithReuseIdentifier:@"ItemIdentifier"

                                              forIndexPath:indexPath];


[cell.showImageView setImageWithURL:[NSURL URLWithString:_dataArray[indexPath.row]]];


return cell;

}


@end

RootViewController.m

AnotherCollectionViewFlowLayout.h +
AnotherCollectionViewFlowLayout.m

#import <UIKit/UIKit.h>


@interface AnotherCollectionViewFlowLayout : UICollectionViewFlowLayout


@end


#import "AnotherCollectionViewFlowLayout.h"


@implementation AnotherCollectionViewFlowLayout


- (instancetype)init

{

    self = [super init];

    if (self)

    {

        self.itemSize                = CGSizeMake(150, 200);         // 单元格尺寸

        self.sectionInset            = UIEdgeInsetsMake(0, 0, 0, 0); // 单元格边缘

        self.minimumInteritemSpacing = 10.0f;                        // 横排单元格最小间隔

        self.minimumLineSpacing      = 20.0f;                        // 单元格最小行间距

    }

    return self;

}


@end

几个核心的地方:(布局变化时自动匹配对于UICollectionView很重要哦)

so easy :)

使用UICollectionView

时间： 2024-10-06 14:57:40

使用UICollectionView的相关文章

UICollectionView介绍使用

UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UICollectionViewLayout,而且允许用户自定义layout来进行布局. 下面是UICollectionView合并内容和布局并生成最终界面的一个流程: 当UICollectionView显示内容时,先从Data source(数据源)获取cell,然后交给UICollectionView.再从U

UIScrollView的delegate方法妙用之让UICollectionView滑动到某个你想要的位置

一个UICollectionView有好多个cell,滑动一下,谁也不知道会停留在哪个cell,滑的快一点,就会多滑一段距离,反之则会滑的比较近,这正是UIScrollview用户体验好的地方. 如果想要UICollectionView停留到某个cell的位置,可以用 - (void)scrollToItemAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UICollectionViewScrollPosition)scrollPos

IOS 瀑布流UICollectionView实现

IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和tableView不一样,ContentView的内容完全需要我们自己去添加. 它与tableview相比,他的初始化需要FlowLayout并且大部分操作在其上. UIcollectionView的实用性极强,虽然有时他并不是最好的解决方案,但是它可以很灵活的实现各种效果. 图(一) 如图,模拟器

iOS8 UICollectionView横向滑动demo

在iOS8中,scrollView和加载在它上面的点击事件会有冲突,所以做一个横向滑动的界面最好的选择就是UICollectionView. 这个效果可以用苹果公司提供的官方demo修改而来,下载地址https://github.com/SeniorZhai/LineLayout. 主要介绍涉及到的几个属性,在LineLayout.m文件中: //cell大小 self.itemSize = CGSizeMake(200, 250); //水平滑动 self.scrollDirection =

自定义UICollectionLayout布局 —— UIKit之学习UICollectionView记录一《瀑布流》

一.思路 思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列数. 思路三:实现的重要的方法. 二.代码先行. 1.自定义layout类. //入口 #import <UIKit/UIKit.h> @protocol STRWaterLayoutDelegate; @interface STRWaterLayout : UICollectionViewLay

手把手教你使用UICollectionView写公司的项目

公司的UI图 在很多app中都有这样通用的页面,一直没有机会使用UICollectionView,只是简单的看过他的使用方法.今天公司美工出图,使用了他,并且遇到了好多的坑.记录一下过程,不确定使用的方法是不是最优的,如果有更好的方案,一起讨论,一起进步 理论篇 一.UICollectionViewLayout是做什么的? 1.1 在创建UITableView的时候,使用的是- (instancetype)initWithFrame:(CGRect)frame style:(UITableVie

集合视图（UICollectionView）

集合视图的四个组成部分: 单元格:它是集合视图中的一个单元格. 节:它是集合视图中的一个行数据,由多个单元格构成 补充视图:它是节的头和脚 装饰视图:集合视图中的背景图. UICollectionView继承自UIScrollView.有两个协议:UICollectionViewDelegate委托协议和UICollectionViewDataSource数据源协议. UICollectionViewCell是单元格类,它的布局是有UICollectionViewLayout类定义的,它是一个抽

UICollectionView基础

前言 这个控件,看起来与UITableView有点像,而且基本的用法也很相像哦!!! 我们来看看API: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #pragma mark - UICollectionViewDataSource // 指定Section个数 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { ret

UICollectionView

UICollectionView是Apple在iOS6开始,提供给我们的一个强大的控件.最简单的UICollectionView就是GridView,标准的UICollectionView包含如下几个部分: 1 UICollectionReusableView<SupplementaryView>:可以指定section的Header或者Footer 2 UICollectionViewCell:用于展示内容的主体,对于不同的cell可以指定不同尺寸和不同的内容 再次说明,UICollecti

UICollectionView布局功能

UIConllectionView和UITableView类似,也是展示数据,但不同于UITableView那种规则的布局,UICollectionView可以实现不规则的布局,即瀑布流. 创建UICollectionView UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:layout];