How to insert images in uicollectionview programmatically? - ios

I'm pretty new to Objective-C so hopefully this all makes sense..I ran code provided in first answer Creating a UICollectionView programmatically..It is working fine .Now i want to add some pictures in cell that can expanded by mouse click .I searched many tutorial but all using nib files or storyboard files .How i can accomplish this task programmatically ?
Any help would be greatly appreciated. Thanks in advance.

as Logan suggest:
#define IMG_TAG 1000
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"MyCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
// Configure the cell...
cell.textLabel.text = #"test.....";
UIImage * img = [UIImage imageNamed: #"sampleImage"];
UIImageView * customImageView = (UIImageView*) [cell viewWithTag: IMG_TAG];
// two cases:
// 1) we got a "recycled" cell, so we already have an image view added
// 2) we got a "new" cell, so we must create, add image view AND TAg
// in both cases we will set image
if (customImageView){
// case 1
// nothing special
}else{
// case 2:
// add and tag:
customImageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 2, 30, 30)];
[cell addSubview: customImageView];
customImageView.tag = IMG_TAG;
}
customImageView.image = img;
return cell;
}
pls review and upvote :)

Beginner read tutroial and understand first everyting in below link and apple doc
ios-programming-uicollectionview-tutorial-with-sample-code
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionView_class/Reference/Reference.html
change this your blackground color like this approach
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
[self.view addSubview:recipeImageView];
cell.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]]];
return cell;
}
output:

NOTE:
code above is WRONG!
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
[self.view addSubview:recipeImageView];
cell.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]]];
return cell;
}
You allocate (better to allocate ONCE unsung TAGs...) but the code will ADD subview EVERY time cellForItemAtIndexPath is called.

Related

Undeclared identifier error in UICollectionView

This is my ViewController.m file's code for Collection view:
- (void)viewDidLoad
{
img = [[NSArray alloc] initWithObjects:#"1.png",#"2.png",#"3.png", nil];
name = [[NSArray alloc] initWithObjects:#"Flag",#"Blue",#"Fish", nil];
[self.collectionview registerNib:[UINib nibWithNibName:#"cell" bundle:nil] forCellWithReuseIdentifier:#"CELL"];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return [img count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell1 = [collectionview dequeueReusableCellWithReuseIdentifier:#"CELL" forIndexPath:indexPath];
UIImageView *reciveimageview = (UIImageView *)[cell1 viewWithTag:100];
reciveimageview.image = [UIImage imageNamed:[img objectAtIndex:indexPath.row]];
cell1.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[img objectAtIndex:indexPath.row]]];
cell1.cellLabel.text = [name objectAtIndex:indexPath.row];
return cell1;
}
#end
Now it is giving me the error of Undeclared identifier of Cell and Cell1
Don't know why.
Add like this
static NSString *identifier = #"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView=(UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[jsonImagesArr objectAtIndex:indexPath.row]];
[cell addSubview:recipeImageView];
Make sure the cell on the .xib file know what's the type of the cell.
Select the cell on your interface builder
and then on the identity inspector. In your case it should be cell
Have you set the identifier in xib as "CELL"
You need to register your nib/class if you are using a custom cell.
You can do that by
[self.myCollectionView registerNib:[UINib nibWithNibName:#"ShubhCalendarCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:#"ShubhCalendarCollectionViewCell"];
Make sure your Nib name and identifier are not mis- spelled.
Hope it helps.
Happyy coding.. !!

IOS CollectionView with UIImage load from url

I have an UICollectionView and I want to load picture from web to the UIImageView which on cell. (The UIImageView with tag:100 on the cell.)
The picture isn't appear when I use this method:
- (void)viewDidLoad
{
[super viewDidLoad];
Img = [NSArray arrayWithObjects:#"http://192.168.1.103:8088/Images/1.png",#"http://192.168.1.103:8088/Images/2.png",nil];
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"List";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *chImage = (UIImageView *)[cell viewWithTag:100];
NSURL *imageUrl = [NSURL URLWithString:[Img objectAtIndex:indexPath.row]];
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];
chlImage.image = image;
NSLog("%#",[Img objectAtIndex:indexPath.row]); //Here can show Img's values correctly
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"backgroung.png"]];
return cell;
}
But when I use the picture in project, it can appear correctly. like this:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"List";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *chImage = (UIImageView *)[cell viewWithTag:100];
chImage.image = [UIImages imageNames:#"123.jpg"];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"backgroung.png"]];
return cell;
}
Why it can't work when I used picture load from web? (The picture can be opened by "browser".)
Can give me some tips or correct code? Thank you very much!
You are expecting to get an UIImageView from this line:
UIImageView *chImage = (UIImageView *)[cell viewWithTag:100];
But you are not. You are getting just an UIView. So you must create an UIImageView and then use addSubview: method to add this UIImageView to the backgroudViewView.
So, it should be:
UIImageView *chImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, cell.backgroundView.frame.size.width,cell.backgroundView.frame.size.height)];
NSURL *imageUrl = [NSURL URLWithString:[Img objectAtIndex:indexPath.row]];
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];
chImage.image = image;
NSLog("%#",[Img objectAtIndex:indexPath.row]); //Here can show Img's values correctly
[cell.backgroundView addSubview:chImage];
And finally, I have a suggestion for you. Take a look at SDWebImage library. It's an awesome feature to fetch images from URL.
Create a class ImageCell by subclassing UICollectioViewCell and create a property ImageCell.h:
#interface ImageCell : UICollectionViewCell
#property (nonatomic, strong) UIImage *dImage;
#end
Then add a function in ImageCell.m
- (void)downloadImageFromURL:(NSURL *)imageUrl
{
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
dImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:imageUrl]];
dispatch_sync(dispatch_get_main_queue(), ^{
UIImageView *chImageView = (UIImageView *)[cell viewWithTag:100];
chImageView.image = dImage;
});
});
}
Now from UICollectionView delegate:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = #"List";
ImageCell *cell = (ImageCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
NSURL *imageUrl = [NSURL URLWithString:[Img objectAtIndex:indexPath.row]];
[cell downloadImageFromURL:imageUrl];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"background.png"]];
return cell;
}
And at last please make sure that you set the tag 100 to that ImageView you are trying to get. Let me know if you have any confusions.
Simply move your data fetching part from the collection view's delegate to it's viewDidLoad.
Store the images into an array. And use this as the datasource for your collection view.
ie.Each time an image gets added to the array just reload the collection view.
Or you could create a custom cell that does this as 'iOSGeek' suggested.

