tableViewCell里嵌套collectionView视图
2016-07-16 本文已影响7896人
fwlong
Hello,最近在做项目过程中遇到一个需求,就是在不同的详情页显示不同数量的图片,很是懵逼了一会。。。所以写下来,希望能够帮到有需要的朋友。由于刚写了测试用的,所以功能还是很简陋,主要是提供一个思路。
进入正题。
首先你需要建立模型,请求数据。有了模型和数据之后,搭建框架,建立tableView,创建cell(tableView)。
主要思路:在cell上加一个backView,再在backView上添加CollectionView
相关文件名:
相关文件名.png代码实例:
我使用xib布局
xib布局.png
拖线(此处只写重要点)
tableViewCell的.h
//背景View
@property (strong, nonatomic) IBOutlet UIView *backView;
//CollectionView
@property (strong, nonatomic) IBOutlet ImageCollectionView *imageCollection;
tableViewCell的.m
//此处引入ControllerViewCell,由于我的CollectionView只放图片,所以叫ImageControllerView
#import "ImageCollectionViewCell.h"
//遵循协议
@interface DetailTableViewCell ()<UICollectionViewDataSource,UICollectionViewDelegate>
@end
//标识符
static NSString * const reuseIdentifier = @"ImageCollectionViewCell";
- (void)awakeFromNib {
//此处是我给头像削圆角
self.ownerHeaderImage.layer.cornerRadius = self.ownerHeaderImage.bounds.size.width/2;
self.ownerHeaderImage.layer.masksToBounds = YES;
//布局
UICollectionViewFlowLayout * flowLayout = [[UICollectionViewFlowLayout alloc] init];
//根据自己的需求设置宽高
[flowLayout setItemSize:CGSizeMake(self.backView.frame.size.width, 150)];
//竖直滑动
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
//内边距,列、行间距
flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
flowLayout.minimumInteritemSpacing = 0;
flowLayout.minimumLineSpacing = 0;
[self.imageCollection setCollectionViewLayout:flowLayout];
//注册(xib)
[self.imageCollection registerNib:[UINib nibWithNibName:@"ImageCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:reuseIdentifier];
//代理、数据源(也可以拖线)
self.imageCollection.delegate = self;
self.imageCollection.dataSource = self;
//添加到背景View上(此处可以不写,也可以实现,写代码写习惯了,总想写)
// [self.backView addSubview:self.imageCollection];
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 2;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 2;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
ImageCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
return cell;
}
好了,基本功能就实现了。具体功能得看你的需求了。
为什么使用collectionView呢?是因为使用collectionView可以根据你所给的数据判断显示数量。添加多个View也可以,但是得判断,让显示的图片初始化,不存在的图片隐藏。
以上是我的个人见解,哪里有误,请指出,谢谢。
修改一下问题
问题:
collectionView中的cell与边界之间有距离(我需要紧贴边界);
原因:
由于是xib布局,所以加载tableViewCell走awakeFromNib方法只走一次,tableView的cell可以适应屏幕宽度,但是会把自身的宽度返回给backView(添加的那个背景View,但是我试过,似乎不添加也没问题),以及collectionView,导致与边框有很大间隙。
解决方案:
遵循 UICollectionViewDelegateFlowLayout
使用如下方法:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(self.backView.frame.size.width, 150);
}