加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

iOS UICollectionView 纯代码实现布局,并添加头部视图和尾部视图

(2017-01-05 16:54:19)
分类: 2016龙讯科技

1、首先看下整个Demo的整体结构:如下图

http://img.blog.csdn.net/20150105140649004UICollectionView 纯代码实现布局,并添加头部视图和尾部视图" />

2、直接上代码

1.自定义单元格类----------MyCell.h  里面添加

@interface MyCell :UICollectionViewCell

@property(strong,nonatomic)UIImageView *imageV;

@property(strong,nonatomic)UILabel *titleLab;

@end


2.自定义单元格类----------MyCell.m  里面实现

-(instancetype)initWithFrame:(CGRect)frame

{

   self = [superinitWithFrame:frame];

   if (self)

   {

        //定义CELL单元格内容

        _imageV = [[UIImageViewalloc]initWithFrame:CGRectMake(0,0100,100)];

        _imageV.backgroundColor = [UIColorclearColor];

       [self addSubview:_imageV];

        

        _titleLab = [[UILabelalloc]initWithFrame:CGRectMake(0,10010030)];

        _titleLab.backgroundColor = [UIColorclearColor];

        _titleLab.textAlignment =NSTextAlignmentCenter;

       [self addSubview:_titleLab];    

   }

    returnself;

}


3.自定义头部视图------MyHeaderView.h 里面添加

 

@interface MyHeaderView :UICollectionReusableView

//添加一个lable用于显示内容

@property(strong,nonatomic)UILabel *titleLab;

@end


4.自定义头部视图------MyHeaderView.m 里面实现

#import "MyHeaderView.h"

@implementation MyHeaderView

- (id)initWithFrame:(CGRect)frame

{

   self = [superinitWithFrame:frame];

   if (self) {

       _titleLab = [[UILabelalloc]init];

       _titleLab.frame =CGRectMake(0,0self.frame.size.width,self.frame.size.height);

        _titleLab.textAlignment =NSTextAlignmentCenter;

        _titleLab.backgroundColor = [UIColorredColor];

       [self addSubview:_titleLab]; 

   }

   returnself;

}

@end


5.尾部视图跟头部视图一致。(就不详细写出)


3、接下来是关键的,如何在控制器使用、直接上代码

----------------------------------------在ViewController.m 文件中--------------------------------------------------

#import "ViewController.h"

#import "MyCell.h"

#import "MyHeaderView.h"

#import "MyFooterView.h"


//导入协议

@interface ViewController ()<</span>UICollectionViewDataSource,UICollectionViewDelegate>

@property(strong,nonatomic)UICollectionView *myCollectionV;

@end

//设置标识

staticNSString *indentify = @"indentify";


@implementation ViewController


- (void)viewDidLoad {

    [superviewDidLoad];

    //创建视图

    [selfaddTheCollectionView];

}


//创建视图

-(void)addTheCollectionView{

    

    //=======================1===========================

    //创建一个块状表格布局对象

    UICollectionViewFlowLayout *flowL = [UICollectionViewFlowLayoutnew];

    //格子的大小 (长,高)

    flowL.itemSize =CGSizeMake(100,130);

    //横向最小距离

    flowL.minimumInteritemSpacing =1.f;

    //    flowL.minimumLineSpacing=60.f;//代表的是纵向的空间间隔

    //设置,上/左/下/右边距 空间间隔数是多少

    flowL.sectionInset =UIEdgeInsetsMake(10,000);

    //如果有多个区 就可以拉动

    [flowL setScrollDirection:UICollectionViewScrollDirectionVertical];

    //可以左右拉动

//    [flowL setScrollDirection:UICollectionViewScrollDirectionHorizontal];

  

#pragma mark -- 头尾部大小设置

    //设置头部并给定大小

    [flowL setHeaderReferenceSize:CGSizeMake(_myCollectionV.frame.size.width,50)];

    //设置尾部并给定大小

    [flowL setFooterReferenceSize:CGSizeMake(_myCollectionV.frame.size.width,50)];

    

    //=======================2===========================

    //创建一个UICollectionView

    _myCollectionV = [[UICollectionViewalloc]initWithFrame:CGRectMake(0,20,self.view.frame.size.width,self.view.frame.size.height-20)collectionViewLayout:flowL];

    //设置代理为当前控制器

    _myCollectionV.delegate =self;

    _myCollectionV.dataSource =self;

   //设置背景

    _myCollectionV.backgroundColor =[UIColorwhiteColor];

    

#pragma mark -- 注册单元格

    [_myCollectionVregisterClass:[MyCellclassforCellWithReuseIdentifier:indentify];

#pragma mark -- 注册头部视图

    [_myCollectionVregisterClass:[MyHeaderViewclass]forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"HeaderView"];

#pragma mark -- 注册尾部视图

    [_myCollectionVregisterClass:[MyFooterViewclass]forSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithReuseIdentifier:@"FooterView"];

    

    //添加视图

    [self.viewaddSubview:_myCollectionV];

    

}


#pragma mark --UICollectionView dataSource

//有多少个Section

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

   return 3;

}


//每个section有多少个元素

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

{

   return 9;

}

//每个单元格的数据

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

{

    //初始化每个单元格

    MyCell *cell = (MyCell *)[collectionViewdequeueReusableCellWithReuseIdentifier:indentifyforIndexPath:indexPath];

    

    //给单元格上的元素赋值

    cell.imageV.image = [UIImageimageNamed:@"LOGO80-80"];

    cell.titleLab.text = [NSStringstringWithFormat:@"{%ld-%ld}",indexPath.section,indexPath.row];

    

   return cell;

    

}


//设置头尾部内容

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

{

    UICollectionReusableView *reusableView =nil;

    

    if (kind ==UICollectionElementKindSectionHeader) {

        //定制头部视图的内容

        MyHeaderView *headerV = (MyHeaderView *)[collectionViewdequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"HeaderView"forIndexPath:indexPath];

        headerV.titleLab.text =@"头部视图";

        reusableView = headerV;

    }

    if (kind ==UICollectionElementKindSectionFooter){

        MyFooterView *footerV = (MyFooterView *)[collectionViewdequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithReuseIdentifier:@"FooterView"forIndexPath:indexPath];

        footerV.titleLab.text =@"尾部视图";

        reusableView = footerV;

    }

   return reusableView;

}

//点击单元格

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

{

   NSLog(@"%ld",indexPath.row);

}



4、效果展示,

http://img.blog.csdn.net/20150105142530031UICollectionView 纯代码实现布局,并添加头部视图和尾部视图" />



demo 下载  点击下载Demo //demo 链接:http://download.csdn.net/detail/ljh910329/8328965

6、用storyboard 添加Section Hearder和Section Footer  可以参考--http://my.oschina.net/zboy/blog/221525 ---  这个文章,顺便感谢原作者


0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有