TableViewCell内嵌collectionView

作者: 萌九 | 来源:发表于2016-05-24 17:30 被阅读3599次
    qh_1.gif
    先上效果图
    这篇内容和上篇http://www.jianshu.com/p/b5346ebb8b28 TableViewCell内嵌ScrollView
    内容用的方法相似,因为UICollectionView继承UIScrollView,所以用法都差不多
    下面上代码:
    创建一个继承UICollectionView的类QHCollectionView
    在QHCollectionView.h中添加接口方法
    @interface QHCollectionView : UICollectionView
    /**
      *  @frame: 外界传来的frame 即collectionView的大小
      *
      *  @itemSize: 即collectionViewCell上的Item大小
      *
      *  @imagerArr: 外界存放UIImage的数组
      */
    - (instancetype)initWithFrame:(CGRect)frame collectionViewItemSize:(CGSize)itemSize withImageArr:(NSArray *)imagerArr;
    @end
    

    在QHCollectionView.m中

    #import "QHCollectionView.h"
    
    #define cellID @"cellID"
    @interface QHCollectionView ()<UICollectionViewDelegate, UICollectionViewDataSource>
    @property (nonatomic, strong) UICollectionViewFlowLayout *layout;
    @property (nonatomic, assign) CGSize ItemSize;
    @property (nonatomic, strong) NSArray *ImageArray;
    @end
    @implementation QHCollectionView
    - (UICollectionViewFlowLayout *)layout {
        if (!_layout) {
            _layout = [[UICollectionViewFlowLayout alloc] init];
            _layout.itemSize = self.ItemSize;
            _layout.minimumLineSpacing = 10.0;
            _layout.minimumInteritemSpacing = 0.0;
            _layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
            _layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        }
        return _layout;
    }
    - (instancetype)initWithFrame:(CGRect)frame collectionViewItemSize:(CGSize)itemSize withImageArr:(NSArray *)imagerArr {
        _ItemSize = itemSize;
        if (self = [super initWithFrame:frame collectionViewLayout:self.layout]) {
    //        [self setLayout:self.layout];
            _ImageArray = imagerArr;
            self.bounces = NO;
            self.pagingEnabled = NO;
            self.showsHorizontalScrollIndicator = NO;
            self.delegate = self;
            self.dataSource = self;
            [self registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellID];
        }
        return self;
    }
    
    #pragma mark - UICollectionViewDelegate --- UICollectionViewDataSource
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        return self.ImageArray.count;
    }
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
        [cell.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)]; //
    
        UIImageView *imageV = [[UIImageView alloc] initWithImage:_ImageArray[indexPath.row]];
        CGRect imageFrame = imageV.frame;
        imageFrame.size = _ItemSize;
        imageV.frame = imageFrame;
        [cell.contentView addSubview:imageV];
        return cell;
    }
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
        NSLog(@"第%ld分区--第%ld个Item", indexPath.section, indexPath.row);
    }
    
    @end
    

    最后在ViewController.m中导入头文件 以及调用

    #import "ViewController.h"
    #import "QHCollectionView.h"
    @interface ViewController ()<UITableViewDelegate, UITableViewDataSource>
    @property (nonatomic, strong) UITableView *tableView;
    @end
    
    @implementation ViewController
    - (UITableView *)tableView {
        if (!_tableView) {
            _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:(UITableViewStylePlain)];
            _tableView.delegate = self;
            _tableView.dataSource = self;
            [self.view addSubview:_tableView];
        }
        return _tableView;
    }
    - (void)viewDidLoad {
        [super viewDidLoad];
        [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:NSStringFromClass([UITableViewCell class])];
    }
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
        return 200;
    }
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
        return 2;
    }
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([UITableViewCell class]) forIndexPath:indexPath];
        UIImage *image1 = [UIImage imageNamed:@"12.jpg"];
        UIImage *image2 = [UIImage imageNamed:@"19.jpg"];
        UIImage *image3 = [UIImage imageNamed:@"25.jpg"];
        UIImage *image4 = [UIImage imageNamed:@"29.jpg"];
        NSArray *array = @[image1, image2, image3, image4, image1, image2, image3, image4];
        
        QHCollectionView *CollectionView = [[QHCollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200) collectionViewItemSize:CGSizeMake(100, 180) withImageArr:array];
        
        [cell.contentView addSubview:CollectionView];
        return cell;
    }
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    @end
    

    有什么不懂得可以提问
    最后附上Demo:https://github.com/catcups/TableViewAddCollectionView

    qh_1预览.png

    相关文章

      网友评论

      • 天上飞的狒狒: - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

        [cell.contentView removeAllSubviews]; ////试着加上这句


        QHCollectionView *CollectionView = [[QHCollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200) collectionViewItemSize:CGSizeMake(100, 180) withImageArr:array];

        [cell.contentView addSubview:CollectionView];
        return cell;
        }
      • KuKuMan:是否可以选择移除 图片 比如说两行 每行4个img 删除一行行后 能不能自动布局,会不会跳帧

      • 小白我们走吧:我有很多个cell怎么办,我的楼主 :fearful:
      • MrCoolHao:你这不复用,cell多的话就爆炸了
      • Esophack:楼主你好,我想问一下,有没有点击collection view的cell,同时实现点击对应tableviewcell的方法?
      • 卖女孩的小match:确实,楼说不错,不知道有没有复用的方法?
      • LeeDev:这个里面的 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        的 QHCollectionView *CollectionView = [[QHCollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200) collectionViewItemSize:CGSizeMake(100, 180) withImageArr:array];

        [cell.contentView addSubview:CollectionView];
        return cell;
        复用性极差
        大鹏happy2015:每一个cell 对应不同的collectview数据 collect怎么绑定
        飛呈Geek:@lichongyang_arc 的确,如果tableView行数上去的话,将是噩梦…
        萌九:@lichongyang_arc 还没打算复用:hushed:。因为看了大多的app。基本都是只有一个cell是内嵌collectionView的。比如b站的推荐页面。我用的时候就自定义一个cell在使用封装的QHCollectionView的。

      本文标题:TableViewCell内嵌collectionView

      本文链接:https://www.haomeiwen.com/subject/qumzrttx.html