iOS仿京東分類菜單之UICollectionView內容

2019-11-14 18:10:40

字體：大中小

來源：轉載

供稿：網友

在上《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;@endstatic const CGFloat collectionCellHeight=80;static const CGFloat labelHeight=20;@implementation rightCollectionViewCell//這邊很關鍵 CollectionViewCell重用- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        if (self.roomImageView==nil) {            self.roomImageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, ([UIScreen mainScreen].bounds.size.width-80-10*3)/3, 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:15];            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(2);                make.centerX.mas_equalTo(self.roomImageView).with.offset(0);                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-80-10*3)/3,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(0, 10, 250, 25);        self.label.font = [UIFont systemFontOfSize:18];        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=0; i<10; i++) {                //左邊列表數據        leftTagModel *item=[[leftTagModel alloc]init];        item.tagID=i;        item.tagName=[NSString stringWithFormat:@"第%d層",i];        [self.dataList addObject:item];                //右邊列表數據        for (int j=0; j<10; 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=0; z<20; z++) {                headRightModel *headrightModel=[[headRightModel alloc]init];                headrightModel.roomID=z;                headrightModel.roomName=[NSString stringWithFormat:@"%d類房間%d",j,z];                headrightModel.roomImageUrl=[NSString stringWithFormat:@"room%d",z%5];                [headRightModelArray addObject:headrightModel];            }            model.roomArray=headRightModelArray;            [self.allRightDataList addObject:model];        }    }        //創建列表    if (!_myTableView) {        _myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,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:1];        [_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,64, kScreenWidth-tableWidthSize-2*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=0;    //默認選擇第一個    if (self.dataList.count>0) {        self.curSelectModel=[self.dataList objectAtIndex:self.selectIndex];        [self.myTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:self.selectIndex inSection:0] 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==0) {        return 1;    }    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 = {240,40};    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 5;}- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{    return 5;}- (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 = {240,25};    return size;}-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{    CGSize size = {240,25};    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;}