How to give text to UILabel dynamically from NSArray [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am trying to create collection view in iOS application where an image and label will be displayed. I am able to display the images in Collection view, but am facing problem with UILabel. I have:
NSArray *categoryArray;
categoryArray = [NSArray arrayWithObjects:#"abc",#"xyz",#"qwe",#"asdf",#"fgh",#"hjk",#"lkj",#"ghj",#"sdf",nil];.
Now I want this text to be assigned dynamically to the UILabel which is placed in Collection view.
Here's what I have tried.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
//UILabel *txtCatName = (UILabel *)[cell viewWithTag:100];
// txtCatName.text = #"Testing";
return cell;
}
Put this after the line
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
/*This is to avoid overlapp due to cell reuse.This will remove all labels in the cell. If only a particular label is to be removed put a tag range to it like label.tag = 100+indexPath.row and change the if accordingly to match this tag range*/
for (UIView *view in cell.subviews) {
if ([view isKindOfClass:[UILabel class]]) {
[view removeFromSuperview];
}
}
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];//Set the frame as per your requirement.
[label setText:[NSString stringWithFormat:#"%#",[categoryArray objectAtIndex:indexPath.row]]];
[cell addSubview:label];
return cell;
Also if you are using custom cell, add a UILabel to the cell and create an IBOulet property and then update the text in this method. No need to worry about overlapping then. It would be better to add through xib since looping through all the subviews will cause performance problem if the number of subviews increase. Hope this helps.
Put the Label in the UICollectionViewCell and then in the same way as you have added the image, add the label text dynamically. Edit your function code to something like this.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
cell.txtLabel.text = [categoryArray objectAtIndex:indexPath.row];
//UILabel *txtCatName = (UILabel *)[cell viewWithTag:100];
// txtCatName.text = #"Testing";
return cell;
}
Change the Label Tag and try this. (set Label Tag:99)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[recipeImages objectAtIndex:indexPath.row]];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
UILabel *txtCatName = (UILabel *)[cell viewWithTag:99];
txtCatName.text = [categoryArray objectAtIndex: indexPath.row] ";
return cell;
}

