I want to add image and label to collection view please help us to add label and image to collection cell

i put 9 images in the collectionView, and when i scroll the tableView, i found bad performance.

i am using

1. GCD to read cached images
2. image has been scaled down, so each image's resolution in collectionView is ScreenWidth / 3.f * SreenWidth / 3.f

so, can you give me some advices to improve the performance?

Hi,
I've been trying to figure out how to do this in Swift, but I'm not able to. For example, it's complaining that I need required initializer init(coder:) in the custom TableViewCell, I'm also not sure how to pass the delegate/datasource (Swift version of: id<UICollectionViewDataSource, UICollectionViewDelegate>)dataSourceDelegate). Any thoughts?

not getting section info.

can anyone help?

I add two collection view in a cell. And I give this two different tag. What I doing in the delegate is to recognise the tag of the collection view to do different thing. I think it may work. But it doesn't. I set 2 item for first collection, and 5 for second. Actually the two collection view just to display the same number of items.Is there some problem about what i do?

Oppps Problme Solved!! I did not change CustomeTableCell class in Storyboard

Hello Ash,

I am working on app where I will going to use your project AFTabledCollectionView.

First of all I must say its great library. I am going to do really custom things with this.

The Storyboard or xib files are not used in your project.

However for my requirement I am going to use Storyboard.

AFViewController in your project is class of UITableViewController.

However in my oproject I am going to use MyViewController and within that I am going to have UITableView.

Here how .h Looks

*** Yours AFViewController.h

import <UIKit/UIKit.h>

@interface AFViewController : UITableViewController <UICollectionViewDataSource, UICollectionViewDelegate>

@EnD

*** My TopicViewController equal to your AFViewController

import <UIKit/UIKit.h>

@interface TopicViewController : UIViewController <UITableViewDataSource,UITableViewDelegate,UICollectionViewDataSource,UICollectionViewDelegate>
@Property (weak, nonatomic) IBOutlet UITableView *topicTable;

@EnD

However I am getting error at

-(void)tableView:(UITableView *)tableView willDisplayCell:(AFTableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
[cell setCollectionViewDataSourceDelegate:self index:indexPath.row];<<<Error at this point
NSInteger index = cell.collectionView.index;

CGFloat horizontalOffset = [self.contentOffsetDictionary[[@(index) stringValue]] floatValue];

NSLog(@"horizontaloffset %f",horizontalOffset);
[cell.collectionView setContentOffset:CGPointMake(horizontalOffset, 0)];

}

My question to you is do you know have code which has storyboard or xib ?
Do you get similar error when using UIViewController instead of UITableViewController?

Hey,

I'm trying to keep the focused UICollectionViewCell on the left, so I'm disabling scrolling on the UICollectionView and scroll myself like this:

- (void)collectionView:(UICollectionView *)collectionView didUpdateFocusInContext:(UICollectionViewFocusUpdateContext *)context withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator { if (!context.nextFocusedIndexPath) { return; } collectionView.scrollEnabled = NO; [collectionView scrollToItemAtIndexPath:context.nextFocusedIndexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:YES]; }

unfortunately what happens is that the UITableView also scrolls down, which is not what I want, as I'm only scrolling to the right.

Do you have an idea why this is happening? The indexPath for the next UICollectionViewCell is the same for each UITableViewCell, so indexPath 0-0 in UICollectionView is obviously present in each UITableViewCell (I'm guessing that's why the focus engine in tvOS gets a bit confused). But this effect works for example in the Netflix app.

I'll appreciate any help.

Thanks!

Hello，thanks a lot for your sample code and tutorial ,and I have questions to ask you .In the first paragraph of your tutorial ,you say "We want a clear separation of concerns so that the UITableViewCell isn’t acting as the data source or delegate for the UICollectionView (because that would be very, very bad)."
About clear separation,why not let the UITableViewCell act as the data source or delegate for the UICollectionView,I would like to make the UITableViewCell act as the data source or delegate for the UICollectionView usually if I haven't read your tutorial.There are my questions :
1.What are the shortcomings?
2. When to make the UITableViewCell act as the data source or delegate for the UICollectionView? When not do that?Could you talk about your ideas?

