文档章节

UICollection的使用

大番薯
 大番薯
发布于 2016/04/04 23:53
字数 907
阅读 5
收藏 0

使用瀑布样式列表,即UICollectionView。使用时自定义collectionCell,自定义header,自定义footer。


#import "ViewController.h"

#import "CollectionViewHeader.h"

#import "CollectionViewFooter.h"

#import "CollectionViewCell.h"

#import "CollectionVC.h"


@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>


@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    self.title = @"瀑布视图";

    

    [self setUI];

}


- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}


- (void)loadView

{

    [super loadView];

    self.view.backgroundColor = [UIColor whiteColor];

}


#pragma mark - 视图


- (void)setUI

{

    // 确定是水平滚动,还是垂直滚动

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];

    

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];

    collectionView.delegate = self;

    collectionView.dataSource = self;

    collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:identifierCollectionViewCell];

    collectionView.allowsSelection = YES;

    collectionView.allowsMultipleSelection = NO;

    collectionView.alwaysBounceVertical = YES;

    collectionView.backgroundColor = [UIColor whiteColor];

    

    [collectionView registerClass:[CollectionViewHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:identifierCollectionViewHeader];

    [collectionView registerClass:[CollectionViewFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:identifierCollectionViewFooter];

    

    [self.view addSubview:collectionView];

}


#pragma mark - UICollectionViewDataSource


// 定义展示的Section的个数

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return 5;

}


// 添加一个补充视图(页眉或页脚)

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

    if ([kind isEqual:UICollectionElementKindSectionHeader])

    {

        CollectionViewHeader *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:identifierCollectionViewHeader forIndexPath:indexPath];

        

        headerView.titleLabel.text = [[NSString alloc] initWithFormat:@"%ld Section", indexPath.section];

        

        return headerView;

    }

    else if ([kind isEqual:UICollectionElementKindSectionFooter])

    {

        CollectionViewFooter *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:identifierCollectionViewFooter forIndexPath:indexPath];

        

        footerView.titleLabel.text = [[NSString alloc] initWithFormat:@"%ld Section", indexPath.section];

        

        return footerView;

    }

    

    return nil;

}


// 定义展示的UICollectionViewCell的个数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    if (0 == section)

    {

        return 2;

    }

    else if (1 == section)

    {

        return 5;

    }

    else if (2 == section)

    {

        return 1;

    }

    return 10;

}


// 每个UICollectionView展示的内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifierCollectionViewCell forIndexPath:indexPath];

    

    NSString *title = [[NSString alloc] initWithFormat:@"%ld", indexPath.row];

    cell.titlelabel.text = title;

    

    return cell;

}


#pragma mark - UICollectionViewDelegateFlowLayout


// 定义每个UICollectionView 的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

    return CGSizeMake(widthCollectionViewCell, heightCollectionViewCell);

}


// 定义每个UICollectionView margin

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

    return UIEdgeInsetsMake(0.0, 10.0, 10.0, 10.0);

}


// 最小行间距

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

{

    return 10.0;

}


// 最小列间距

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section

{

    return 0.0;

}


// 设定页眉的尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

    return CGSizeMake(widthCollectionViewHeader, heightCollectionViewHeader);

}


// 设定页脚的尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

{

    return CGSizeMake(widthCollectionViewFooter, heightCollectionViewFooter);

}


#pragma mark - UICollectionViewDelegate


// UICollectionView被选中时调用的方法

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    [collectionView deselectItemAtIndexPath:indexPath animated:YES];

}


// 返回这个UICollectionView是否可以被选择

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

    return YES;

}




自定义UICollectionViewCell
.h文件

#import <UIKit/UIKit.h>


#define widthScreen ([[UIScreen mainScreen] bounds].size.width)


#define widthCollectionViewCell ((widthScreen - 10.0 * 3) / 2)

static CGFloat const heightCollectionViewCell = 100.0;


static NSString *const identifierCollectionViewCell = @"CollectionViewCell";


@interface CollectionViewCell : UICollectionViewCell


@property (nonatomic, strong) UIImageView *imageview;

@property (nonatomic, strong) UILabel *titlelabel;

@property (nonatomic, strong) UILabel *detaillabel;


@end


.m文件

#import "CollectionViewCell.h"


static CGFloat const originXY = 10.0;

static CGFloat const heightImage = 60.0;

static CGFloat const heightLabel = 20.0;


@interface CollectionViewCell ()


@end


@implementation CollectionViewCell


- (instancetype)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.layer.borderWidth = 0.5;

        self.layer.borderColor = [UIColor redColor].CGColor;

        

        [self setUI];

    }

    

    return self;

}


#pragma mark - 视图


- (void)setUI

{

    // 60.0 + 20.0 + 20.0

    self.imageview.frame = CGRectMake(0.0, 0.0, (widthScreen - originXY * 3) / 2, heightImage);

    [self.contentView addSubview:self.imageview];

    

    UIView *currentView = self.imageview;

    

    self.titlelabel.frame = CGRectMake(currentView.frame.origin.x, (currentView.frame.origin.y + currentView.frame.size.height), currentView.frame.size.width, heightLabel);

    [self.contentView addSubview:self.titlelabel];

    

    currentView = self.titlelabel;

    

    self.detaillabel.frame = CGRectMake(currentView.frame.origin.x, (currentView.frame.origin.y + currentView.frame.size.height), currentView.frame.size.width, currentView.frame.size.height);

    [self.contentView addSubview:self.detaillabel];

}


