实现效果如下:

以前做这效果的界面,总是实现的是section的头视图,因为我一直觉得collectionView是不像UITableView那样有tableHeaderView的,所以每次实现只能是判断indexpath.section为0的时候,组合一下视图做第一个section的头视图.

今天看别人写的Swift项目,看到人家代码的实现这效果的简便,我实在是不敢相信这么容易,于是自己赶紧用OC写了个简单的demo,发现还真是能实现呢......好开心....

实现的源码如下,注释的很清楚啦:

  1 //
  2 //  ViewController.m
  3 //  HeaderCollectionView
  4 //
  5 //  Created by 思 彭 on 16/10/24.
  6 //  Copyright © 2016年 思 彭. All rights reserved.
  7 //
  8
  9 #import "ViewController.h"
 10 #import "SectionHeaderView.h"
 11
 12 @interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
 13
 14 @property (nonatomic, strong) UICollectionView *collectionView;
 15
 16 @end
 17
 18 @implementation ViewController
 19
 20 #pragma mark - life Cycle
 21
 22 - (void)viewDidLoad {
 23     [super viewDidLoad];
 24     self.title = @"HeaderCollectionView";
 25     self.automaticallyAdjustsScrollViewInsets = NO;
 26     self.navigationController.navigationBar.translucent = NO;
 27     self.view.backgroundColor = [UIColor whiteColor];
 28     [self setCollectionView];
 29     [self setHeaderView];
 30 }
 31
 32 #pragma mark - setUI
 33
 34 - (void)setCollectionView {
 35
 36     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
 37     layout.itemSize = CGSizeMake((self.view.frame.size.width - 30) / 3, (self.view.frame.size.width - 30) / 3);
 38     self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
 39     self.collectionView.backgroundColor = [UIColor clearColor];
 40     self.collectionView.delegate = self;
 41     self.collectionView.dataSource = self;
 42     // 最重要的一句代码!!!
 43     self.collectionView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
 44     self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
 45     [self.view addSubview:self.collectionView];
 46
 47     // 注册cell
 48     [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collectionCellIdentify"];
 49     [self.collectionView registerNib:[UINib nibWithNibName:@"SectionHeaderView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"sectionHeaderView"];
 50 }
 51
 52 - (void)setHeaderView {
 53
 54     // 注意这里设置headerView的头视图的y坐标一定是从"负值"开始,因为headerView是添加在collectionView上的.
 55     UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, -200, self.view.frame.size.width, 200)];
 56     headerView.backgroundColor = [UIColor greenColor];
 57     [self.collectionView addSubview:headerView];
 58 }
 59
 60 #pragma mark - UICollectionViewDataSource
 61
 62 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
 63
 64     return 10;
 65 }
 66
 67 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
 68
 69     return 5;
 70 }
 71
 72 - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
 73
 74     UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCellIdentify" forIndexPath:indexPath];
 75     cell.backgroundColor = [UIColor redColor];
 76     return cell;
 77 }
 78
 79 #pragma mark - UICollectionViewDelegateFlowLayout
 80
 81 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
 82
 83     return UIEdgeInsetsMake(0, 0, 0, 0);
 84 }
 85
 86 #pragma mark - UICollectionViewDelegate
 87
 88 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
 89
 90     // 复用SectionHeaderView,SectionHeaderView是xib创建的
 91     SectionHeaderView *headerView = [self.collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"sectionHeaderView" forIndexPath:indexPath];
 92     return headerView;
 93
 94 }
 95
 96 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
 97
 98     return CGSizeMake(self.view.frame.size.width, 41);
 99 }
100
101 @end

每天进步一点点......你也加油哟!!

转载于:https://www.cnblogs.com/pengsi/p/5992289.html