thanks a lot .

Hello Ash,

This isn't an issue but rather a request to see if you have any code that would cater towards having different uniform cell sizes of collectionview cells per table index cell in a table section?

If not maybe you can guide me on how to go about doing that? I currently modified your function: setCollectionViewDataSourceDelegate by adding one more parameter which would dictate the cell dimension type:

-(void)setCollectionViewDataSourceDelegate:(id<UICollectionViewDataSource, UICollectionViewDelegate>)dataSourceDelegate index:(NSInteger)index andCellType: (BOOL) typeCell

Since there are just two types of cells, a billboard and a portrait one, a bool was sufficient to determine the type.

Here is the code i used in the tableviewcontroller. The indexPaths.rows not included below are used to display header data and so were not included in the logic.

- (void)tableView:(UITableView *)tableView willDisplayCell:(ShowsTableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(indexPath.row == 1)
    {

        [cell setCollectionViewDataSourceDelegate:self index:indexPath.row andCellType:NO];
        NSInteger index = cell.collectionViewHorizontal.tag;
        CGFloat horizontalOffset = [self.contentOffsetDictionary[[@(index) stringValue]] floatValue];
        [cell.collectionViewHorizontal setContentOffset:CGPointMake(horizontalOffset, 0)];

    }
    else if(indexPath.row == 3)
    {

        [cell setCollectionViewDataSourceDelegate:self index:indexPath.row andCellType:YES];
        NSInteger index = cell.collectionViewHorizontal.tag;
        CGFloat horizontalOffset = [self.contentOffsetDictionary[[@(index) stringValue]] floatValue];
        [cell.collectionViewHorizontal setContentOffset:CGPointMake(horizontalOffset, 0)];

    }
    else if(indexPath.row == 5)
    {

        [cell setCollectionViewDataSourceDelegate:self index:indexPath.row andCellType:YES];
        NSInteger index = cell.collectionViewHorizontal.tag;
        CGFloat horizontalOffset = [self.contentOffsetDictionary[[@(index) stringValue]] floatValue];
        [cell.collectionViewHorizontal setContentOffset:CGPointMake(horizontalOffset, 0)];

    }
    else if(indexPath.row == 7)
    {

        [cell setCollectionViewDataSourceDelegate:self index:indexPath.row andCellType:YES];
        NSInteger index = cell.collectionViewHorizontal.tag;
        CGFloat horizontalOffset = [self.contentOffsetDictionary[[@(index) stringValue]] floatValue];
        [cell.collectionViewHorizontal setContentOffset:CGPointMake(horizontalOffset, 0)];

    }
    else
    {

        [cell setCollectionViewDataSourceDelegate:self index:indexPath.row andCellType:YES];
        NSInteger index = cell.collectionViewHorizontal.tag;
        CGFloat horizontalOffset = [self.contentOffsetDictionary[[@(index) stringValue]] floatValue];
        [cell.collectionViewHorizontal setContentOffset:CGPointMake(horizontalOffset, 0)];

    }

}

In my tableview Cell logic i have this

- (void)awakeFromNib {

    [self setFlowLayouts];
    self.contentView.backgroundColor = [UIColor blackColor];
}

-(void)setFrame:(CGRect)frame {
    [super setFrame:frame];
    [self setNeedsDisplay]; // force drawRect:
}

//Happens after setCollectionViewDataSourceDelegate
-(void)layoutSubviews
{
    [super layoutSubviews];

    if (self.cellType) {
        _layout.itemSize = CGSizeMake(170, 249); //portrait images 143.5 x 207.5. Added 12 143.5, 207.5
        _layout.sectionInset = UIEdgeInsetsMake(15, 20, 15, 10);//15, 20, 15, 10
    } else {
        _layout.sectionInset = UIEdgeInsetsMake(15, 20, 15, 10);//left 10
        _layout.itemSize = CGSizeMake(300, 169); //billboard images 271, 152
    }

    self.collectionViewHorizontal.frame = self.contentView.bounds;
}

- (void)prepareForReuse
{
    [super prepareForReuse];
}

