##DAY15——UICollectionView

DAY15——UICollectionView

创建UICollectionView

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

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

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

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

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

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

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

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

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

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

    //如果想要分区头视图显示,必须注册增广视图 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(0, 0, totalWidth, totalHeight - 40)];
        [self.contentView addSubview:_imageView];
        _showLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, totalHeight - 40, totalWidth, 40)];
        _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:0];
    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
时间: 2024-10-23 22:07:55

##DAY15——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