DAY15——UICollectionView

创建UICollectionView

 //创建一个布局对象,采用系统布局类UICollectionViewFlowLayout
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    //设置滑动方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

    CGFloat totalWidth = self.view.frame.size.width;

    //设置最小的行间距
    layout.minimumLineSpacing = ;

    //设置item与item之间的间距
    layout.minimumInteritemSpacing = ;

    //设置集合视图的分区间隔(上、左、下、右)
    layout.sectionInset = UIEdgeInsetsMake(, , , );

    //设置每一个item的尺寸的大小
    layout.itemSize = CGSizeMake((totalWidth - ) / , );

    //集合视图的创建必须指定布局,如果没有布局,显示不了任何东西
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[[UIScreen mainScreen] bounds] collectionViewLayout:layout];

    //集合视图如果想要显示内容,必须将cell注册 MyCollectionViewCell
    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:kReuse];

    //头部引用的尺寸
    layout.headerReferenceSize = CGSizeMake(, );

    //如果想要分区头视图显示,必须注册增广视图 MyCollectionReusableView
    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

    //指定代理
    collectionView.dataSource = self;
    collectionView.delegate = self;

    [self.view addSubview:collectionView];

//返回增广视图,也就是头视图
collectionView:viewForSupplementaryElementOfKind:atIndexPath:
注意:
dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader

collectionView:cellForItemAtIndexPath:

#pragma mark -----UICollectionViewDelegateFlowLayout---------
collectionView:layout:sizeForItemAtIndexPath:
collectionView:layout:insetForSectionAtIndex:
collectionView:layout:minimumLineSpacingForSectionAtIndex:
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:

自定义UICollectionViewLayout

#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        CGFloat totalWidth = frame.size.width;
        CGFloat totalHeight = frame.size.height;
        _imageView = [[UIImageView alloc] initWithFrame:CGRectMake(, , totalWidth, totalHeight - )];
        [self.contentView addSubview:_imageView];
        _showLabel = [[UILabel alloc] initWithFrame:CGRectMake(, totalHeight - , totalWidth, )];
        _showLabel.textAlignment = NSTextAlignmentCenter;
    }
    return self;
}
@end

#import "UIImageView+WebCache.h"
#import "Model.h"
#import "MyCollectionViewCell.h"
#import "UIImageView+WebCache.h"

@implementation ViewController

- (void)handleJSon{
    //获取json数据的路径
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"json"];
    //获取NSData对象
    NSData *data = [NSData dataWithContentsOfFile:filePath];
    //解析json数据
    NSArray *arr = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
    _dataArr = [[NSMutableArray alloc] initWithCapacity:];
    for (NSDictionary *dic in arr) {
        Model *model = [[Model alloc] init];
        [model setValuesForKeysWithDictionary:dic];
        [_dataArr addObject:model];
        [model release];
    }
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
    Model *model = _dataArr[indexPath .row];
    cell.showLabel.text = [NSString stringWithFormat:@"%ld, %ld",indexPath.section, indexPath.row];
    //获取链接
    NSURL *url = [NSURL URLWithString:model.thumbURL];
    //设置图片链接和占位图片
    [cell.imageView sd_setImageWithURL:url  placeholderImage:[UIImage imageNamed:@"placeHoderImage"]];
    return cell;
}
@end