#pragma mark - Private Methods
-(void)setCollectionViewDataSourceDelegate:(id<UICollectionViewDataSource, UICollectionViewDelegate>)dataSourceDelegate index:(NSInteger)index andCellType: (BOOL) typeCell
{

    self.collectionViewHorizontal.dataSource = dataSourceDelegate;
    self.collectionViewHorizontal.delegate = dataSourceDelegate;
    self.collectionViewHorizontal.tag = index;

    self.cellType = typeCell;

    [self.collectionViewHorizontal reloadData];
}

- (void) setFlowLayouts
{
    _layout = [[UICollectionViewFlowLayout alloc] init];
    _layout.sectionInset = UIEdgeInsetsMake(10, 20, 9, 10); //10, 20, 9, 10
    _layout.itemSize = CGSizeMake(270, 148);
    _layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    self.collectionViewHorizontal = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:_layout];
    [self.collectionViewHorizontal registerClass:[ShowCollectionViewCell class] forCellWithReuseIdentifier:CollectionViewCellIdentifier];
    self.collectionViewHorizontal.backgroundColor = [UIColor clearColor];
    self.collectionViewHorizontal.showsHorizontalScrollIndicator = NO;
    [self.contentView addSubview:self.collectionViewHorizontal];
}

The cells in the collection view on the first table index has the billboard dimension type. While the remaining table indexes have collectionview cells with the portrait dimension type.

As the user scrolls the tableview up and down, on an iphone 5s and below, the initial table indexes display the billboard and portrait dimensions in their collectionviews correctly. However, towards the bottom the billboard collectionview cells get incorrectly used where portrait cells should be displayed as well UNTIL the user swipes left and right on that collectionview where it then corrects itself. The content in the cells are correct throughout the application.

Is there a way for me to force it to draw correctly as the user sees that collectionview for the first time?

Hopefully my post makes sense. I would be grateful if you could help! Thank you.

If the collectionView is decelerating and you scroll the base tableView (e.g down), different rows are decelerating as well (same with your example)

Thanks for sharing the project.
I Want to select uicollectionviewcell in uitableviewcell and push to a new view. But didSelectRowAtIndexPath doesn't work in both uitableview and collectionview. How to fix it?
I am new in apple developing, Looking forward to hearing from you soon.

I Have 5 section in tableview.1st section, 3rd section & 5th section I have added collection view. Now how can i save scroll in every section.I have also try to add collection view cell in 1st section,3rd section & 5th section but cell cell not visible.

my requirement is 1stsection add tableview cell not in that cell i need to add collection view now i have to scroll then it save like your tableview.

same as 3rd section & 5th section

Please help me

This is indeed an amazing example. I was trying to achieve this for days and without this clean project, it would have been hard to get there.

The only drawback is I don't see a way to register the collectionViewCell to the collectionView. It seems I am forced to do it in code. I rather design this on the nib in xcode, which is much easier getting constraints done.

e.g. we need to register the nib with the collectionView, but thats not possible here:

UINib *nib = [UINib nibWithNibName:CollectionViewCellIdentifier bundle:[NSBundle mainBundle]];
[??? collectionView registerNib:nib forCellWithReuseIdentifier:newsCellReuseIdentifier];

Is there a way after all and I am missing it?

When I use xib to build, xcode didn't buy it. It says [AFIndexedCollectionView retain]: message sent to deallocated instance. What's the matter?

Thanks for sharing
i have a TableView. must use 4 differentc TableViewCell and the TableViewCell have 3 different CollectionViewCell
like this how can i to do ?
Best Wishes!

Hello AshFurrow,

I have looked at your tutorial and code and have implemented it as well, but i was wondering, what happens if i have to display a different collectionview cell with different dimensions on a different row in the uitableview?

Kind Regards,

Varun

hi~
I changed height tableview cell much bigger. 800. and more add color element

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 800; }

and then

