在上《iOS仿京东分类菜单实例实现》已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列表的实现见上一篇文章,先看实现的效果图:

一:实体的创建

1.1分组实体的创建(tagID跟左边表格进行关联,roomArray是存放房间的数组,也就是单元格的集合)

#import <Foundation/Foundation.h>

@interface rightModel : NSObject
//实体leftTageModel中的主键值
@property(assign,nonatomic)long tagID;
@property(assign,nonatomic)long roomStyleID;
@property(copy,nonatomic)NSString *roomStyleName;
//房间实体headRightModel的数组
@property(strong,nonatomic)NSMutableArray *roomArray;
@end

1.2房间实体的创建

#import <Foundation/Foundation.h>

@interface headRightModel : NSObject

@property(assign,nonatomic)long roomID;
@property(copy,nonatomic)NSString *roomName;
@property(copy,nonatomic)NSString *roomImageUrl;
@end

二:单元格的创建

#import <UIKit/UIKit.h>
#import "headRightModel.h" @interface rightCollectionViewCell : UICollectionViewCell @property(strong,nonatomic)headRightModel *curHeadRightModel; +(CGSize)ccellSize; @end
#import "rightCollectionViewCell.h"

@interface rightCollectionViewCell()
@property(strong,nonatomic)UIImageView *roomImageView;
@property(strong,nonatomic)UILabel *roomLabel;
@end static const CGFloat collectionCellHeight=;
static const CGFloat labelHeight=; @implementation rightCollectionViewCell //这边很关键 CollectionViewCell重用
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
if (self.roomImageView==nil) {
self.roomImageView=[[UIImageView alloc] initWithFrame:CGRectMake(, , ([UIScreen mainScreen].bounds.size.width--*)/, collectionCellHeight-labelHeight)];
self.roomImageView.contentMode=UIViewContentModeScaleAspectFill;
self.roomImageView.clipsToBounds = YES;
self.roomImageView.layer.masksToBounds = YES;
self.roomImageView.layer.cornerRadius = 2.0;
[self.contentView addSubview:self.roomImageView];
} if (self.roomLabel==nil) {
self.roomLabel=[[UILabel alloc]init];
self.roomLabel.font=[UIFont systemFontOfSize:];
self.roomLabel.textAlignment=NSTextAlignmentCenter;
[self.roomLabel sizeToFit];
[self.contentView addSubview:self.roomLabel];
[self.roomLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.roomImageView.mas_bottom).with.offset();
make.centerX.mas_equalTo(self.roomImageView).with.offset();
make.height.mas_equalTo(labelHeight);
}];
}
}
return self;
} -(void)setCurHeadRightModel:(headRightModel *)curHeadRightModel
{
_curHeadRightModel=curHeadRightModel;
self.roomImageView.image=[UIImage imageNamed:_curHeadRightModel.roomImageUrl];
self.roomLabel.text=_curHeadRightModel.roomName;
} +(CGSize)ccellSize
{
return CGSizeMake(([UIScreen mainScreen].bounds.size.width--*)/,collectionCellHeight);
}
@end

三:创建节点显示视图

#import <UIKit/UIKit.h>

@interface myHeadView : UICollectionReusableView

- (void) setLabelText:(NSString *)text;
@end

注意它是继承UICollectionReusableView

#import "myHeadView.h"

@interface myHeadView()
@property (strong, nonatomic) UILabel *label;
@end @implementation myHeadView - (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.label = [[UILabel alloc] init];
//在这边调整它的位置
self.label.frame=CGRectMake(, , , );
self.label.font = [UIFont systemFontOfSize:];
self.label.backgroundColor=[UIColor brownColor];
self.label.textColor=[UIColor yellowColor];
[self addSubview:self.label];
}
return self;
} - (void) setLabelText:(NSString *)text
{
self.label.text = text;
} @end

四:创建测试数据跟初始化集合列表