##DAY15——UICollectionView的更多相关文章

  1. 【iOS】Xcode8+Swift3 纯代码模式实现 UICollectionView

    开发环境 macOS Sierra 10.12.Xcode 8.0,如下图所示: 总体思路 1.建立空白的storyboard用于呈现列表 2.实现自定义单个单元格(继承自:UICollectionV ...

  2. 使用UICollectionView实现首页的滚动效果

    实现类似这样的效果,可以滚动大概有两种实现方案 1. 使用scrollview来实现 2. 使用UICollectionView来实现 第一种比较简单,而且相对于性能来说不太好,于是我们使用第二种方案 ...

  3. 用NSCalendar和UICollectionView自定义日历,并实现签到显示

    前一段时间因为工作需要实现了一个可以签到的日历,来记录一下实现的思路 效果如图:   这里的基本需求是: 1,显示用户某个月的签到情况,已经签到的日子打个圈,没有签到且在某个时间范围内的可以签到,其他 ...

  4. UICollectionView布局cell的三种方式

    UICollectionViewFlowLayout里面: // 方法一 - (void)prepareLayout{} // 方法二 - (nullable NSArray<__kindof ...

  5. 【Swift】iOS UICollectionView 计算 Cell 大小的陷阱

    前言 API 不熟悉导致的问题,想当然的去理解果然会出问题,这里记录一下 UICollectionView 使用问题. 声明  欢迎转载,但请保留文章原始出处:)  博客园:http://www.cn ...

  6. UICollectionLayout布局 —— UIKit之学习UICollectionView记录二《流水布局》

    重点知识 一. 加载collectionView注意事项 1.创建collectionView,有两种方式 :一种是xib和一种是纯代码:设置代理和数据源,注册cell,配置流水布局的属性,如上.下. ...

  7. UICollectionView中使用 UICollectionViewFlowLayout进行布局(模仿苹果相册)

    现在都知道,在初始化UICollectionView的时候,必须要传入一Layout对象,进行布局管理.这也是collectionview和tableview的明显区别,通过collectionvie ...

  8. UI第十九节——UICollectionView

    UICollectionView其实就是UITableView的升级版,在布局方面比UITableView更出色.下面,先看代码吧 #import "RootViewController.h ...

  9. iOS6新特征:UICollectionView介绍

    http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITab ...

随机推荐

  1. php将文件夹打包成zip文件

    function addFileToZip($path,$zip){    $handler=opendir($path); //打开当前文件夹由$path指定.    while(($filenam ...

  2. Risk(最短路)

    Risk Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2915   Accepted: 1352 Description ...

  3. 2015-01-15百度地图API 新海量点

    整理一下昨天写的百度地图 项目最开始写了一个百度地图,但是速度那慢的简直了 所以昨天将百度地图API的海量点 写了一下 1秒啊 o.o  厉害 OK 记下 此乃需要的js <!--添加百度地图- ...

  4. 说说VS 2015 RC最新开发工具的体验

    有两个我感觉是提高效率的地方: 1.智能提示的改进,鼠标只要移动到代码上面的类型.字段,就会显示相应的提示,这大大提高我们开发时候需要按F12才能看到定义的内容.下面上图,给大家形象化: 2.管理Nu ...

  5. Ubuntu Android Studio 无法通过起动器开启

    问题: 1.可以通过终端开启 2.通过Android-Studio建立的Application无法启动, 提示 No JDK found. Please validate either STUDIO_ ...

  6. NSString+URLEncoding

    NSString+URLEncoding.h #import <Foundation/Foundation.h> @interface NSString(URLEncoding) - (N ...

  7. Node.js(转) -- 临时来说还看不懂!

    转自:http://blog.jobbole.com/53736/ 本文由 伯乐在线 - Lellansin 翻译.未经许可,禁止转载!英文出处:toptal.欢迎加入翻译组. 介绍 JavaScri ...

  8. background:url 的使用方法

    #pingfen li{ width:27px; float:left; height:28px; cursor:pointer; background:url( ; list-style:none; ...

  9. 关于yii2的gridview关联搜索步骤

    在使用yii2构建搜索视图,经常都会使用到gridview这个组件,这个组件十分强大,通过一定的配置就能进行关联搜索,下面就是简单的步骤 需求场景:一个车系表,里面存放在品牌表的id,现在要用品牌名字 ...

  10. python进阶--打包为exe文件

    一.Python打包为EXE文件有不少方案,比较常用的有下面两种方式: 1.使用py2exe 详细介绍:http://www.cnblogs.com/jans2002/archive/2006/09/ ...