2016-01-30 20:56:27.957 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 0
2016-01-30 20:56:27.957 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 1
2016-01-30 20:56:27.957 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 2
2016-01-30 20:56:27.958 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 3
2016-01-30 20:56:27.958 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 4
2016-01-30 20:56:27.958 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 5
2016-01-30 20:56:27.958 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 6
2016-01-30 20:56:27.958 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 7
2016-01-30 20:56:27.959 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 8
2016-01-30 20:56:27.959 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 9
2016-01-30 20:56:27.959 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 10
2016-01-30 20:56:27.959 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 11
2016-01-30 20:56:27.960 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 12
2016-01-30 20:56:27.960 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 13
2016-01-30 20:56:27.960 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 14
2016-01-30 20:56:27.960 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 15
2016-01-30 20:56:27.960 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 16
2016-01-30 20:56:27.961 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 17
2016-01-30 20:56:27.961 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 18
2016-01-30 20:56:27.961 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 19
2016-01-30 20:56:27.961 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 20
2016-01-30 20:56:27.962 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 21
2016-01-30 20:56:27.962 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 22
2016-01-30 20:56:27.962 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 23
2016-01-30 20:56:27.962 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 24
2016-01-30 20:56:27.962 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 25
2016-01-30 20:56:27.963 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 26
2016-01-30 20:56:27.963 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 27
2016-01-30 20:56:27.963 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 28
2016-01-30 20:56:27.963 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 29
2016-01-30 20:56:27.964 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 30
2016-01-30 20:56:27.964 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 31
2016-01-30 20:56:27.964 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 32
2016-01-30 20:56:27.964 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 33
2016-01-30 20:56:27.965 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 34
2016-01-30 20:56:27.965 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 35
2016-01-30 20:56:27.965 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 36
2016-01-30 20:56:27.965 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 37
2016-01-30 20:56:27.966 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 38
2016-01-30 20:56:27.966 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 39
2016-01-30 20:56:27.966 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 40
2016-01-30 20:56:27.967 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 41
2016-01-30 20:56:27.967 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 42
2016-01-30 20:56:27.967 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 43
2016-01-30 20:56:27.968 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 44
2016-01-30 20:56:27.968 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 45
2016-01-30 20:56:27.968 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 46
2016-01-30 20:56:27.968 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 47
2016-01-30 20:56:27.968 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 48
2016-01-30 20:56:27.969 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 49
2016-01-30 20:56:27.969 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 50
2016-01-30 20:56:27.969 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 51
2016-01-30 20:56:27.969 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 52
2016-01-30 20:56:27.970 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 53
2016-01-30 20:56:27.970 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 54
2016-01-30 20:56:27.970 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 55
2016-01-30 20:56:27.970 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 56
2016-01-30 20:56:27.971 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 57
2016-01-30 20:56:27.971 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 58
2016-01-30 20:56:27.971 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 59
2016-01-30 20:56:27.972 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 60
2016-01-30 20:56:27.972 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 61
2016-01-30 20:56:27.973 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 62
2016-01-30 20:56:27.973 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 63
2016-01-30 20:56:27.973 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 64
2016-01-30 20:56:27.973 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 65
2016-01-30 20:56:27.974 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 66
2016-01-30 20:56:27.974 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 67
2016-01-30 20:56:27.974 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 68
2016-01-30 20:56:27.975 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 69
2016-01-30 20:56:27.975 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 70
2016-01-30 20:56:27.975 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 71
2016-01-30 20:56:27.976 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 72
2016-01-30 20:56:27.976 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 73
2016-01-30 20:56:27.976 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 74
2016-01-30 20:56:27.976 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 75
2016-01-30 20:56:27.976 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 76
2016-01-30 20:56:27.977 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 77
2016-01-30 20:56:27.977 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 78
2016-01-30 20:56:27.977 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 79
2016-01-30 20:56:27.977 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 80
2016-01-30 20:56:27.978 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 81
2016-01-30 20:56:27.978 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 82
2016-01-30 20:56:27.978 AFTabledCollectionView[40454:3174852] cellForItemAtIndexPath 0 / 83

cellForItemAtIndexPath called concurrent, without scrolling.

Any ideas!?

Hey!
Great project! Thanks!
However, I have a problem. I want to be able to press the tableview cell with the collection view and still push to a new view (Call tableView didSelectRowAtIndexPath). I think that the collection view is blocking the touch mechanism to the tableview cell.

I want to press anywhere at the cell and push a new view.

Any ideas?