iOS: Not full frame of UICollectionViewCell is tappable/clickable - ios

I created a UIView with a UICollectionView, and that UIView is added on a UIViewController. UIViewController using the delegate (photoDidTapped) of that UIView to determine is something was clicked/tapped. First row, is okay, means whole cell area is tappable. Second row, horizontal half of that is clickable. 3rd row, almost 10% horizontal of the cell is clickable and so on.
Code:
- (UICollectionView *)collectionView
{
if (!_collectionView) {
UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(THUMB_DIMENSION, THUMB_DIMENSION);
[flowLayout setMinimumInteritemSpacing:0.0f];
[flowLayout setMinimumLineSpacing:PHOTO_MARGIN];
_collectionView = [[UICollectionView alloc] initWithFrame:self.frame collectionViewLayout:flowLayout];
_collectionView.frame = CGRectMake(0, 0, SCREEN_WIDTH, self.frame.size.height);
_collectionView.backgroundColor = [UIColor clearColor];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.allowsSelection = YES;
_collectionView.alwaysBounceVertical = YES;
_collectionView.scrollEnabled = NO;
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"Cell"];
}
return _collectionView;
}
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
return (_photos.count > 9 ? 9 : _photos.count);
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, cell.frame.size.width, cell.frame.size.height)];
imgView.clipsToBounds = YES;
imgView.backgroundColor = RGB(250, 250, 250);
if (_photos.count) {
PhotoDM *photo = [_photos objectAtIndex:indexPath.row];
[imgView setImageWithURL:[NSURL URLWithString:photo.largeLink]
placeholderImage:[UIImage imageNamed:#"placeholder"]];
}
[cell addSubview:imgView];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"tapped: %ld", (long)indexPath.row);
if([delegate respondsToSelector:#selector(photoDidTapped:)])
[delegate performSelector:#selector(photoDidTapped:) withObject:[[NSNumber alloc] initWithInteger:indexPath.row] ];
}

Your code contains 2 problems.
1. If you create a subview, you should use self.bounds.
2. The view can be resized, after UICollectionView has been added. It means that you should configure autoresizingMask or NSLayoutConstrans. (UICollectionView can be out of view's bounds).
To debug this problem, you can create different background colors for the view, the collectionView, the viewController's view.

Related

How to load several movies' thumb image with one UICollectionView

I am build a media edit project that allow user do edit with several media.To meet this need,I push a UICollectionView in a UICollectionViewCell.
The inner UICollectionView load a movie's thumb images.
sample code:
- (void)setupUI
{
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.minimumInteritemSpacing = 0;
flowLayout.minimumLineSpacing = 0;
// flowLayout.itemSize = CGSizeMake(100, 200);
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
self.collectionView = collectionView;
collectionView.backgroundColor = [UIColor clearColor];
[self addSubview:collectionView];
collectionView.showsHorizontalScrollIndicator = NO;
collectionView.scrollEnabled = NO;
collectionView.userInteractionEnabled = NO;
// [collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
// make.edges.equalTo(self);
// }];
collectionView.delegate = self;
collectionView.dataSource = self;
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"cell"];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
PLog(#"count - %ld",self.videoItem.thumbnails.count);
return self.thumbImages.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
PLog(#"kkkkkkkkkkk,cell item %ld,cell address %#",indexPath.item,cell);
UIImage *image = self.thumbImages[indexPath.item];
if ([image isKindOfClass:[NSNull class]]) {
image = [UIImage imageWithColor:[UIColor blackColor]];
}
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[cell addSubview:imageView];
// imageView.userInteractionEnabled = YES;
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(cell);
}];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(_videoItem.thumbWidth, CollectionHeight);
}
The outer UICollectionView data source from several different movie, custom UICollectionViewLayout
sample code:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = nil;
PDVideoItemCollectionViewCell *videoCell = [_collectionView dequeueReusableCellWithReuseIdentifier:#"reuse" forIndexPath:indexPath];
PLog(#"indexrow - %ld",indexPath.item);
if (videoCell.collectionView == nil) {
[videoCell setupUI];
}
videoCell.videoItem = [self.timelineItems objectAtIndex:indexPath.item];
videoCell.videoItem.videoCell = videoCell;
[videoCell reloadCollectionData];
PLog(#"cellll - %#",videoCell);
cell = videoCell;
cell.backgroundColor = MainBackgroundColor;
return cell;
}
Debug console log:
[PDVideoItem.m:172] image - <UIImage: 0x1268a3780>, {280, 158}--46
[PDVideoItem.m:172] image - <UIImage: 0x12689b800>, {280, 158}--47
[PDVideoItem.m:172] image - <UIImage: 0x12690a000>, {280, 158}--48
[PDVideoItem.m:172] image - <UIImage: 0x126821b60>, {280, 158}--49
[PDVideoItem.m:172] image - <UIImage: 0x1268a43d0>, {280, 158}--50
[PDVideoItem.m:184] done
[PDVideoItemCollectionViewCell.m:144] count - 51
[PDVideoItemCollectionViewCell.m:151] kkkkkkkkkkk,cell item 0,cell address <UICollectionViewCell: 0x12692de30; frame = (0 0; 112.5 63.2812); layer = <CALayer: 0x12691ff80>>
[PDVideoItemCollectionViewCell.m:151] kkkkkkkkkkk,cell item 1,cell address <UICollectionViewCell: 0x126930930; frame = (112.5 0; 112.5 63.2812); layer = <CALayer: 0x12692f310>>
[PDVideoItemCollectionViewCell.m:151] kkkkkkkkkkk,cell item 2,cell address <UICollectionViewCell: 0x1263aab60; frame = (225 0; 112.5 63.2812); layer = <CALayer: 0x12688f230>>
[PDVideoItemCollectionViewCell.m:151] kkkkkkkkkkk,cell
enter image description here
Situation description:2 movie = 2 outer UIcollectionViewCell = 2 inner UIcollectionView,total 82 thumbs = 82 inner UIcollectionViewCell
kkkkkkkkkkk log in collectionView: cellForItemAtIndexPath: method,count 25
Now get the problem that the inner UIcollectionViewCell seems do not ReUse,the memory will keep increase and UI load will be slow when I use UIPinchGestureRecognizer to do timeline scale.And the inner UICollectionView's delegate method collectionView: cellForItemAtIndexPath: never invoke when I do scroll action
Uh,Actually I think the main problem is I have generated all movies thumbs at first time,but because of inner collectionViewCell do not reuse,I couldn't generate thumb according to Item Indexpath.
This project refer to Apple's application iMovie a lot,maybe the applicate situation I describe is not clear,just download iMovie
Hope your good idea.
First you have a memory issue for the inner UICollectionView which that you add the UIImageView subview even if it's already added to the view's hierarchy here:
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[cell addSubview:imageView];
So you have to replace it with the following:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
PLog(#"kkkkkkkkkkk,cell item %ld,cell address %#",indexPath.item,cell);
UIImage *image = self.thumbImages[indexPath.item];
if ([image isKindOfClass:[NSNull class]]) {
image = [UIImage imageWithColor:[UIColor blackColor]];
}
UIImageView *imageView;
if ([cell viewWithTag: ImageView_TAG]) {
imageView = [[UIImageView alloc] initWithImage:image];
imageView.tag = ImageView_TAG
[cell addSubview:imageView];
} else {
imageView = [cell viewWithTag: ImageView_TAG]
imageView.image = image
}
// imageView.userInteractionEnabled = YES;
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(cell);
}];
return cell;
}
Then for outer UICollectionView, you have to assign the collection view to the videoCell in collectionView:cellForItemAtIndexPath like:
videoCell.collectioView = collectioView
This will save your memory and avoid the increasing of the memory by effective usage of reusing cells
Good Luck :)

I have a UICollectionView in a custom TableViewCell but I can't auto-resize the CollectionView

I have a UICollectionView in a custom UITableViewCell, only UIImageView in the UICollectionView. I use SDWebImage to load image.What I want is after loading the image, both UICollectionView and it's contentView(UITableViewCell) update themselves' height to show all the image. For example, if I have three images in UICollectionView, I hope the collectionview's height equals to all three images' height summation.
Here is some code:
TableView:
- (void)createPostDetailUI{
_postDetailTableView = [UITableView new];
_postDetailTableView.delegate = self;
_postDetailTableView.dataSource = self;
_postDetailTableView.estimatedRowHeight = 180;
_postDetailTableView.tableFooterView = [UIView new];
[_postDetailTableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];
_postDetailTableView.rowHeight = UITableViewAutomaticDimension;
[self makeConstraints];
}
- (void)makeConstraints{
[_postDetailTableView mas_makeConstraints:^(MASConstraintMaker *make) {
UIEdgeInsets padding = UIEdgeInsetsMake(0, 0, 50, 0);
make.edges.equalTo(self.view).insets(padding);
}];
}
- (void)requestPostData{
//some request code
[_commentsArray addObjectsFromArray:[PostCommentModel arrayWithResponseObject:responseObject][0]];
[_postDetailTableView reloadData];
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return _commentsArray.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
PostDetailHeaderTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:#"PostDetailHeaderTableViewCell" forIndexPath:indexPath];
cell = [[PostDetailHeaderTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:#"PostDetailHeaderTableViewCell"];
[cell updateCellWithModel:_postModel];
return cell;
}
UITableViewCell(UICollectionView inside it):
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//some other views
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
layout.minimumLineSpacing = 4.0;
layout.estimatedItemSize = CGSizeMake(300, 300);
_postImageCollectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
_postImageCollectionView.backgroundColor = [UIColor clearColor];
_postImageCollectionView.showsHorizontalScrollIndicator = NO;
_postImageCollectionView.autoresizesSubviews = YES;
[_postImageCollectionView registerClass:[PostDetailImageCollectionViewCell class] forCellWithReuseIdentifier:#"PostDetailImageCollectionViewCell"];
_postImageCollectionView.delegate = self;
_postImageCollectionView.dataSource = self;
[self.contentView addSubview:_postImageCollectionView];
[self makeConstraints];
}
return self;
}
- (void)makeConstraints{
//some other views' autolayout code
[_postImageCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(_postContentLabel);
make.right.equalTo(_postContentLabel);
make.top.equalTo(_postContentLabel.mas_bottom).offset(14);
make.height.greaterThanOrEqualTo(#20);
make.bottom.equalTo(self.contentView).offset(-16);
}];
}
- (void)updateCellWithModel:(PostsModel *)model{
_imageArray = [model getImageList];
[_postImageCollectionView reloadData];
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return _imageArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
PostDetailImageCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"PostDetailImageCollectionViewCell" forIndexPath:indexPath];
NSString *cellImageURL = _imageArray[indexPath.row];
[cell.imageView sd_setImageWithURL:[NSURL URLWithString:cellImageURL] placeholderImage:[UIImage imageNamed:#"icon_default"]];
return cell;
}
UICollectionViewCell:
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
_imageView = [UIImageView new];
_imageView.frame = self.contentView.frame;
_imageView.contentMode = UIViewContentModeScaleAspectFit;
[self.contentView addSubview:_imageView];
}
return self;
}
I use auto layout and use masonry to manage it. But whatever I try to fix it, it just show me 20pt height.
ps:How to make CollectionViewCell frame fit image frame
Try this to calculate height
CGheight height= [self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height+2;
add this in ur custom cell and call this from collectionview delegate method

CollectionView Horizontal scroll not working in ios 7

CollectionView horizontal scroll not working in ios 7 but it's working fine in ios 8 and 9. Is there any solution for this ?
The Code is here:
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.itemSize = CGSizeMake(330, 100);
collection = [[UICollectionView alloc] initWithFrame:CGRectMake(0.0, 50.0, 350, 100) collectionViewLayout:layout];
collection.delegate = self;
collection.dataSource = self;
collection.backgroundColor = [UIColor greenColor];
collection.pagingEnabled = YES;
[collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"Cell"];
[self.view addSubview:collection];
It now fits my needs, and could be useful for someone else, so here is my code:
I have tested In iOS7-8-9. Below example is for Default iPad. You Just need to change target settings and O.S Version.
https://github.com/philippeauriach/fullyhorizontalcollectionview
Please download it & let us know ur comments. Happy Coding!
If you want to add collection view onto the View then use below code. Below code into i have created CL View programmatically and It's also working correctly with Autolayout and iOS 7-8-9. Please implement below code and let us know ur comments.
.H File
#interface HorizontalCollectionViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>{
NSIndexPath *visibleIndexPath;
}
#property (nonatomic, assign) NSInteger selectedCell;
#property (strong, nonatomic) IBOutlet UICollectionView *horizonCLView;
.M File
#import "HorizontalCollectionViewController.h"
static NSString * const CellIdentifier = #“horizonCell";
#interface HorizontalCollectionViewController ()
#end
#implementation HorizontalCollectionViewController
#synthesize horizonCLView;
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(#"view frame : %#",NSStringFromCGRect(self.view.frame));
[self.view layoutIfNeeded];
[self.view setNeedsLayout];
[self viewDidLayoutSubviews];
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
layout.itemSize = self.view.frame.size;
[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
[layout setMinimumInteritemSpacing:0.f];
[layout setMinimumLineSpacing:0.f];
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
horizonCLView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
horizonCLView.dataSource = self;
horizonCLView.delegate = self;
horizonCLView.backgroundColor = [UIColor lightGrayColor];
horizonCLView.scrollEnabled = YES;
[horizonCLView setBounces:NO];
[horizonCLView setUserInteractionEnabled:YES];
[horizonCLView setPagingEnabled:YES];
[horizonCLView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:CellIdentifier];
[self.view addSubview:horizonCLView];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
-(void)viewWillAppear:(BOOL)animated{
//Select Current Image For Sare In Social Media
// currentImageIndex = selectedCell;
[horizonCLView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:selectedCell inSection:0] atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
CGRect visibleRect = (CGRect){.origin = self.horizonCLView.contentOffset, .size = self.horizonCLView.bounds.size};
CGPoint visiblePoint = CGPointMake(CGRectGetMidX(visibleRect), CGRectGetMidY(visibleRect));
visibleIndexPath = [self.horizonCLView indexPathForItemAtPoint:visiblePoint];
// NSLog(#"visibleIndexPath.row in View will appear %ld",(long)visibleIndexPath.row);
//SelectedCell is a selected image from gallary view
NSLog(#"selectedCell in View will appear: %ld",(long)selectedCell);
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return [dataAry count];
}
#pragma Here we set the frame of horizontal scrll view
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
// expand cell to fill the entire view
return collectionView.frame.size;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
self.title = [[self.dataAry objectAtIndex:indexPath.row] valueForKey:#“dataAryName"];
//imageVI.image = nil;
imageVI = (UIImageView *)[cell.contentView viewWithTag:100];
if (!imageVI){
imageVI = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,self.view.bounds.size.width,self.view.bounds.size.height)];
imageVI.contentMode = UIViewContentModeScaleAspectFill;
imageVI.tag = 100;
imageVI.clipsToBounds = YES;
[cell.contentView addSubview:imageVI];
}
dispatch_async(dispatch_get_main_queue(), ^{
[asSetLib assetForURL:[NSURL URLWithString:[[self.dataAry objectAtIndex:indexPath.row] valueForKey:#"dataAryName"]] resultBlock:^(ALAsset *asset) {
// imageVI.image = [UIImage imageWithCGImage:asset.defaultRepresentation.fullScreenImage];
imageVI.image = [UIImage imageWithCGImage:asset.defaultRepresentation.fullResolutionImage];
NSLog(#"Preview view into album loaded successfully!");
} failureBlock:^(NSError *error) {
NSLog(#"An error occurred while loading image: %#", error.description);
}];
});
return cell;
}
Sudha, I think this issues in your code not an iOS7 issues.
Here, I have review two bug in ur code.
1)In this line you have give static width of collection view,
collection = [[UICollectionView alloc] initWithFrame:CGRectMake(0.0, 50.0, 350, 100) collectionViewLayout:layout];
Instead Of it will be goes look like,
collection = [[UICollectionView alloc] initWithFrame:CGRectMake(0.0, 50.0, self.view.bounds.size.width, 100) collectionViewLayout:layout];
Make sure your collection view width size always go with according to your view size.
2)Make sure, Your layout item size width higher then collection view width frame. Otherwise Scrolling was not effected.
layout.itemSize = CGSizeMake(self.view.bounds.size.width+10, 100);
3) Carefully use,
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
delegate method of collectionview layout size method.
4)Finally your code look like,
- (void)viewDidLoad {
[super viewDidLoad];
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(self.view.bounds.size.width+10, 100);
[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
collection = [[UICollectionView alloc] initWithFrame:CGRectMake(0.0, 50.0, self.view.bounds.size.width, 100) collectionViewLayout:layout];
collection.delegate = self;
collection.dataSource = self;
collection.backgroundColor = [UIColor greenColor];
collection.pagingEnabled = YES;
collection.scrollEnabled = YES;
collection.userInteractionEnabled = YES;
[collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"Cell"];
[self.view addSubview:collection];
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 1;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
return cell;
}
Happy Coding!
I've used a line of code after adding collectionView on view that its working fine in ios 7 also.
add this code after [self addSubview:self.collectionView];
here the code:
[self performSelector:#selector(update) withObject:nil afterDelay:1];
(void)update {
[self.collectionView setContentOffset:CGPointMake(1, 0)];
}

Cells in UICollectionView are overlapping

I'm using a ViewController in which I add a UICollectionView this way:
UICollectionViewFlowLayout *collectionViewFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[collectionViewFlowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[collectionViewFlowLayout setMinimumInteritemSpacing:2];
[collectionViewFlowLayout setMinimumLineSpacing:4];
[collectionViewFlowLayout setHeaderReferenceSize:CGSizeMake(320, 30)];
CGRect collectionViewFrame = self.view.bounds;
self.collectionView = [[UICollectionView alloc] initWithFrame:collectionViewFrame collectionViewLayout:collectionViewFlowLayout];
self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
[self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:myCellIdentifier];
[self.view addSubview:self.collectionView];
And this is how I'm initializing my custom cell object (I made sure the frame for each cell filled the whole width of the screen, so that the cells would be rendered one after another vertically in the UICollectionView):
CGSize mySize = CGSizeMake(320, 158);
self.myTitle = [[UILabel alloc ] initWithFrame:CGRectMake(0, 0, mySize.width, mySize.height)];
[self.myTitle setTextColor:[UIColor whiteColor]];
[self.myTitle setBackgroundColor:[UIColor greenColor]];
[self.myTitle setTextAlignment:NSTextAlignmentLeft];
[self.myTitle setNumberOfLines:1];
[self.myTitle setText:#"My Title"];
[self addSubview:self.myTitle];
This is how I initialize the frame of the cell in initWithNibName:
CGSize mySize = CGSizeMake(320, 158);
self = [super initWithFrame:CGRectMake(0, 0, mySize.width, mySize.height)];
And here's my cellForItemAtIndexPath code:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = (UICollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:myCellIdentifier forIndexPath:indexPath];
return cell;
}
Now I have four of these cells, yet they are overlapping. What am I doing wrong? Thanks!
Implement UICollectionViewFlowLayout delegate call:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(320, 158);
}
Or since all the sizes are constant just specify the size in your Flow layout like so:
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.itemSize = CGSizeMake(320, 158);
in numberOfSectionsInCollectionView: method use
[self.collectionView.collectionViewLayout invalidateLayout];
I Hope It will work!

UICollectionView shows only the first item

I'm working on a project similar to a video album. In that I'm using UICollectionView to display the thumb images of those videos. The worst part is that I should not use storyboard or xib files. I have tried to do this programatically. I'm currently working on this code:
- (void)viewDidLoad
{
i = 0;
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
[layout setItemSize:CGSizeMake(self.view.frame.size.width/2.5,self.view.frame.size.width/2.5)];
collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
[collectionView setDataSource:self];
[collectionView setDelegate:self];
collectionView.backgroundColor = [UIColor whiteColor];
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"MyCell"];
[self.view addSubview:collectionView];
[super viewDidLoad];
}
I have given 1 for return in numberOfSectionsInCollectionView and [myArray count] for return in numberOfItemsInSection.
-(UICollectionViewCell *) collectionView:(UICollectionView *)cV cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [cV dequeueReusableCellWithReuseIdentifier:#"MyCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor blackColor];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3))];
cell.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3))];
imageView.image = [UIImage imageNamed:[storeData objectAtIndex:i]];
[cell addSubview:imageView];
i++;
return cell;
}
I have rechecked the images in myArray. When the view loads, the collection view shows only the first image. Other 4 cells are empty. What is wrong with my code?
For those who is experiencing this problem, frame is the key. I've encountered this and changed:
cell.imageView.frame = cell.frame;
into
cell.imageView.frame = cell.bounds;
The op is using:
cell.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3))];
That's why this happened.
You shouldn't be using i as a counter. The whole point of the delegate method sending you an indexPath is that it tells you what information to get from your array of source data. So, remove i and use the indexPath.row instead.
You also don't need 2 image views. But you should probably keep your special subview and not use the cells built in image view.
You do not need a counter. As indicated by Wain, use indexPath.row.
Importantly, you should not create new subviews in cellForItemAtIndexPath, but rather use this method to fill them appropriately with content. You could put the image views into your storyboard prototype cells and identify them with tags. Each cell returned from dequeueReusableCellWithReuseIdentifier will already contain the image view.
you should never create ui elements in cellForRowAtIndexPath:. Subclass a collection view cell like so:
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
NSLog(#"INIT WITH FRAME FOR CELL");
//we create the UIImageView here
imageView = [[UIImageView alloc] init];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.frame = CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3));
[self.contentView addSubview:imageView]; //the only place we want to do this addSubview: is here!
}
return self;
}
Then add that subclassed cell as a property and alter this code:]
[collectionView registerClass:[customCellClass class] forCellWithReuseIdentifier:#"MyCell"];
The perform these changes:
-(customCellClass *) collectionView:(UICollectionView *)cV cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = (customCellClass *)[cV dequeueReusableCellWithReuseIdentifier:#"MyCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor blackColor];
imageView.image = [UIImage imageNamed:[storeData objectAtIndex:indexPath.row]];
return cell;
}
A final adjustment would be to move the the [super viewDidLoad] to this:
- (void)viewDidLoad
{
[super viewDidLoad];
//insert the rest of the code here rather than before viewDidLoad
}

Resources