UICollectionView实现带头视图和组的头视图同时存在实现相关推荐

  1. 导航栏透明度渐变; 下拉头视图拉伸效果;勾号动画; 一段文字中点击部分可响应不同事件...

    之前通过设置navigationBar的barTintColor设置导航栏颜色,然后拿到self.navigationController.navigationBar.subviews.firstOb ...

  2. 项目的简单总结二--可拉伸的头视图

    项目总结二 tableVIew和collectionview中头视图的可拉伸放大效果 demo中只做了tableview的效果, collectionview做法一样 效果如下图:      demo ...

  3. 隐藏头视图即隐藏UINavigationBar

    //隐藏头视图即隐藏UINavigationBar - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOpt ...

  4. CollectionView的HeaderView头视图悬停

    上一篇我写了关于CollectionView的HeaderView头视图的添加的方法和实现,现在又需要在滑动的时候像TableView的section一样在顶部悬停,在网上搜索了一些文章也比较少提到c ...

  5. 组合体视图的画图步骤_§5-2 画组合体视图的方法与步骤—叠加型组合体的视图画法...

    课题 § 5-2 画组合体视图的方法与步骤-叠加型组合 体的视图画法 课型 新授课 教具 1 模型 2 .绘图工具 3 .课件 教法 演示法.演练结合 教学目标 及重难点 教学目标: 1 .掌握绘制组 ...

  6. 【JetPack】ViewBinding 视图绑定组件 ( 启用模块 | 视图绑定定制 | 绑定类名称生成规则 | 绑定类字段生成规则 | 绑定类获取根视图 | 绑定类获取布局组件 )

    文章目录 I . 视图绑定组件简介 II . 视图绑定 ViewBinding 使用前提 ( Android Studio 3.6 ) III . 视图绑定组件启用 IV . 定制视图绑定 ( 启用视 ...

  7. flask框架视图和路由_角度视图,路由和NgModule的解释

    flask框架视图和路由 Angular vs AngularJS (Angular vs AngularJS) AngularJS (versions 1.x) is a JavaScript-ba ...

  8. Oracle视图添加约束,Oracle创建视图的语法

    Oracle创建视图的语法 导读:就爱阅读网友为大家分享了多篇关于 "oracle 创建序列语法" 资料,内容精辟独到,非常感谢网友的分享,希望从中能找到对您有所帮助的内容. 相关 ...

  9. odoo10参考系列--视图三(其他高级视图)

    图表 图表视图用于在多个记录或记录组上可视化聚合视图.它的根元素是<graph> ,可以有以下属性: type 使用bar (默认的), pie 和line三个中的一个图表类型 stack ...

  10. uml具有多种视图_UML语言中五大视图

    UML语言纵览 视图 UML语言中的视图大致分为如下5种: 1.用例视图.用例视图强调从系统的外部参与者(主要是用户)的角度看到的或需要的系统功能. 2.逻辑视图.逻辑视图从系统的静态结构和动态行为角 ...

最新文章

  1. TCP/IP协议族(一) HTTP简介、请求方法与响应状态码
  2. allgro显示网络名称_相同的4G网络,为什么你的网速总是慢?知道这3点原因,网速翻倍...
  3. 成功解决TypeError: object of type ‘int‘ has no len()
  4. 【今晚7点半】:六款开源LL-HLS/LL-DASH播放器评测
  5. QDU-Training-01
  6. 【第五课】LNMP环境的入门
  7. r语言中paste函数_R中的paste()函数-简要指南
  8. java 变位词,[Java教程]变位词的查找(下)
  9. Chapter 5. MPEG-4 Visual
  10. double除以int结果是int吗_游戏开发java中int可以用汉字吗?
  11. 数据库系统概念第6版第三章答案
  12. 新浪股票数据接口获取
  13. 什么是cs架构和bs架构
  14. 根据经纬度确定行政区域_基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标...
  15. 【Linux/Unix】Linux中的seq命令
  16. 2020校招前端面经
  17. 2018版本webstorm的安装与汉化!【最新,超全,超详细!】
  18. python decorator wrapper_python装饰器(decorator)
  19. Golang 生成分布式单调递增 UUID
  20. vue下载excel模板

热门文章

  1. selenium03-三个简单的web自动化实例
  2. 【虚拟机】关于 virtualbox 和 vmware workstation 对比的个人见解
  3. Dynamic web project下SSM整合
  4. [JSOI2008] 最小生成树计数
  5. sonar-runner命令模式运行sonar
  6. [原创]markdown语法学习(commonmark)
  7. Python爬虫之Scrapy框架结构
  8. 发展型机器人:由人类婴儿启发的机器人. 2.6 本章总结
  9. ubunut14.04修改时区,查看版本信息
  10. 数组操作--微信小程序学习教程