I have an asychronous image loader which loads images (JImage) in a UIImageview. I want to display these in a tablecell. Obviously i cant set cell.imageView.image because i dont have an image, i just have a view.
How do i set the UIImageview to the tablecell? cell.backgroundView works though, but that paints over the whole cell.
The JImage code is:
NSURL *theUrl=[NSURL URLWithString:imageURL];
JImage *photoImage=[[JImage alloc] init];
[photoImage initWithImageAtURL:theUrl];
[photoImage setContentMode:UIViewContentModeRedraw];
[photoImage setFrame:CGRectMake(0.0f, 0.0f, 40.0f, 65.0f)];
cell.backgroundView = photoImage;
[photoImage release];
which in the JImage.m:
- (void)connectionDidFinishLoading:(NSURLConnection*)theConnection
{
[self setImage:[UIImage imageWithData: data]];
}
use this code and set frame according to your need.
UIImage *imagearrow = [UIImage imageNamed:#"arrow.png"];
UIImageView *imgarrow=[[UIImageView alloc] initWithFrame:CGRectMake(290, 25, 7, 15)];
imgarrow.image =imagearrow;
[cell addSubview:imgarrow];
[imagearrow release];
You don't need to use JImage if all you want to do is load the image asynchronously. One easy way to do this is with GCD and blocks, like so: https://github.com/ChrisTec/iPhone-Book-CodeSamples/blob/master/Chapter%2013/RealEstateViewer%2013.2.5/RealEstateViewer/ImageTableViewController.m
Here's a sample chapter of the book Objective-C Fundamentals which I've co-authored that explains this code in depth: http://www.manning.com/fairbairn/OCF_sample_ch13.pdf
To sum it up: When the cell is requested, you look if you already have downloaded the image. If you have, you display it. If not, you display a spinner and start an async GCD block that will fetch the image. One that block is done, it will run another block on the main thread that switches the spinner out for the image. That's all.
I think you should take a different approach to this. Instead of putting your JImage in the cell, hold it somewhere else in the view controller, an NSArray is usually convenient. Then populate the cells with either placeholder images or just leave them empty.
So let's say you have an array with all the JImages that are loading, when the JImage in the position x of the array finishes loading, you reload that specific cell as it follows:
NSIndexPath indexPath = [NSIndexPath indexPathForRow:x inSection:0];
[self.tableView reloadRowsAtIndexPaths:x withRowAnimation:NO];
And in your cellForRow:AtIndexPath you just have to take the image from the JImage object held in the array.
I hope this helps you
Related
I can now display a UIImageView that is within an array but using the following:
[[self.guess objectAtIndex:1] setFrame:CGRectMake(20, 20, 100, 100)];
[self.view addSubview:[self.guess objectAtIndex:1]];
If I want to change the image within one of my UIImageViews within the array
I can use:
[self.guess replaceObjectAtIndex:1 withObject:Square];
but I then have to remove the original view, then add the new subview again:
[[self.guess objectAtIndex:1] removeFromSuperview];
[self.view addSubview:[self.guess objectAtIndex:1]];
The trouble is, my new subview does not inherit the frame position and size
of the original image (as this may have changed). Is there a way to do this
more easily?
I was hoping for something like this, that would just update the original
image in the same position, with the same size:
[self.guess.image replaceObjectAtIndex:1 withObject:Square.image];
Thanks again!
Would it be possible to store only the images in the array and just have one UIImageView? Then, just replace the image inside the UIImageView element
What Radu already said, its better to keep an array of images, or imageNames. Then you also do not have to remove the imageView from the superView, you just reuse the one and only one ImageView.
So what you left is something like this
yourImageView.image = [self.guess objectAtIndex:1];
And if you only store the names in the array
yourImageView.image = [UIImage imageNamed:[self.guess objectAtIndex:1]];
I don't if you've tried this yet, but this should work.
UIImageView *img = (UIImageView *)[self.guess objectAtIndex:1];
img.image = Your Image;
I have a Tableview containing cells with images, however the cells that are reused still contain the image from the previous cell that is being reused until the new image is downloaded and set.
I have tried setting the image to nil. (imageV is a subclass of HJManagedImageV, source can be found here: HJManagedImageV
[cell.imageV setImage:nil];
the setter
-(void)setImage:(UIImage *)theImage{
if (theImage==image) {
//when the same image is on the screen multiple times, an image that is alredy set might be set again with the same image.
return;
}
[theImage retain];
[image release];
image = theImage;
[imageView removeFromSuperview];
self.imageView = [[[UIImageView alloc] initWithImage:theImage] autorelease];
[self addSubview:imageView];
[imageView setNeedsLayout];
[self setNeedsLayout];
[loadingWheel stopAnimating];
[loadingWheel removeFromSuperview];
self.loadingWheel = nil;
self.hidden=NO;
if (image!=nil) {
[callbackOnSetImage managedImageSet:self];
}
}
I have a workaround for by setting imageV to hidden but then I lose the loading spinner and I'd really like to know why setting it to nil isn't working.
Anyone have any ideas, cause I'm all out of them. Or am I missing a step somewhere.
Are the cells a subclass of UITableViewCell? If yes, I would try to implement the method prepareForReuse and see if can solve the problem there.
Hope this helps =)
Don't set it to nil, nor hide it.
We use a similar class and what we do for such cases is to set a start image to be displayed until the new image loads.
So in your case you could simply set the image as a blank jpg/png inside your bundle instead of nil
Why should we avoid loading a image from server while drawing a cell?
In my app I get data from server which contains image URLs as well. Now, I draw my cells and use these image URLs to fetch image from the server and draw it. Now, sometimes image does not get displayed even if image is actually present at that URL as I can see it through browser.
Is there any cell drawing limitation which could cause this issue? Shall I fetch images when I get data from server.
Does cell rendering happens before image is actually drawn.
NSString *imgUrl = [ImageURLArray objectAtIndex:indexPath.row];
if(imgUrl != nil)
{
NSString * ImagePath;
NetworkManager *manager = [[NetworkManager alloc] init];
ImagePath = [manager GetFile:imgUrl];
[manager release];
manager = nil;
if(ImagePath != nil)
{
UIImage *newImage = [UIImage imageWithData:[NSData dataWithContentsOfFile:ImagePath]];
UIGraphicsBeginImageContext(CGSizeMake(50, 50));
// now redraw our image in a smaller rectangle.
[newImage drawInRect:CGRectMake(25, 10, 30, 30)];
newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
cell.imageView.image = newImage;
}
}
return cell;
}
hope this will solve your problem
What could be happening is you have a main thread which is the UI display thread. By fetching image from a url from this thread, you are essentially blocking the cell (i.e. scrolling). Also might be the case that the image is in the process of downloading in which case you'll not see it till it downloads.
Generally UITableView does not display the cell till it's ready to be displayed, by doing the image download in the main thread you are harming your performance. What you should do is to launch a background thread which downloads the image from the url & then update the cell of the image contents when the download is ready.
Best way is to have an initial placeholder like a default image or a spinner, which gets replaced when the main image download gets done.
Dont worry you dont need to implement all this. No point in reinventing the wheel. Here's an awesome library which I use for the same - UIImageView + WebCache
fetch images when I you data from server and pass the information to the view.
like
ImageView *imageView = [[ImageView alloc] initWithNibName:#"ImageView" bundle:[NSBundle mainBundle]];
imageView.prod=self.prod;
imageView.hidesBottomBarWhenPushed = YES;
[self.navigationController pushViewController:imageView animated:YES];
[imageView release];
imageView=nil;
hope this will solve your problem
Clearly, the image download is taking more time. You should be using placeholder images until the download completes. You can't stop the user from scrolling.
Check out the last lines before [return cell]..After the images are being loaded the scrolling speed is decreasing..it seems the scroll gets stuck
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *MyIdentifier = #"MyIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
}
int storyIndex = [indexPath indexAtPosition: [indexPath length] - 1];
NSString *itemDescription=[[stories objectAtIndex: storyIndex]
objectForKey:#"title"];
CGRect aframe = CGRectMake(80, 30, 250, 40);
textLabel = [[UILabel alloc] initWithFrame:aframe];
textLabel.font = [UIFont boldSystemFontOfSize:14];
textLabel.numberOfLines=0;
textLabel.textColor = [UIColor darkTextColor];
textLabel.backgroundColor = [UIColor whiteColor];
[cell.contentView addSubview:textLabel];
textLabel.text=itemDescription;
CGRect frame = CGRectMake(0, 0, 70,80);
UIImageView *TopImageView = [[UIImageView alloc] init];
[cell.contentView addSubview:TopImageView];
TopImageView.frame=frame;
m_strImage = [m_imglinkArray objectAtIndex:storyIndex];
TopImage = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:m_strImage]]];
TopImageView.image=TopImage;
return cell;
}
Could you guys help me to increase the speed of the scroll?
Regards
Arun
I believe you may have two problems here. First is the issue of not multi-threading the image loads and second is how you're using UITableViewCell.
iPhone calls cellForRowAtIndexPath whenever a cell appears on the screen - if you scroll down, everything above is unloaded and reloaded when you scroll back up again. As already noted this can be solved with multithreading patterns - either the link posted to markj.net, and/or by using NSThread. The advantage of NSThread is you have more flexibility to handle problems or load more than just image data. (I would use both)
In order to do this efficiently you need to have a custom UITableViewCell. This is good to have regardless because you can make the table cell responsible for it's content rather than your view controller, and you can efficiently manipulate cell formatting and content. Here is a link to a great post about UITableCellView: http://blog.atrexis.com/index.cfm/2009/1/6/iPhone--Customize-the-UITableCellView
When you implement UITableViewCell, do your best to put all addSubView and formatting calls in the "if(cell==nil)" block, only if you can't put them in your custom initWithFrame. You'll find the iPhone is stacking every subview you add -- it's not clearing the old view. You can see this at work by setting all the background colors to "UIColor clearColor" and then change text between hits -- you'll see a stack of text on top of each other. This isn't normally visible because solid-filled backgrounds draw over all the "old" subviews.
Before you combine these two methods, considering implementing a "model". You've got a view and a controller but all of your data should be in a model. All of the image URLs, content, etc. should be in something like an NSMutableArray, a custom object of your own, or maybe via SQLite. Once you have a model, you can implement your caching of the images. With caching, all of the images will be retained between loads of your application which will save batteries, bandwidth, and time.
I would:
1. put all your data in a model of some kind (NSMutableArray, SQLLite, something)
2. Implement your own custom UITableViewCell
3. Make sure you have 0 addSubView, init, or alloc calls inside the active block of cellForRowAtIndexPath
4. Use delegation example or NSThread to load all images in the background
5. Add local image caching
There are some good examples out in about and on the Apple forums on caching images.
nessence has a lot of good information. A few more thoughts:
You're leaking like crazy here. Every cell you create, you leak 2 UILabels, a UIImageView and a UIImage.
As noted before, not only are you leaking these, they're accumulating in your view because you're sticking one on top of the other with addSubview:.
Reaching out to the network during a cell draw is incredibly slow and is blocking your UI. If these URLs are local, then you can use UIImage's +imageWithContentsOfFile, if not, you need to load this in the background.
I don't think you need a thread here. NSURLConnection is an excellent way to load data in the background without incurring the overhead of threading.
nessence is completely correct that you need a model class for Story.
Your basic approach to reusable cell configuration is incorrect. You don't fetch a reusable cell and then add subviews to it. All your subviews should be added in the if() block to create the cell. Then, in each pass, you just change the values of things. I've rewritten some of your code below to demonstrate. This is still not correct code, because it is reaching out to the network during a cell draw, and this may be too many elements to be in a subview-cell (rather than a custom cell), but it's closer to the right idea. I don't even know if this compiles; I just typed it here.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *MyIdentifier = #"MyIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil) {
// Here we do all our cell creation
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
// Make the label
CGRect aframe = CGRectMake(80, 30, 250, 40);
UILabel *textLabel = [[[UILabel alloc] initWithFrame:aframe] autorelease]; // Note the -autorelease so we don't leak
textLabel.font = [UIFont boldSystemFontOfSize:14];
textLabel.numberOfLines=0;
textLabel.textColor = [UIColor darkTextColor];
textLabel.backgroundColor = [UIColor whiteColor];
textLabel.tag = DescriptionTag; // A tag so we can find it later (you'll need a constant for this)
[cell.contentView addSubview:textLabel];
// And the second label
aframe = CGRectMake(80, 30, 250, 40);
textLabel = [[[UILabel alloc] initWithFrame:aframe] autorelease];
textLabel.font = [UIFont boldSystemFontOfSize:14];
textLabel.numberOfLines=0;
textLabel.textColor = [UIColor darkTextColor];
textLabel.backgroundColor = [UIColor whiteColor];
textLabel.tag = TitleTag;
[cell.contentView addSubview:textLabel];
// The image view
CGRect frame = CGRectMake(0, 0, 70,80);
UIImageView *topImageView = [[[UIImageView alloc] init] autorelease];
topImageView.frame = frame;
topImageView.tag = TopImageTag;
[cell.contentView addSubview:topImageView];
}
// all the above was cell creation; we do that as seldom as possible.
// Now we do cell configuration. We want this to be fast.
UILabel *descriptionLabel = (UILabel*)[cell.contentView viewWithTag:DescriptionTag];
descriptionLabel.text = itemDescription;
UILabel *titleLabel = (UILabel*)[cell.contentView viewWithTag:TitleTag];
titleLabel.text =[[stories objectAtIndex:indexPath.row] objectForKey:#"title"];
NSString *imageURLString = [m_imglinkArray objectAtIndex:storyIndex]; // You should have a model class called Story, not two arrays.
UIImage *image = [[[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:imageURLString]]] autorelease]; // This is still way too slow if it's a remote URL
UIImageView *imageView = (UIImageView*)[cell.contentView viewWithTag:TopImageTag];
imageView.image = image;
return cell;
}
I recommend you spend some quality time studying TableViewSuite, Practical Memory Management, and Coding Guidelines for Cocoa. Some time studying the basics of Cocoa would be useful as well, because the coding style here indicates that you may not have a solid foundation. Though it's a Mac book, I still recommend Cocoa Programming for Mac OS X. If you're interested in using this to learn iPhone, I've put together a syllabus that might help. I haven't reviewed it yet, but Stanford's online CS193P course looks promising.
this has been asked several times here, what you need to do is to load asynchronously the images for each cell in order to prevent the scroll to slow down.
This is called "Lazy image loading" and I'm referencing the apple tutorial here :
Lazy load images in UITableView
It seems that you are loading from a url every time the table view asks to get the cell for a row. This is happening in the main application thread (the User interface thread) and it blocks the user interface, making it not responsive.
Especially if this url is a resource that you load from the internet then this pause is big.
I would recommend that you should load the images in a background thread and display a placeholder image until they are fetched from the network.
You can try the solution provided in the following url...
http://www.markj.net/iphone-asynchronous-table-image/
Im trying to load a single image into the grouped table cell. I found a piece of code on the internet and modified it. Original code is using UIViews to display image, which is not what I need, however original code works of course. PLease help me to make this code work to display an image in a sigle cell for grouped tableview. My TableView has only one row and it has UITableViewCellStyleDefault style.
Original Code
Here is my modified method, this is the core method.
- (void)connectionDidFinishLoading:(NSURLConnection*)theConnection
{
[connection release];
connection=nil;
UIImage *img = [UIImage imageWithData:data];
self.image = img;
self.frame = self.bounds;
[self setNeedsLayout];
[data release];
data=nil;
}
This is how I use it to display image in my TableView Cell cellForRowAtIndexPath method.
CGRect frame;
frame.size.width=75; frame.size.height=75;
frame.origin.x=0; frame.origin.y=0;
AsyncImageView* asyncImage = [[[AsyncImageView alloc] initWithFrame:frame] autorelease];
[asyncImage loadImageFromURL:imageURL];
cell.imageView.image = asyncImage.image;
In that code you posted, the image of the AsyncImageView doesn't get set until after the connection finishes loading and it actually creates the image. Problem is, you're setting it's image into the cell immediately. That's not going to work!
You're going to want to make a custom cell class (subclass UITableViewCell) and use that cell in your table. There's lots of sample code showing how to use custom cells and lay them out with views. Instead of using UITableViewCell's standard imageView, create your own layout and use an AsyncImageView to show your image. Then it should work.