#pragma mark - setter


- (UIImageView *)imageview

{

    if (!_imageview)

    {

        _imageview = [[UIImageView alloc] init];

        _imageview.backgroundColor = [UIColor orangeColor];

    }

    

    return _imageview;

}


- (UILabel *)titlelabel

{

    if (!_titlelabel)

    {

        _titlelabel = [[UILabel alloc] init];

        _titlelabel.backgroundColor = [UIColor greenColor];

        _titlelabel.textAlignment = NSTextAlignmentCenter;

    }

    

    return _titlelabel;

}


- (UILabel *)detaillabel

{

    if (!_detaillabel)

    {

        _detaillabel = [[UILabel alloc] init];

        _detaillabel.backgroundColor = [UIColor brownColor];

    }

    

    return _detaillabel;

}


@end






自定义表头header(UICollectionReusableView)
.h文件

#import <UIKit/UIKit.h>


#define widthScreen ([[UIScreen mainScreen] bounds].size.width)


#define widthCollectionViewHeader (widthScreen)

static CGFloat const heightCollectionViewHeader = 30.0;


static NSString *const identifierCollectionViewHeader = @"CollectionViewHeader";


@interface CollectionViewHeader : UICollectionReusableView


/// 标题标签

@property (nonatomic, strong) UILabel *titleLabel;


@end



.m文件

#import "CollectionViewHeader.h"


@interface CollectionViewHeader ()


@end


@implementation CollectionViewHeader


- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.3];

        

        [self setUI];

    }

    return self;

}


#pragma mark - 视图


- (void)setUI

{

    self.titleLabel.frame = CGRectMake(10.0, 0.0, (widthCollectionViewHeader - 10.0 * 2), heightCollectionViewHeader);

    [self addSubview:self.titleLabel];

}


#pragma mark - setter


- (UILabel *)titleLabel

{

    if (!_titleLabel)

    {

        _titleLabel = [[UILabel alloc] init];

        _titleLabel.backgroundColor = [UIColor clearColor];

        _titleLabel.textColor = [UIColor blackColor];

        _titleLabel.font = [UIFont systemFontOfSize:16.0];

    }

    

    return _titleLabel;

}


@end





自定义表尾footer(UICollectionReusableView
.h文件

#import <UIKit/UIKit.h>


#define widthScreen ([[UIScreen mainScreen] bounds].size.width)


#define widthCollectionViewFooter (widthScreen)

static CGFloat const heightCollectionViewFooter = 20.0;


static NSString *const identifierCollectionViewFooter = @"CollectionViewFooter";


@interface CollectionViewFooter : UICollectionReusableView


/// 标题标签

@property (nonatomic, strong) UILabel *titleLabel;


@end



.m文件

#import "CollectionViewFooter.h"


@implementation CollectionViewFooter


- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self)

    {

        self.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.1];

        

        [self setUI];

    }

    return self;

}


#pragma mark - 视图


- (void)setUI

{

    self.titleLabel.frame = CGRectMake(10.0, 0.0, (widthCollectionViewFooter - 10.0 * 2), heightCollectionViewFooter);

    [self addSubview:self.titleLabel];

}


#pragma mark - setter


- (UILabel *)titleLabel

{

    if (!_titleLabel)

    {

        _titleLabel = [[UILabel alloc] init];

        _titleLabel.backgroundColor = [UIColor clearColor];

        _titleLabel.textColor = [UIColor redColor];

        _titleLabel.font = [UIFont systemFontOfSize:10.0];

    }

    

    return _titleLabel;

}


@end









本文转载自:http://blog.csdn.net/potato512/article/details/50056843

大番薯
粉丝 0
博文 167
码字总数 0
作品 0
深圳
私信 提问
万物有源_Android自动化测试框架UIAutomator原理浅析

简介 UIAutomator是一个Android自动化测试框架,是谷歌在Android4.1版本发布时推出的一款用Java编写的UI测试框架,它只能用于UI即黑盒方面的测试。所以UIAutomator只能运行在Android4.1之后的...

维他ViTa
03/16
122
0
BMYCircularProgressPullToRefresh

BMYCircularProgressPullToRefresh 是下拉刷新,带有圆形进程视图,类似 Beamly iOS 应用。 此版本的下拉刷新特性可以再 UITableViews 和 UICollection 上使用,灵感来源于 Sam Vermette's S...

叶秀兰
2014/07/22
493
0
CombinationPickerController

CombinationPickerController 是图片选择器,使用 uicollection 视图。CombinationPickerController 可以选择单个图片,可以自定义你的相机,默认只支持人像。CombinationPickerController 兼...

叶秀兰
2014/08/27
520
0
关联选择器--MBContactPicker

MBContactPicker 是基于 UICollection View 的 iOS 风格的关联选择工具库,实现类似 iOS 7 的本地邮件关联选择器的功能。

叶秀兰
2014/01/04
257
0
ios UIcollection显示图片

xcode 7.3.1 UIcollection创建的item,cell来加载图片,加载到24个才会显示图片,怎么让他加载一个就显示一个图片

zxcasdqwe123
2016/08/18
51
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部