tableView嵌套collectionView實(shí)現(xiàn)

前言

在實(shí)際項(xiàng)目中我們有時(shí)候會(huì)遇到這樣的需求,列表中包含多個(gè)模型數(shù)據(jù)一行顯示不下,需要左右滑動(dòng)cell或者換行上下顯示出來,這里我們可以想到使用tableView嵌套collectionView來實(shí)現(xiàn)功能


tableView嵌套collectionView.gif

我這里介紹一下橫向滾動(dòng)collectionView

一 、創(chuàng)建tableView,設(shè)置代理不多說

 UITableView  *tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height ) style:UITableViewStylePlain];
tableView.delegate = self;
tableView.dataSource = self;
self.tableView  = tableView;
[self.view addSubview: self.tableView];
實(shí)現(xiàn)代理方法
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 100;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
HZTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"HZTableViewCell"];
if (cell == nil) {
    cell = [[HZTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"HZTableViewCell"];
    cell.delegate = self;
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
cell.textLabel.text = [NSString stringWithFormat:@"%zd",indexPath.row+1];
return cell;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 200;
}

二、自定義tableViewCell

cell上添加一個(gè)collectionView,并成為其代理
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifie{
    if (self = [super initWithStyle:style  reuseIdentifier:reuseIdentifie]) {
    [self setView]; }
    return self; 
 }
-(void)setView{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.minimumLineSpacing = 40;
//橫向滑動(dòng)
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(50, 0, [UIScreen mainScreen].bounds.size.width-50, 200) collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.backgroundColor = [UIColor purpleColor];
[self.contentView addSubview:collectionView];
[collectionView registerClass:[HZCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
}
實(shí)現(xiàn)代理方法
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.dataSource.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

HZCollectionViewCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",indexPath.row+1]];
cell.label.text =[NSString stringWithFormat:@"%zd. %@",indexPath.row+1,self.dataSource[indexPath.row]];
return cell;
}
要實(shí)現(xiàn)點(diǎn)擊某個(gè)item將item所在的位置傳給控制器以方便做事情(我采用的是代理的方法)

定義一個(gè)協(xié)議
#import <Foundation/Foundation.h>
@class HZTableViewCell;
@protocol HZCollectionViewDelegate <NSObject>
- (void)hzcollectionView:(HZTableViewCell *)hzTableViewCell didSelectItemAtIndexPath:(NSIndexPath *)collectionView;
@end
在collectionView的點(diǎn)擊事件中執(zhí)行代理方法,所以在上邊創(chuàng)建 HZTableViewCell的時(shí)候我有寫到 cell.delegate = self;
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
if (_delegate) {
[_delegate hzcollectionView:self didSelectItemAtIndexPath:indexPath];
}
}

然后需要在控制器中實(shí)現(xiàn)代理方法

-(void)hzcollectionView:(HZTableViewCell *)hzTableViewCell didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSIndexPath *tableViewIndexPath =  [self.tableView indexPathForCell:hzTableViewCell];
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:@"" message:[NSString stringWithFormat:@"點(diǎn)擊了第%ld行的第%ld個(gè)",tableViewIndexPath.row+1,indexPath.row+1] preferredStyle:UIAlertControllerStyleAlert];

[self.navigationController presentViewController:alertVC animated:YES completion:^{
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [alertVC dismissViewControllerAnimated:YES completion:^{
            
        }];
    });
   
}];
}

三、自定義collectionViewCell不多說,可根據(jù)需求自己設(shè)計(jì)

如此就能實(shí)現(xiàn)簡(jiǎn)單的tableView嵌套collectionView

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容