- (void)viewDidLoad {
[super viewDidLoad]; //初始化
self.view.backgroundColor=[UIColor whiteColor];
self.dataList=[[NSMutableArray alloc]init];
self.rightdataList=[[NSMutableArray alloc]init];
self.allRightDataList=[[NSMutableArray alloc]init];
self.isReturnLastOffset=YES;
//是否允许右位保持滚动位置
self.isKeepScrollState=YES;
//测试数据
for (int i=; i<; i++) { //左边列表数据
leftTagModel *item=[[leftTagModel alloc]init];
item.tagID=i;
item.tagName=[NSString stringWithFormat:@"第%d层",i];
[self.dataList addObject:item]; //右边列表数据
for (int j=; j<; j++) {
rightModel *model=[[rightModel alloc]init];
model.tagID=i;
model.roomStyleID=j;
model.roomStyleName=[NSString stringWithFormat:@"%d层类型%d",i,j];
NSMutableArray *headRightModelArray=[[NSMutableArray alloc]init];
for (int z=; z<; z++) {
headRightModel *headrightModel=[[headRightModel alloc]init];
headrightModel.roomID=z;
headrightModel.roomName=[NSString stringWithFormat:@"%d类房间%d",j,z];
headrightModel.roomImageUrl=[NSString stringWithFormat:@"room%d",z%];
[headRightModelArray addObject:headrightModel];
}
model.roomArray=headRightModelArray;
[self.allRightDataList addObject:model];
}
} //创建列表
if (!_myTableView) {
_myTableView = [[UITableView alloc] initWithFrame:CGRectMake(,,tableWidthSize, kScreenHeight) style:UITableViewStylePlain];
_myTableView.backgroundColor=[UIColor grayColor];
_myTableView.showsVerticalScrollIndicator = NO;
_myTableView.showsHorizontalScrollIndicator=NO;
_myTableView.dataSource = self;
_myTableView.delegate = self;
_myTableView.tableFooterView=[[UIView alloc]init];
_myTableView.separatorColor= [UIColor colorWithRed:52.0f/255.0f green:53.0f/255.0f blue:61.0f/255.0f alpha:];
[_myTableView registerClass:[leftTableCell class] forCellReuseIdentifier:NSStringFromClass([leftTableCell class])]; if ([self.myTableView respondsToSelector:@selector(setLayoutMargins:)]) {
self.myTableView.layoutMargins=UIEdgeInsetsZero;
}
if ([self.myTableView respondsToSelector:@selector(setSeparatorInset:)]) {
self.myTableView.separatorInset=UIEdgeInsetsZero;
}
[self.view addSubview:_myTableView];
} //创建集合表格
if (!_myCollectionView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(tableWidthSize+leftMargin,, kScreenWidth-tableWidthSize-*leftMargin, kScreenHeight) collectionViewLayout:layout];
self.myCollectionView.backgroundColor=[UIColor whiteColor];
self.myCollectionView.showsHorizontalScrollIndicator=NO;
self.myCollectionView.showsVerticalScrollIndicator=NO;
[self.myCollectionView registerClass:[rightCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([rightCollectionViewCell class])];
[self.myCollectionView registerClass:[myHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([myHeadView class])];
self.myCollectionView.dataSource = self;
self.myCollectionView.delegate = self;
[self.view addSubview:self.myCollectionView];
} self.selectIndex=;
//默认选择第一个
if (self.dataList.count>) {
self.curSelectModel=[self.dataList objectAtIndex:self.selectIndex];
[self.myTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:self.selectIndex inSection:] animated:YES scrollPosition:UITableViewScrollPositionTop];
[self.myTableView reloadData]; //右边数据加载
[self predicateDataSoure];
}
}

注意:关于节视图的注册

[self.myCollectionView registerClass:[myHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([myHeadView class])];

五:集合视图UICollectionViewDataSource, UICollectionViewDelegate的内容

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return self.rightdataList.count;
} - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
rightModel * array=self.rightdataList[section]; if (array.roomArray.count==) {
return ;
}
else
{
return array.roomArray.count;
}
} - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
rightCollectionViewCell *ccell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([rightCollectionViewCell class]) forIndexPath:indexPath];
rightModel * array=self.rightdataList[indexPath.section];
headRightModel *model=[array.roomArray objectAtIndex:indexPath.row];
ccell.curHeadRightModel=model;
return ccell;
} -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
CGSize size = {,};
return size;
} - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ myHeadView *headView;
rightModel * array=self.rightdataList[indexPath.section];
if([kind isEqual:UICollectionElementKindSectionHeader])
{
headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([myHeadView class]) forIndexPath:indexPath];
//别在这对headView坐标做处理
[headView setLabelText:[NSString stringWithFormat:@"%@",array.roomStyleName]];
} return headView;
} - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return [rightCollectionViewCell ccellSize];
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsZero;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return ;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return ;
} - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{ }

注意:别在viewForSupplementaryElementOfKind,对myHeadView进行坐标的调整,因为它是全局的,会导致所有的节点都混在一起,记得设置它的节头大小,才会显示出来;

 六:扩展关于viewForSupplementaryElementOfKind,它可以设置节头跟节脚,下面引用网上一个比较全的说明

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

