Using cached images in UItableView - iphone

using iOS 4.1 SDK. I am using 2 small images in each row of a UITableView. I wanted to know which of the following 2 methods was better, also is Method 1 valid at all?
- (void)viewDidLoad
{
// create the images amd assign to class member variable
NSString *imgStr1 = [[NSBundle mainBundle] pathForResource:#"someImg1"
ofType:#"png"];
UIImage* img1 = [[UIImage alloc] initWithContentsOfFile:imgStr];
self.image1 = img1;
[img1 release];
NSString *imgStr2 = [[NSBundle mainBundle] pathForResource:#"someImg2"
ofType:#"png"];
UIImage* img2 = [[UIImage alloc] initWithContentsOfFile:imgStr2];
self.image2 = img2;
[img2 release];
}
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"cellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:
cellIdentifier];
if (cell == nil)
{
//create image views here
..........................
}
/ assign images from viewDidLoad to imageView here
UIImageView *img1View = (UIImageView *)[cell viewWithTag:kImg1Tag];
[img1View setImage:self.img1];
etc....
}
OR should i just do this in the cellForRowAtIndexPath
[img1View setImage:[UIImage imageNamed:#"img1.png"];

In this case I would go with imageNamed: as it will cache the two images and properly respond to memory warning situations.
Method one is valid, but there is little difference between it and using imageNamed:. Images created with imageNamed: will be cleared out if the device needs to reclaim memory. Unless you clear the images created in method one yourself when you receive a memory warning they will stay in memory.
It's also less code and less that you have to worry about, which is always better. Less code == less bugs.

I think the simplest way is to use UIImage's imageNamed: method, which loads the image from the app bundle and keeps it in cache.
This way you would only have to set the cell's UIImageView's image to [UIImage imageNamed:#"img1.png"] in cellForRowAtIndexPath: method.
Another point, if you cell has many subviews, I think subclassing it and adding different subviews as class properties is better. Then you only have to cast it when getting it from dequeueReusableCell and it allows you to modify subviews without using tags and casting everytime.

Related

UIImageview in TableView

I have to display image in tableview,i got all images but it does not display. Here Array contains 3 images, these images came from server. when cell for row at indexpath call it display only 3rd image that is last image 1st and 2nd row will be blank but when it scroll my tableview from bottom to top than only 1st and 2nd image displayed.
-
(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = nil;
static NSString *CellIdentifier = #"Cell";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.selectionStyle = UITableViewCellSeparatorStyleNone;
cell.backgroundColor = [UIColor clearColor];
if (appDelegate.array_xml != (id)[NSNull null])
{
ObjMore = [appDelegate.array_xml objectAtIndex:indexPath.row];
//imageview
NSString *str_img = ObjMore.iconurl;
str_img = [str_img stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
NSLog(#"str_img: %#", str_img);
self.imageicon = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, 50, 50)];
NSURL *url = [NSURL URLWithString:str_img];
NSLog(#"url %#",url);
[[AsyncImageLoader sharedLoader]cancelLoadingURL:url];
self.imageicon.imageURL = url;
self.imageicon.userInteractionEnabled = YES;
self.imageicon.tag = indexPath.row;
self.imageicon.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:self.imageicon];
}
return cell;
}
Please Help.
Thanks in Advance.
Please change your code -
[[AsyncImageLoader sharedLoader]cancelLoadingURL:self.imageicon.imageURL];
I'd suggest you to use this AsyncImageView. I've used it and it work wonders. To call this API:
ASyncImage *img_EventImag = alloc with frame;
NSURL *url = yourPhotoPath;
[img_EventImage loadImageFromURL:photoPath];
[self.view addSubView:img_EventImage]; // In your case you'll add in your TableViewCell.
It's same as using UIImageView. Easy and it does most of the things for you. AsyncImageView includes both a simple category on UIImageView for loading and displaying images asynchronously on iOS so that they do not lock up the UI, and a UIImageView subclass for more advanced features. AsyncImageView works with URLs so it can be used with either local or remote files.
Loaded/downloaded images are cached in memory and are automatically cleaned up in the event of a memory warning. The AsyncImageView operates independently of the UIImage cache, but by default any images located in the root of the application bundle will be stored in the UIImage cache instead, avoiding any duplication of cached images.
The library can also be used to load and cache images independently of a UIImageView as it provides direct access to the underlying loading and caching classes.
You create the object AsyncImageView instead of UIImageView
Are you refreshing the imageview or reloading the table row once you get the image ?
Also make sure you are refreshing the UI in main thread.

Optimize tableView scrolling

My tableView scrolls with lags if extra populated. Up to 20 cells go well, but above - it starts lagging while scrolling. Please, suggest an implementation with a better scrolling result. Here is the way I did it:
I have defined a custom UITableViewCell class.
The cell has 4 labels and an imageView (each outlet is a synthesized property):
I have placed a tableView in my viewController, and populated it like this:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"CustomCell";
MyCustomCell *cell = (MyCustomCell *) [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:#"MyCustomCell" owner:self options:nil];
for (id currentObject in topLevelObjects)
if ([currentObject isKindOfClass:[UITableViewCell class]]){
cell = (MyCustomCell *) currentObject;
break;
}
}
[cell.label_descr setText:#"bla-bla-bla"];
[cell.label_date setText:#"bla-bla-bla"];
[cell.label_time setText:#"bla-bla-bla"];
[cell.label_numeric setText:#"bla-bla-bla"];
[cell.image_view setImage:[UIImage imageWithContentsOfFile:#"bla-bla-bla"]];
return cell;
}
The amount of text in each cell, as you can see, is miserable, and the image used for the UIImageView is about 25x25 .png file.
My tableView is supposed to hold more than 300 cells (don't blame on me, I have a "customer from hell").
Please, suggest a way to make the tableView scroll smoother, without (much) lags. Or an alternative way to present those "damn-over-300-cells" to my "from hell" customer.
300 thanks in advance!
P.S.: sorry if duplicated, but the solutions found didn't help at all.
EDIT:
About the image used for the imageView:
I use 2 different images only:
a "checkmark" - transaction done
and a "pending" - transaction in process
Maybe I use to define 2 imageView outlets in my tableViewCell xib, and just selecting the needed imageView, instead of setting each time the required image?
SOLUTION FOUND, thanks to everybody, especially to iNoob and max_.
In tableViewCell's xib, I have set the "checkMark" as the default image of the imageView.
When defining the cell's values, in cellForRowAtIndexPath, only if needed, I say:
if_I_should_present_a_pending_image:
[cell setPending];
to replace the "checkMark" with a "pending" image (method defined in tableViewCell class):
- (void)setPending{
self.image_view.animationImages = [NSArray arrayWithObjects:
[UIImage imageNamed:#"pending_1.png"],
[UIImage imageNamed:#"pending_2.png"],
[UIImage imageNamed:#"pending_3.png"],
[UIImage imageNamed:#"pending_4.png"],
nil];
self.image_view.animationDuration = 2.0;
self.image_view.animationRepeatCount = 0;
[self.image_view startAnimating];
}
l
After that, the table scrolls like a charm. Thanks to everybody again. Cheers.
Don't iterate through all of the subviews: cell = [topLevelObjects objectAtIndex:0];
Load the images in the background using gcd, and store them in an NSDictionary for easy access:
Pseudo code:
If caches dict contains an object for the URL you want to load
Retrieve that image from the dict
Set it as the image
Else
Load the image using dispatch_async()
Add it to the dict
I found this article suggesting that creating the cells programatically instead of using a nib file could be up to 5-10% faster. I don't know if it's true or not, so take it with a grain of salt, but it may be worth a try.
Replace your code with following one and try it out.
For the below code :
1) Take IBOutlet of your UITableViewCell in the your controller. for below code it is myCustomTableViewCell.
MyCustomCell *customCell = (MyCustomCell *)[tableView dequeueReusableCellWithIdentifier:#"MyCustomCell"];
if(customCell == nil) {
[[NSBundle mainBundle] loadNibNamed:#"MyCustomCell" owner:self options:nil];
customCell = myCustomTableViewCell;
}
Hope it will work.

How To Move Download of Images to Background Thread To Smooth UI?

I have this method and I was advised to do the download of images on the background thread. Can anyone help me with this?
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSURL *myURL=[NSURL URLWithString:[self.picturesArray objectAtIndex:indexPath.row]];
NSData *myData1 = [[NSData alloc] initWithContentsOfURL:myURL];
UIImage *myImage = [[UIImage alloc] initWithData:myData1];
cell.imageView.image = myImage;
return cell;
}
Setting aside the fact that the code shown couldn't possibly work by itself... what you want to do is pretty easy. Your cell could be a custom UITableCell in which you define a method that does your download in the background. In cellForRowAtIndexPath:, you'd call that method, e.g. [cell loadImageInBackground:myURL]. The clever part is that the cell, of course, knows what is in it, i.e. the UIImageView you want to setup. So the background load, when it completes, can just set the image, and your table remains responsive.
You could use a UIImageView that downloads asynchronously. Check this one out:
http://iphone-dev-tips.alterplay.com/2009/10/asynchronous-uiimage.html
You should create a UITableViewCell subclass and add an AsynchronousImageView to it and then do [cell.asyncImageView loadImageFromURLString:[self.picturesArray objectAtIndex:indexPath.row]].

How to set the table view cell accessory view to retain a previously initialized UIImageView?

Let's say I have a property in my view controller, defined as follows:
#property (nonatomic, retain) UIImageView *checkmarkOffAccessoryView;
I #synthesize this in the implementation, release it in -dealloc and initialize it in -viewDidLoad as follows:
self.checkmarkOffAccessoryView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"checkmarkOff.png"]] autorelease];
So far so good.
When I use it in my table view delegate as an accessory view for multiple cells, two things happen:
Only one cell's accessory view shows the image
The application UI freezes.
The app doesn't crash, as near as I can tell, the UI simply becomes unresponsive. This is both in the simulator and on the device.
Here is how I use the initialized property with my cell:
- (UITableViewCell *) tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath {
// initialize or dequeue cell...
if (condition)
cell.accessoryView = self.checkmarkOffAccessoryView;
else
cell.accessoryView = nil;
}
With the aforementioned code, only one cell shows the accessory view and the UI freezes.
If I initialize the UIImageView instance directly in the delegate method I get all condition-satisfying cells showing the accessory view and I do not experience the UI freeze:
- (UITableViewCell *) tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath {
// initialize or dequeue cell...
if (condition)
cell.accessoryView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"checkmarkOff.png"]] autorelease];
else
cell.accessoryView = nil;
}
My goal is to initialize as few objects as possible and reuse one UIImageView. I'm curious why the first chunk of code is problematic and what I could do to fix this.
It seems like the cell's accessoryView property should just increment the retain count of self.checkmarkOffAccessoryView but it appears I am missing some detail.
What have I overlooked? Thanks for your advice.
EDIT
I think that:
self.checkmarkOffAccessoryView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:#"checkmarkOff.png"]] autorelease];
is the same as:
UIImageView *uncheckedView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"checkmarkOff.png"]];
self.checkmarkOffAccessoryView = uncheckedView;
[uncheckedView release];
Either way, I experience the same freeze symptom.
You cannot add the same view multiple times. The UI handler will go bonkers. To make sure of this, I tried doing what you said above and I got the same issue. The UI freezes up, the image only appears for one of the cells.
The best thing you can do is to store your image as a UIImage allocated, and to have a helper function which returns a new UIImageView per cell.
Using your current method (without a stored UIImage) you might do:
-(UIImageView *) makeCheckmarkOffAccessoryView
{
return [[[UIImageView alloc] initWithImage:
[UIImage imageNamed:#"checkmarkOff.png"]] autorelease];
}
And then do
cell.accessoryView = [self makeCheckmarkOffAccessoryView];
As you may be aware, UIImages on the other hand may be used any number of times. a UIImageView doesn't take up a lot of space, so you can easily have a bunch of those without worrying.
To expand on the one place only deal, imagine that you add a UIView to two places at the same time.
What will [ob removeFromSuperview] do for this object? Will it remove the view from both places? From one of them only? Which value will be returned when you request [ob superview]? Clearly the UI is not made to handle what you're asking for.
Try it without the autorelease in the initializer. I suspect you're over-releasing.
By the way, your console probably is showing a BAD_ACCESS error when it freezes. If you turn on NSZombieEnabled, my guess is you'll see it's making a call to a deallocated UIImage.
maybe this will help
- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"ShoppingListCell";
HSShoppingListCell *cell = (HSShoppingListCell *)[aTableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
[[NSBundle mainBundle] loadNibNamed:#"ShoppingListCell"
owner:self
options:nil];
cell = shoppingListCell;
}
ShoppingListItem *theItem = nil;
theItem = [self.fetchedResultsController objectAtIndexPath:indexPath];
UIImage *selected = [UIImage imageNamed:#"listBullet_checked.png"];
UIImage *notSelected = [UIImage imageNamed:#"listBullet.png"];
cell.imageView.image = ([theItem.checkedOff boolValue] ? selected : notSelected);
cell.shoppingListLabel.text = theItem.productName;
[cell.shoppingListLabel setFont:[UIFont fontWithName:#"Marker Felt" size:26.0]];
return cell;
}
- (void)toggleCellImage:(NSIndexPath *)indexPath
{
ShoppingListItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath];
item.checkedOff = ([item.checkedOff boolValue] ? [NSNumber numberWithBool:NO] : [NSNumber numberWithBool:YES]);
[HSCoreDataUtilities saveContext:item.managedObjectContext];
[self.tableView reloadData];
}
#pragma mark -
#pragma mark Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self toggleCellImage:indexPath];
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}
Reducing your case to the bare essentials (I was going to suggest to put two 'thin' UIView objects around the UIImageView...), I found that it is most probably impossible.
Create 2 empty UIView objects in IB, hook them up to bareView1 and bareView2. Then
UIImageView *imageView = [[UIImageView alloc]
initWithImage:[UIImage imageNamed:#"test.png"]];
[bareView1 addSubview:imageView]; // it shows either here ...
[bareView2 addSubview:imageView]; // ... or here
You can never get the image on sceen more than once like this. As a rule of thumb, I think the first object in line which does not inherit from UIView can be used multiple times, i.e. the UIImage. Like Kalle stated, a UIView can only have one parent in the view hierarchy.
Postponing the second addSubview only makes the UIImageView jump from bareView1 to bareView2.
The freeze happens maybe because the event handling gets mixed up: the accessory can be interactive, how would you know which one was tapped if they are one and the same object? So the code assumes objects are unique, and you manage to violate that assumption.

How do I cache something for a tableview?

I have a tableview with large images that fill the cells and the row heights are set based on the image size. Unfortunately, the table jerks badly when scrolling to the next cell.
I've been told that my tableview will scroll more smoothly if I cache the row heights and the images before they are loaded into the table.
All my data are stored in a plist.
How do I go about caching something?
What does the code look like and where does it go?
Thanks!
Here's my code for loading the images:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *detailTableViewCellIdentifier = #"Cell";
DetailTableViewCell *cell = (DetailTableViewCell *)
[tableView dequeueReusableCellWithIdentifier:detailTableViewCellIdentifier];
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"DetailTableViewCell" owner:self options:nil];
for(id currentObject in nib)
{
cell = (DetailTableViewCell *)currentObject;
}
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
NSString *Path = [[NSBundle mainBundle] bundlePath];
NSString *MainImagePath = [Path stringByAppendingPathComponent:([[appDelegate.sectionsDelegateDict objectAtIndex:indexPath.section] objectForKey:#"MainImage"])];
cell.mainImage.image = [UIImage imageWithContentsOfFile:MainImagePath];
return cell;
}
I'm also using the following for calculating the row height:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
AppDelegate *appDelegate = (DrillDownAppAppDelegate *)[[UIApplication sharedApplication] delegate];
NSString *Path = [[NSBundle mainBundle] bundlePath];
NSString *MainImagePath = [Path stringByAppendingPathComponent:([[appDelegate.sectionsDelegateDict objectAtIndex:indexPath.section] objectForKey:#"MainImage"])];
UIImage *imageForHeight = [UIImage imageWithContentsOfFile:MainImagePath];
imageHeight = CGImageGetHeight(imageForHeight.CGImage);
return imageHeight;
}
EDIT: Here is the final code below.
#define PHOTO_TAG 1
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Photo";
UIImageView *photo;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
UIImage *theImage = [UIImage imageNamed:[[appDelegate.sectionsDelegateDict objectAtIndex:indexPath.section] objectForKey:#"MainImage"]];
imageHeight = CGImageGetHeight(theImage.CGImage);
imageWidth = CGImageGetWidth(theImage.CGImage);
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
photo = [[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, imageWidth, imageHeight)] autorelease];
photo.tag = PHOTO_TAG;
[cell addSubview:photo];
} else {
photo = (UIImageView *) [cell viewWithTag:PHOTO_TAG];
[photo setFrame:CGRectMake(0, 0, imageWidth, imageHeight)];
}
photo.image = theImage;
return cell;
}
Caching is not a panacea for tableview performance. Caching is only valuable if there is something expensive to calculate, and you can avoid calculating it. If, on the other hand, you simply have too many views in your UITableViewCell, then caching will do nothing for you. If your row heights are all the same, then there's nothing to cache. If you use +[UIImage imageNamed:], then the system is already caching your images for you.
The most common first-order problem with UITableViewCells is putting too many subviews in them. How have you constructed your cell? Have you spent time studying the Table View Programming Guide, particularly A Closer Look at Table-View Cells? Understanding this document will save you much grief later.
EDIT: (Based on code above)
First, you're fetching a reusable cell, and then immediately throwing it away, reading a NIB and iterating over all the top level objects looking for a cell (one that looks almost exactly like the one you just threw away). Then you work out a string, which you use to open a file and read the contents. You do this every time UITableView wants a new cell, which is a lot. And you do it over and over again for the same rows.
Then, when UITableView wants to know the height, you read the image off of disk again. And you do that every time UITableView asks (and it may ask many times for the same row, though it does try to optimize this).
You should start by reading the UITableView Programming Guide I link above. That's hopefully going to help a lot. When you've done that, here are the things you should be thinking about:
You indicated that there is nothing but a single image view in this cell. Do you really need a NIB for that? If you do stick with a NIB (and there are reasons to use them in some case), then read the Programming Guide about how to implement a NIB-base cell. You should be using IBOutlet, not trying to iterate over the top-level objects.
+[UIImage imageNamed:] will automatically find files in your Resources directory without you having to work out the bundle's path. It will also cache those images for you automatically.
The point of -dequeueReusableCellWithIdentifier: is to fetch a cell that UITableView is no longer using and that you can reconfigure rather than you making a new one. You're calling it, but you immediately throw it away. You should check if it returned nil, and only load it out of the NIB if it did. Otherwise, you just need to change the image. Again, read the Programming Guide; it has many, many examples of this. Just make sure that you really try to understand what -dequeueReusableCellWithIdentifier: is doing, and don't treat it as just something you type at this point in the program.
If you do need to cache the heights, I did something like this (caching heights for a cell displaying an "article" object - article maybe one of several subclasses):
+ (CGFloat) heightForArticle: (Article*) article atWidth: (CGFloat) width {
static NSCache* heightCache = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
heightCache = [NSCache new];
});
NSAssert(heightCache, #"Height cache must exist");
NSString* key = #"unique"; //Create a unique key here
NSNumber* cachedValue = [heightCache objectForKey: key];
if( cachedValue )
return [cachedValue floatValue];
else {
CGFloat height = 40;//Perform presumably large height calculation here
[heightCache setObject: [NSNumber numberWithFloat: height] forKey: key];
return height;
}
}