TableViewCell加UIcollectionView
2016-04-23 本文已影响597人
yeshenlong520
TableCell加UICollectionView
- 小伙伴们很多时候在实现界面的时候，或多或少在TableCell上面加一些可以横向滑动的图片，怎么实现呢？
- 很多小伙伴第一想到的是用XIB贴一个Scrollview上去不就行了，话说的没错，但是怎么解决最表层tablecell复用的问题呢？在tablecell上加scrollview如果贴的图片数量不定，有时一张有时两张甚至更多！这时令人尿频的tablecell复用机制来了。他会重叠或者覆盖之前元素少的那一个Cell。导致画面的混乱，达不到我们想要的对应效果。
好了进入正题直接上关键代码
-
这是视图控制器里面的代码
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
CollectionTableCell *cell =[tableView dequeueReusableCellWithIdentifier:cell_dentifier forIndexPath:indexPath];
cell.dataArr =_dataArray[indexPath.row];
cell.fuckButton.tag =indexPath.row;
[cell.fuckButton addTarget:self action:@selector(fuckAction:) forControlEvents:UIControlEventTouchUpInside];
[cell.fuckButton setTitle:[NSString stringWithFormat:@"fuck%ld",indexPath.row] forState:0];
return cell;
}
Paste_Image.png
Paste_Image.png
这是tableCell里面的代码
- (void)setSelected:(BOOL)selected animated: (BOOL)animated {
[super setSelected:selected animated:animated];
_myCollectionView.delegate =self;
_myCollectionView.dataSource =self;
_myCollectionView.backgroundColor =[UIColor clearColor];
_withScroll =_myCollectionView.contentSize.width;
_collectionWith= _myCollectionView.frame.size.width;
//这里是实现一个效果当他滑动范围超出UIcollectionView让他可以用户交互，
反之不能交互，这样可以实现一个点击效果！集合视图能滑动让他滑动，
不能滑动可以失去交互后点击可以实现tableCell点击事件
if (_withScroll>_collectionWith) {
_myCollectionView.userInteractionEnabled =YES;
NSLog(@"yes");
}else{
_myCollectionView.userInteractionEnabled=NO;
}
NSLog(@"size=%f",_withScroll);
UICollectionViewFlowLayout *layout =(UICollectionViewFlowLayout *)_myCollectionView.collectionViewLayout;
layout.scrollDirection =UICollectionViewScrollDirectionHorizontal;
layout.itemSize =CGSizeMake(WIDTH/4, 100);
[_myCollectionView setCollectionViewLayout:layout];
[_myCollectionView registerNib:[UINib nibWithNibName:@"MyCollectionCell" bundle:nil] forCellWithReuseIdentifier:@"MyCollectionCell"];
// Configure the view for the selected state
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return _dataArr.count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
MyCollectionCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:@"MyCollectionCell" forIndexPath:indexPath];
cell.PhotoView.image =[UIImage imageNamed:_dataArr[indexPath.row]];
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
}
-(void)setDataArr:(NSMutableArray *)dataArr{
_dataArr =dataArr;
- 注意这个刷新视图尤其重要，它可以成功破解外层TabelViewcell的复用机制。如果当初把UIcollectionView换成UIScrollView的话，它拿到数据是不能刷新视图。很难解决复用问题，而集合视图做到了！
[_myCollectionView reloadData];
} - 以上便是tableCell上放集合视图的例子。其实Cell上可以放任何视图，比如轮播图之类的。只要是UIview的之类就行。我上次把轮播图放在了UIcollectionView的header上，效果也不错。因为header和footer是不被复用的，可以解决我们不想复用的事件！
