I'm a beginner to learn ios. It's nice to be here! I have some problem using the UICollectionView.
I've add this in myUICollectionCell.m and linked the item to storyBoard
#import "QuartzCore/QuartzCore.h"
#implementation myCollectionViewCell
#synthesize myImageView
-(instancetype)initWithFrame:(CGRect)frameRect {
self = [super initWithFrame:frameRect];
if (self) {
myImageView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 200, 60, 60)];
myImageView.layer.cornerRadius = view2.frame.size.width/2;
myImageView.layer.masksToBounds = YES;
[self.contentView addSubview:myImageView];
}
return self;
}
#end
ViewController.m
#import "myCollectionViewCell.h"
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString * CellIdentifier = #"cell";
myCollectionViewCell *cell = (myCollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.myImageview.image = [UIImage imageNamed:#"2.jpg"];
return cell;
}
myImageView still didn't change to circle as I described.
It can only work when I put the description into collectionView:cellForItemAtIndexPath:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString * CellIdentifier = #"cell";
myCollectionViewCell *cell = (myCollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.myImageview.image = [UIImage imageNamed:#"2.jpg"];
myImageView.layer.cornerRadius = view2.frame.size.width/2;
myImageView.layer.masksToBounds = YES;
return cell;
}
why is that? I'm confusing with the place where I should describe my view on my cell.
It seems you are using xib or storyboard, so it won't call initWithFrame: of UICollectionViewCell.
Using awakeFromNib instead:
-(void)awakeFromNib
{
[super awakeFromNib];
//Is myImageView an outlet of storyboard? if it is you needn't realloc a UIImageView instance
//myImageView =[[UIImageView alloc] initWithFrame:CGRectMake(0, 200, 60, 60)];
myImageView.layer.cornerRadius = 5.0;
myImageView.layer.masksToBounds = YES;
//[self.contentView addSubview:myImageView];
}
Related
Implementing the title under the image in UICollectionView. I am new in this ios application development. I want to implement the title under the image view in collectionView. Does anybody know the answer?
I have initialized the label programmatically and add it in the collectionview but it did not show the title
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
static NSString *identifier = #"Cell";
//MARK:-To set the variables
self.imageArray=[NSArray arrayWithObjects:#"1.png",#"2.png",#"3.jpeg",#"4.jpeg",#"1.png",#"2.png",#"3.jpeg",#"4.jpeg"];
self.imageText=#[#"1",#"2",#"3",#"4",#"5",#"6",#"7",#"8"];
// for image
UIImageView *recipeImageView = [[UIImageView alloc] init];
recipeImageView.frame = self.collectionView.bounds;
[self.collectionView addSubview:recipeImageView];
recipeImageView.tag = 100;
// for the label
UILabel *title=[[UILabel alloc]init];
title.tag = 200;
[self.collectionView addSubview:title];
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier];
}
//MARK:-To set the number of sections in UICOLLECTIONVIEW
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.imageArray.count;
}
//MARK:-To set the content to the UICollectionView
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
//MARK:-To set the image dynamically to the UICollectionViewCell
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[self.imageArray objectAtIndex:indexPath.row]];
[self.view addSubview:recipeImageView];
cell.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:[self.imageArray objectAtIndex:indexPath.row]]];
//MARK:- To set the label dynamically to the UICollectionViewCell
UILabel *imageTitle=(UILabel *)[cell viewWithTag:200];
[imageTitle setText:self.imageText];
return cell;
}
#end
I have UICollectionViewCell
#import "DBPhotoCollectionViewCell.h"
#define IMAGEVIEW_BORDER_LENGTH 5
#implementation DBPhotoCollectionViewCell
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
[self setup];
}
return self;
}
/* Need to implement the initWithCoder method since this class will be created from the storyboard */
-(id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self){
[self setup];
}
return self;
}
/* Create the UIImageView and add it to the cell's contentView in code. */
-(void)setup
{
self.imageView = [[UIImageView alloc] initWithFrame:CGRectInset(self.bounds, IMAGEVIEW_BORDER_LENGTH, IMAGEVIEW_BORDER_LENGTH)];
[self.contentView addSubview:self.imageView];
}
#end
And call this Cell from CollectionViewController class
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Photo Cell";
DBPhotoCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
cell.imageView.image = [UIImage imageNamed:#"Astronaut.jpg"];
// Configure the cell
return cell;
}
But I have one problem when I start my application my picture is showed with small size. What I missed?
http://screencast.com/t/ia8tE05P6yc
http://screencast.com/t/33N4AhT7
cell.imageView, imageView object is not same as which you have added on cell of Interface Builder. UICollectionViewCell has default size UIImageView which are accessing, you can access your customView imageView in cellForIndexPath method of collectionView by linking imageView of subClass DBPhotoCollectionViewCell in interface builder you don't need to add [self.contentView addSubview:self.imageView]; in setup method.
Second approach would be assign tag value to imageView when you adding to cell contentView
/* Create the UIImageView and add it to the cell's contentView in code. */
-(void)setup
{
self.imageView = [[UIImageView alloc] initWithFrame:CGRectInset(self.bounds, IMAGEVIEW_BORDER_LENGTH, IMAGEVIEW_BORDER_LENGTH)];
self.imageView.tag=1;
[self.contentView addSubview:self.imageView];
}
//And access imagView in cellForIndexPath
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Photo Cell";
DBPhotoCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
UIImageView *imageView=[cell.contentView viewWithTag:1];
imageView.image = [UIImage imageNamed:#"Astronaut.jpg"];
// Configure the cell
return cell;
}
I had worked with UITableView but I have never ever use of UICollectionView in my apps. So I want to create UICollectionView programmatically.
Following is my code:
UICollectionViewFlowLayout *layout =[[UICollectionViewFlowLayout alloc] init];
_collectionView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 43, self.view.frame.size.width, self.view.frame.size.height - 84) collectionViewLayout:layout];
[_collectionView setDataSource:self];
[_collectionView setDelegate:self];
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"cellIdentifier"];
layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
layout.minimumInteritemSpacing = 5;
[_collectionView setBackgroundColor:self.view.backgroundColor];
[self.view addSubview:_collectionView];
Delegate and Datasource methods.
#pragma mark -
#pragma mark - UITableView Delegate Methods
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 15;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
if (cell.selected)
cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
else
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background-grid.png"]]; // Default Cell
UIImageView *imgPhoto = [[UIImageView alloc] init];
imgPhoto.userInteractionEnabled = YES;
imgPhoto.backgroundColor = [UIColor grayColor];
imgPhoto.frame = CGRectMake(3.5, 5, 90, 80);
imgPhoto.clipsToBounds = YES;
imgPhoto.image = [UIImage imageNamed:#"product.png"];
[cell.contentView addSubview:imgPhoto];
UILabel *lblCategoryTitle = [[UILabel alloc] init];
[lblCategoryTitle setFont: [UIFont fontWithName:#"OpenSans-Bold" size:14]];
lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
lblCategoryTitle.textColor = [UIColor blackColor];
lblCategoryTitle.text = #"Product 1";
lblCategoryTitle.backgroundColor = [UIColor clearColor];
lblCategoryTitle.numberOfLines = 2;
[cell.contentView addSubview:lblCategoryTitle];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(97, 118);
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
datasetCell.backgroundColor = [UIColor lightGrayColor]; // highlight selection
}
-(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
datasetCell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background-grid.png"]]; // default cell
}
Then my screen Look like
Question 1 - Look at above screen, you will see that 1st and 3rd item is looking blur (see Product 1 ) then 2nd/middle item ? why this is happening ?
And whenever I scroll up/down UICollectionView then items are overwrite, Look at Next image
After looked this image, from my experience of UITableView, it's happening because of Reusability of cell of UICollectionView.
Question 2 - Then how can i solve it?
Please give my your suggestion and help me on this issue.
EDITED: (suggestion of #Dima)
Custom cell
.h file
#import <UIKit/UIKit.h>
#interface customeGridCell : UICollectionViewCell
#property (nonatomic, strong) UIImageView *imgPhoto;
#property (nonatomic, strong) UILabel *lblCategoryTitle;
#end
.m file
#import "customeGridCell.h"
#implementation customeGridCell
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.imgPhoto = [[UIImageView alloc] init];
self.imgPhoto.userInteractionEnabled = YES;
self.imgPhoto.backgroundColor = [UIColor grayColor];
self.imgPhoto.frame = CGRectMake(3.5, 5, 90, 80);
[self addSubview:self.imgPhoto];
self.lblCategoryTitle = [[UILabel alloc] init];
[self.lblCategoryTitle setFont: [UIFont fontWithName:#"OpenSans-Bold" size:14]];
self.lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
self.lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
self.lblCategoryTitle.textColor = [UIColor blackColor];
self.lblCategoryTitle.backgroundColor = [UIColor clearColor];
self.lblCategoryTitle.numberOfLines = 2;
[self addSubview:self.lblCategoryTitle];
}
return self;
}
And code of cellForItemAtIndexPath
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
customeGridCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
if (cell.selected)
cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
else
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background-grid.png"]]; // Default Cell
cell.imgPhoto.image = [UIImage imageNamed:#"product.png"];
cell.lblCategoryTitle.text = #"Product 1";
return cell;
}
The problem is in your collectionView:cellForItemAtIndexPath: method. You are adding those subviews every single time a cell is reused, on top of each other.
You should create a UICollectionViewCell subclass and add all of the extra subviews you want into its initializer. This will make sure they only get added once.
sample code:
Here is an example of how you would subclass UICollectionViewCell
#interface MyCustomCell : UICollectionViewCell
#property (nonatomic, strong) UILabel *customLabel;
#property (nonatomic, strong) UIImageView *customImageView;
#end
// in implementation file
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
// initialize label and imageview here, then add them as subviews to the content view
}
return self;
}
Then when you are grabbing a cell you just do something like:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
MyCustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
if (cell.selected)
cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
else
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"background-grid.png"]]; // Default Cell
cell.customImageView.image = // whatever
cell.customLabel.text = // whatever
return cell;
}
You can do it with two way.
Remove UILabel form view.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
for (UILabel *lbl in cell.contentView.subviews)
{
if ([lbl isKindOfClass:[UILabel class]])
{
[lbl removeFromSuperview];
}
}
UILabel *lblCategoryTitle =[[UILabel alloc]init];
[lblCategoryTitle setFont: [UIFont fontWithName:#"OpenSans-Bold" size:14]];
lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
lblCategoryTitle.textColor = [UIColor blackColor];
lblCategoryTitle.text = #"Product 1";
lblCategoryTitle.backgroundColor = [UIColor clearColor];
lblCategoryTitle.numberOfLines = 2;
[cell.contentView addSubview:lblCategoryTitle];
return cell;
}
Use tag to get Label
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
UILabel *lblCategoryTitle =(UILabel *) [cell viewWithTag:5];
if (!lblCategoryTitle) {
lblCategoryTitle=[[UILabel alloc]init];
[cell.contentView addSubview:lblCategoryTitle];
}
[lblCategoryTitle setFont: [UIFont fontWithName:#"OpenSans-Bold" size:14]];
lblCategoryTitle.tag=5;
lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
lblCategoryTitle.textColor = [UIColor blackColor];
lblCategoryTitle.text = #"Product 1";
lblCategoryTitle.backgroundColor = [UIColor clearColor];
lblCategoryTitle.numberOfLines = 2;
return cell;
}
the method
-(void)prepareForReuse
In my collection view cell is never called - leading me to suspect that the UICollectionView is not dequeuing cells properly. This is causing lagyness and memory issues.
I've set up my collectionView as follows:
static NSString *cellIdentifier = #"Mycell";
-(void)initMyView
{
[self.collectionView registerClass:[UrlLoadableCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];
}
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UrlLoadableCollectionViewCell *cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:index];
if (cell.contentView.frame.size.width < 100) // tried removing this as well but didn't help
{
cell.layer.shouldRasterize = YES;
cell.layer.rasterizationScale = [UIScreen mainScreen].scale;
} else {
cell.layer.shouldRasterize = NO;
}
// prepare cell
}
EDIT
Additional Code
static NSString *cellIdentifier = #"Mycell";
#interface UIThumbnailGalleryView
#property (nonatomic,strong) UICollectionView *collectionView;
#end
#implementation UIThumbnailGalleryView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self initView:frame];
}
return self;
}
-(void)initView:(CGRect)frame
{
self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:[self getGalleryLayout]];
[self.collectionView registerClass:[UrlLoadableCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
[self addSubview:self.collectionView];
self.collectionView.backgroundColor = [UIColor blackColor];
[self.collectionView setShowsHorizontalScrollIndicator:NO];
[self.collectionView setShowsVerticalScrollIndicator:NO];
}
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UrlLoadableCollectionViewCell *cell = [self.dequeueReusableCellAtIndex:indexPath];
}
-(UrlLoadableCollectionViewCell *)dequeueReusableCellAtIndex:(NSIndexPath *)index
{
UrlLoadableCollectionViewCell *cell = (UrlLoadableCollectionViewCell *)[self.collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:index];
return cell;
}
-(UICollectionViewFlowLayout *)getGalleryLayout
{
UICollectionViewFlowLayout *galleryLayout = [[UICollectionViewFlowLayout alloc] init];
[galleryLayout setItemSize:CGSizeMake(77, 77)];
galleryLayout.minimumInteritemSpacing = 3.0;
galleryLayout.minimumLineSpacing = 3.0;
// iOS 6 - might need to uncomment
//[galleryLayout setSectionInset:UIEdgeInsetsMake(44,5, 44, 5)];
return galleryLayout;
}
Please post a screenshot of the xib/scene that contains your UICollectionViewCell showing it's inspector. Or, if you're cell is constructed entirely in code, post the relevant code that registers your class with the collection view. Usually when this occurs it's because of a typo in the Cell Identifier.
You don't seem to be calling initMyView anywhere.
I have a collection cell and want to change the image when touched, and back again, how should I structure it?
After highlighting (works well below), I want it to go back to the old image when touched again. Thank you. At viewWillDissapear I want to know which cells are highlighted.
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
UIImage *backGround =[UIImage imageNamed:#"IconHighlight.png"];
UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, backGround.size.width, backGround.size.height)];
av.backgroundColor = [UIColor clearColor];
av.opaque = NO;
av.image = backGround;
[[collectionView cellForItemAtIndexPath:indexPath] setBackgroundView:av];
[[collectionView cellForItemAtIndexPath:indexPath].backgroundView setTag:1];
}
Create CustomCell - subclass of UICollectionViewCell. Customize init to the following
//CustomCell.m
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
backgroundImageView.image = [UIImage imageNamed:#"background.png"];
highlightImageView.image = [UIImage imageNamed:#"highlight.png"];
self.backgroundView = backgroundImageView;
_isHighlight = -1;
}
return self;
}
-(void)tapToChangeBackGround{
self.isHighlight = -self.isHighlight;
if (self.isHighlight==1) {
self.backgroundView = highlightImageView;
}
else{
self.backgroundView = backgroundImageView;
}
}
//didSelect
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
CustomCell *cell = (CustomCell *)[collectionView cellForItemAtIndexPath:indexPath];
[cell tapToChangeBackGround];
}