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

時間 2019-11-18

標籤 ios 京東分類菜單 uicollectionview 內容欄目 iOS 简体版

原文原文鏈接

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

在上<iOS仿京東分類菜單實例實現>已經實現了大部分主體的功能，本文是針對右邊集合列表進行修改擴展，使它達到分組的效果，本文涉及到的主要是UICollectionView的知識內容，左邊列表的實現見上一篇文章，先看實現的效果圖：數組

一：實體的建立ide

1.1分組實體的建立(tagID跟左邊表格進行關聯，roomArray是存放房間的數組，也就是單元格的集合)post

#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

二：單元格的建立atom

#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=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

三：建立節點顯示視圖spa

#import <UIKit/UIKit.h>

@interface myHeadView : UICollectionReusableView

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

注意它是繼承UICollectionReusableViewcode

#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

四：建立測試數據跟初始化集合列表orm

- (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];
    }
}

注意:關於節視圖的註冊blog

[self.myCollectionView registerClass:[myHeadView class]forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier: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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。