iOS基础之CollectionView(集合视图)

  在iOS6.0之后,苹果推出了?个新的继承于UIScrolleriew的一个视 图,UICollectionView,也被称之为集合视图。和UITableView共同作为 在开发中常常用的两个视图,常常作为项目的主界面出现。

  代码演示:

  

#import "YourCollectionViewCell.h"

@implementation YourCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        //获取整体item的宽和高
        CGFloat totalWidth = frame.size.width;
        CGFloat totalHeight = frame.size.height;
        self.numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, totalWidth, totalHeight - 20)];
        self.numberLabel.textAlignment = NSTextAlignmentCenter;
        self.numberLabel.font = [UIFont boldSystemFontOfSize:36];
        [self.contentView addSubview:self.numberLabel];

    }return self;
}
@end

#import "MyCollectionReusableView.h"

@implementation MyCollectionReusableView
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.headerLabel = [[UILabel alloc]initWithFrame:self.bounds];
        self.headerLabel.textAlignment = NSTextAlignmentCenter;
        self.headerLabel.font = [UIFont boldSystemFontOfSize:36];
        [self addSubview:self.headerLabel];
    }return self;
}
@end

#import "ViewController.h"
#import "YourCollectionViewCell.h"
#import "MyCollectionReusableView.h"
#define kReuse @"reuse"
#define kWidth self.view.frame.size.width
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建一个布局对象,采用系统布局类UICollectionViewFlowLayout

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    /*
    //设置最小行间距
    layout.minimumLineSpacing = 20;
    //设置item与item之间的间距
    layout.minimumInteritemSpacing = 10;
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //设置每一个item的尺寸
    CGFloat totalWidth = self.view.frame.size.width;
    layout.itemSize = CGSizeMake((totalWidth - 40)/3, 80);
    */
    //设置滑动方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //集合视图的创建必须指定布局,如果没有布局,显示不了任何东西
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[[UIScreen mainScreen]bounds] collectionViewLayout:layout];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    //集合视图如果想要显示内容,必须要将cell进行注册
    [collectionView registerClass:[YourCollectionViewCell class] forCellWithReuseIdentifier:kReuse];
    //集合视图如果想要分区头视图显示 ,必须注册增广视图
    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    //给头视图布局
    layout.headerReferenceSize = CGSizeMake(kWidth, 40);

    [self.view addSubview:collectionView];

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake((kWidth - 40)/3, 80);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 20;
}
//- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
//    return 20;
//}

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

#pragma mark -------集合视图数据源协议-------
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 15;
}

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

    YourCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kReuse forIndexPath:indexPath];
    cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random() %256 / 255.0 green:arc4random() %256 / 255.0  blue:arc4random() %256 / 255.0  alpha:1.0];
    cell.numberLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    return cell;
}
//返回增广视图,也就是集合视图的头视图或者尾视图
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
    view.headerLabel.text = [NSString stringWithFormat:@"当前分区为:%ld",indexPath.section];
    view.backgroundColor = [UIColor yellowColor];
    return view;
}

//设置分区个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 10;
}

#pragma mark -------集合视图代理方法-----

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%ld,%ld",indexPath.section,indexPath.row);
}

@end
时间: 2024-11-02 23:26:07

iOS基础之CollectionView(集合视图)的相关文章

iOS基础之UITabBarController(标签视图控制器)

UITabBarController是可以帮我们添加.管理许多的标签项,使我们的程序包含不同的操作模式,由于管理UITabBar可能比较麻烦,系统帮我们对其进行了封装,产生了简单好用的UITabBarController--标签视图控制器. 代码演示: #import "AppDelegate.h" #import "FirstViewController.h" #import "SecondViewController.h" #import &

iOS基础-UIKit框架-高级视图-UIPickerView-实例3:国家选择(图片)

说明:事先已经准备好了一个NJCountry类,里面声明了2个属性name和icon,并 创建和实现了快速创建类的动态方法和静态方法.直接导入即可.0.创建一个plist文件,Root为Array,里面为字典(字典里为国家和国旗)1.加载这个plist文件1>声明数组属性 @property(nonatomic,strong)NSArray *countries:2>懒加载(在实现文件最后面)#pragma mark - 懒加载-(NSArray *)countries{if(_countri

iOS基础-UIKit框架-高级视图-UIPickerView-实例2:城市选择(列与列之间有关系)

说明:事先已经准备好了一个NJProvince类,里面声明了2个属性name和cities,并创建和实现了快速创建类的动态方法和静态方法.直接导入即可.0.创建一个plist文件,Root为Array,里面为字典(字典里为省份和城市)1.加载这个plist文件1>声明数组属性 @property(nonatomic,strong)NSArray *provinces:2>懒加载(在实现文件最后面)#pragma mark - 懒加载-(NSArray *)provinces{ if(_prov

iOS基础-UIKit框架-高级视图-UIPickerView-实例1:点菜(列与列之间无关系)

一.点菜0.创建一个plist文件,Root为Array,里面包含3个数组,每个数组有一堆食物名称加载这个plist文件1>声明数组属性 @property(nonatomic,strong)NSArray *foods:2>懒加载(在实现文件最后面)#pragma mark - 懒加载-(NSArray *)foods{ if(_foods == nil){ NSString *fullPath = [[NSBundle mainBundle] pathForResource:@"

UICollectionView 集合视图 的使用

直接上代码: // // RootViewController.m // // #import "RootViewController.h" #import "CollectionViewCell.h" @interface RootViewController ()<UICollectionViewDataSource, UICollectionViewDelegate> @property (nonatomic, retain) UICollecti

IOS 集合视图指南2:集合视图基础

Collection View Basics(集合视图基础) To present its content onscreen, a collection view cooperates with many different objects. Some objects are custom and must be provided by your app. For example, your app must provide a data source object that tells the

IOS 集合视图指南1:介绍

About iOS Collection Views(关于IOS集合视图) A collection view is a way to present an ordered set of data items using a flexible and changeable layout. The most common use for collection views is to present items in a grid-like arrangement, but collection v

ios学习记录 day42 UI18 集合视图

集合视图UICollectionView 简单来说就是多列的TableView 它们同样是datasource和delegate设计模式UICollectionViewLayout是一个对View布局和行为描述的类  UICollectionViewFlowLayout是它的子类 ios学习记录 day42 UI18 集合视图,码迷,mamicode.com

iOS集合视图单元格高亮和选中的区别

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流之用,请勿进行商业用途.同时,转载时不要移除本申明. 如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作! 集合视图(Collection View)拥有一个遵守UICollectionViewDelegate协议的delegate属性.该委托属性将从集合视图接收到各种委托调用