UICollectionView 集合视图 的使用

直接上代码:

//
//  RootViewController.m
//
//

#import "RootViewController.h"
#import "CollectionViewCell.h"

@interface RootViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>

@property (nonatomic, retain) UICollectionView *collectionView ; // 集合视图

@end

@implementation RootViewController

- (void)dealloc {
    [_collectionView release];
    [super dealloc];
}

- (void)viewDidLoad {
    [super viewDidLoad];

    // 1、在创建集合视图对象之前需要创建集合视图的布局类对象,用于对集合视图的单元格做布局。
    UICollectionViewFlowLayout *flowLayout = [[[UICollectionViewFlowLayout alloc] init] autorelease];
    // 2、为相关属性
    // 设置最小行间距
    flowLayout.minimumLineSpacing = 5;
    // 设置最小列间距
    flowLayout.minimumInteritemSpacing = 5;
    // 设置 itemSize
    flowLayout.itemSize = CGSizeMake((CGRectGetWidth(self.view.bounds) - 40) / 4, 120);
    // 设置分区的内边距
    flowLayout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
    // 设置滑动方向,默认是纵向滑动。
//    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 指定页眉大小
    flowLayout.headerReferenceSize = CGSizeMake(200, 60);
    // 指定页脚大小
    flowLayout.footerReferenceSize = CGSizeMake(200, 40);

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

    // 需要制定代理对象
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;

    // 添加集合视图显示
    [self.view addSubview:self.collectionView];

    // 为集合视图注册单元格类型
    [self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    // 为集合视图注册页眉页脚的类型
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];

}

// 为集合视图的每一个分区指定 item 的数量
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 100;
}

// 为集合视图的每一个 Item 指定对应的单元格
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.titleLable.text = [NSString stringWithFormat:@"(%ld, %ld)", indexPath.section, indexPath.item];
//    cell.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:1];
    return cell;
}

// 集合视图的页眉页脚视图使用的是 UICollectionReusableView 或其子类的对象,同时页眉页脚通过 kind 来区分,并且使用专门的重用机制,来完成对页眉页脚视图的管理。
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor orangeColor];
        return headerView;
    }
    UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath];
    footerView.backgroundColor = [UIColor redColor];
    return footerView;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UIViewController *viewController = [[UIViewController alloc] init];
    [self.navigationController pushViewController:viewController animated:YES];
    [viewController release];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end


//
//  CollectionViewCell.h
//
//

#import <UIKit/UIKit.h>

@interface CollectionViewCell : UICollectionViewCell

@property (nonatomic, retain) UILabel *titleLable ; //

@end
//
//  CollectionViewCell.m
//
//

#import "CollectionViewCell.h"

@implementation CollectionViewCell

- (void)dealloc {
    [_titleLable release];
    [super dealloc];
}

- (UILabel *)titleLable {
    if (!_titleLable) {
        self.titleLable = [[[UILabel alloc] initWithFrame:self.bounds] autorelease];
        _titleLable.backgroundColor = [UIColor lightGrayColor];
        _titleLable.textColor = [UIColor whiteColor];
        _titleLable.font = [UIFont systemFontOfSize:16];
        _titleLable.textAlignment = NSTextAlignmentCenter;
        [self.contentView addSubview:_titleLable];
    }
    return _titleLable;
}

@end

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-09-30 22:39:52

UICollectionView 集合视图 的使用的相关文章

UICollectionView集合视图的概念

如何创建UICollectionView 集合视图的布局UICollectionViewFlowLayout 自定义cell 布局协议UICollectionViewDelegateFlowLayout UICollectionView与UITableView的实现类似,都需要设置delegate和dataSource 在collectionView中,cell的布局比tableView要复杂,需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UIColle

UICollectionView 集合视图用法,自定义Cell

在View里面 //1.创建UICollectionViewFlowLayout UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc] init]; //设置 //1.1设置大小 flowLayout.itemSize=CGSizeMake(90, 90); //1.2设置左右间距(注意如果给定间距,无法满足屏幕的宽度,设置无效) flowLayout.minimumInteritemSpacing=

第二十一讲.UICollectionView(集合视图)以及瀑布流效果, 通知中心(NSNotificationCenter).

一.集合视图(UICollectionView) 1.集合视图的概念 2.如何创建 3.集合视图的布局UICollectionViewFlowLayout 4.自定义cell和 布局协议UICollectionViewDelegateFlowLayout 使用时cell一般选择自定义,而在布局时候要使用代理. UICollectionView的基本使用示例代码分析: #import "ViewController.h" #import "CollectionReusableV

UICollectionView 集合视图

创建集合视图 UICollectionView * cView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 568  ) collectionViewLayout:flowLayout];    cView.dataSource = self;  设置 dataSource 代理    cView.delegate = self;      设置delegate 代理    [self.view addSubvie

UICollectionView(集合视图)以及自定义集合视图

一.UICollectionView集合视图 其继承自UIScrollView. UICollectionView类是iOS6新引进的API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于UITableView类. 1.需要遵循的协议: 1)UICollectionViewDataSource, 2)UICollectionViewDelegate, 3)UICollectionViewDelegateFlowLayout 2.创建collection: UICollectionVi

集合视图(UICollectionView)

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

swift:创建集合视图UICollectionView

swift中创建集合视图和OC中差不多,主要是实现UICollectionViewDataSource数据源协议和UICollectionViewDelegateFlowLayout自定义布局协议,其中UICollectionViewDelegateFlowLayout自定义布局协议继承自UICollectionViewDelgate.使用自定义布局,可以设置集合视图单元格的大小.位置.间距等等 例如: let flowLayout = UICollectionViewFlowLayout()

集合视图控制器(CollectionViewController) 、 标签控制器(TabBarController) 、 高级控件介绍

  1 创建集合视图,设置相关属性以满足要求 1.1 问题 集合视图控制器UIConllectionViewController是一个展示大量数据的控制器,系统默认管理着一个集合视图UICollectionView,功能几乎和UITableViewController差不多,能够以多行多列的形式展示数据. 集合视图UICollectionView继承至UIScrollView,也同tableView一样有两个协议,分别是UICollectionViewDataSource数据源协议和UIColl

CollectionViewController 集合视图

 CollectionViewController 集合视图     UICollectionView, 继承于UIScollView, 可以滚动, 从iOS6才出现, 和UITableView的用法非常相似     tableView     dataSource: 显示数据     delegate: 样式和触发方法     collectionView     dataSource: 显示数据     delegate: 触发方法     UICollectionViewLayout: 样