为collection view添加一个补充视图(页眉或页脚)

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

设定页眉的尺寸

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

设定页脚的尺寸

- (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier

视图创建:

[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader"];
[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader"]; -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
CGSize size = {,};
return size;
} -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
CGSize size = {,};
return size;
} - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
MyHeadView *headView; if([kind isEqual:UICollectionElementKindSectionHeader])
{
headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];
[headView setLabelText:[NSString stringWithFormat:@"section %d's header",indexPath.section]];
}
else if([kind isEqual:UICollectionElementKindSectionFooter])
{
headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];
[headView setLabelText:[NSString stringWithFormat:@"section %d's footer",indexPath.section]];
}
return headView;
}

实例源代码下载地址

iOS仿京东分类菜单之UICollectionView内容的更多相关文章

  1. iOS仿京东分类菜单实例实现

    在APP开发过程中此功能还是比较常见的模块,左边为菜单展示,右边为菜单下数据的展示,选择不同的菜单右边的数据源进行更新,此实例主要运用到UITableView,UICollectionView,OC谓 ...

  2. iOS仿QQ侧滑菜单、登录按钮动画、仿斗鱼直播APP、城市选择器、自动布局等源码

    iOS精选源码 QQ侧滑菜单,右滑菜单,QQ展开菜单,QQ好友分组 登录按钮 3分钟快捷创建高性能轮播图 ScrollView嵌套ScrolloView(UITableView .UICollecti ...

  3. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  4. 仿京东树形菜单插件hovertree

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...

  5. Jquery仿京东分类导航层简单实现

    <script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...

  6. 仿京东左侧菜单 hover效果-简易demo

    简单描述: 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡(或事件委托) .cont{display:inline-block;width:200px;height:200px;bord ...

  7. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  8. iOS 仿看了吗应用、指南针测网速等常用工具、自定义弹出视图框架、图片裁剪、内容扩展等源码

    iOS精选源码 扩展内容的cell - folding-cell 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... JPImageresizerView 仿微信的图片裁剪 带年月和至今以 ...

  9. Android:实现仿 美团/淘宝 多级分类菜单效果

    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...

随机推荐

  1. codeforces B. Friends and Presents(二分+容斥)

    题意:从1....v这些数中找到c1个数不能被x整除,c2个数不能被y整除! 并且这c1个数和这c2个数没有相同的!给定c1, c2, x, y, 求最小的v的值! 思路: 二分+容斥,二分找到v的值 ...

  2. 队列的链式存储方式的实现(Java语言描述)

    链队列的结构示意图: 先进先出. QueueInterface.java//操作方法接口 package 队列的实现; public interface QueueInterface { public ...

  3. Android学习笔记之布局技巧以及布局中的细节介绍....

    PS:休息两天,放一放手上的东西,做做总结... 学习内容: 1.Android中LinearLayout布局技巧... 2.layout中drawable属性的区别...   先简单的介绍一下dra ...

  4. sql server 随机读取数据

    --sql server 随机读取数据 * FROM [tablename] ORDER BY NEWID() pk from [tablename] ORDER BY NEWID()) --这两个方 ...

  5. Django--models连表构建

    需求 models多表(一对多.多对多.一对一)的构建 速查 1.一对多 1 2 3 class User(models.Model):     name = models.CharField(max ...

  6. BlocksKit初见:一个支持将delegate转换成block的Cocoa库

    简介 项目主页: https://github.com/zwaldowski/BlocksKit BlocksKit 是一个开源的框架,对 Cocoa 进行了扩展,将许多需要通过 delegate 调 ...

  7. C#函数式程序设计之代码即数据

    自3.5版本以来,.NET以及微软的.NET语言开始支持表达式树.它们为这些语言的某个特定子集提供了eval形式的求值功能.考虑下面这个简单的Lambda表达式: Func<int, int, ...

  8. Node.js爬虫抓取数据 -- HTML 实体编码处理办法

    cheerio DOM化并解析的时候 1.假如使用了 .text()方法,则一般不会有html实体编码的问题出现 2.如果使用了 .html()方法,则很多情况下(多数是非英文的时候)都会出现,这时, ...

  9. 利用IronJs在.NET程序里面跑javascript脚本

    what’s dlr The dynamic language runtime (DLR) is a runtime environment that adds a set of services f ...

  10. 非链接方式访问数据库--查询的数据集用Dataset来存储。

    private void Button_Click_1(object sender, RoutedEventArgs e) { //非链接方式访问数据库, //1创建连接对象(连接字符串) using ...