Create a gallery using UICollectionView iOS

I wanna create a gallery using uicollectionview above tab bar controller. the problem that i have is i’m getting a SIGABRT crash when i’m connecting uicollectionview datasource. but when i didnt connecting it, the controller view did not show any image. did somebody know what to do?
this is the code I've made :
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
NSLog(#"stiker : %d", stickers1.count);
return stickers1.count;
}
// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
NSLog(#"indexpath row : %d", indexPath.row);
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[stickers1 objectAtIndex:indexPath.row]];
// cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
return cell;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
NSLog(#"numberOfSectionsInCollectionView coll : %d, stic : %d", collectionView.numberOfSections, stickers1Collection.numberOfSections);
return collectionView.numberOfSections;
}
I've connected the uicollectionview datasource in xib
Set number of items
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
set content
Just add UIImageView and UIlabel and set there tags in storyboard assign data in cellForItemAtIndexPath method
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *ImageView = (UIImageView *)[cell viewWithTag:100];
ImageView.image = [UIImage imageNamed:[[arrCategoryValue objectAtIndex:indexPath.row] objectForKey:#"image"]];
UILabel *lbl = (UILabel *)[cell viewWithTag:200];
lbl.text = [[arrCategoryValue objectAtIndex:indexPath.row] objectForKey:#"name"];
cell.tag = indexPath.row;
return cell;
}
for more info you can go here

UICollectionView reload data Issue

I have a problem with data reloading using UICollectionView. I have this array on the viewDidLoad to fill the UICollectionView.
array = [[NSMutableArray alloc] init];
[array addObject:#"1"];
[array addObject:#"2"];
[array addObject:#"3"];
[array addObject:#"4"];
[array addObject:#"5"];
[array addObject:#"6"];
and the method:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSString *cellIdentifier = #"Cell";
//cell = [[UICollectionViewCell alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
myCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(5, 0, 100, 20)];
[titleLabel setText:[array objectAtIndex:indexPath.row]];
titleLabel.textColor = [UIColor whiteColor];
titleLabel.backgroundColor = [UIColor clearColor];
[cell addSubview:titleLabel];
return cell;
}
I tap the UIButton and data is reloaded:
[myCollectionView reloadData];
Here how the data looks like before and after the reload:
You add a new label each time you tap the reload button. You should add the label once and change the label text according.
Here a simple example.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MyCell *cell = (MyCell *)[collectionView dequeueReusableCellWithReuseIdentifier:#"Cell"
forIndexPath:indexPath];
[cell setMyTextLabel:indexPath.row];
return cell;
}
where MyCell will contains a UILabel and a property to modify its text.
I really suggest to take a look at Fun with UICollectionView code by #Ben Scheirman.
Hope that helps.
P.S. Rename myCell to MyCell. A class should start with an uppercase letter.
You are adding your label when you tap reload button. In that case you are adding label again and again...
So there are three solutions:
Make your cell reusable
Remove your cell from superview in reload method.
You can check if label's text length is not equal to zero. In that case no need to add that label and change text.
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
dispatch_async(dispatch_get_main_queue(), ^{
// ********* Changed *******
for (UIView *v in [cell.contentView subviews])
[v removeFromSuperview];
// ********** Changed **********
if ([self.collectionviewFlow.indexPathsForVisibleItems containsObject:indexPath]) {
NSString *img_name=[NSString stringWithFormat:#"%#_thumb%d.png",self.VaritiesName,(int)indexPath.row+1];
imageVw=[[UIImageView alloc]initWithImage:[UIImage imageNamed: img_name]];
imageVw.frame=CGRectMake(10,10,100,100);
[cell.contentView addSubview:imageVw];
}
});
cell.backgroundColor=[UIColor clearColor];
return cell;
}
It is quit late, but here is my solution.
if you used custom collectionviewcell
try to use 'func prepareForReuse()'

Resources