I am parsing an RSS feed, and then caching the images from the rss feed and then displaying them in the cell's imageview. However the method I am using, slows down the rss feed's parse time, and slows down the TableView's scroll time. Please could you tell me how I could speed up this process. One of the image links is: http://a1.phobos.apple.com/us/r1000/009/Video/95/5d/25/mzl.gnygbsji.71x53-75.jpg, and one of the rss feeds I am trying to parse is: http://itunes.apple.com/au/rss/topmovies/limit=50/xml. Here is the code I am using to cache the images:
- (UIImage )getCachedImage: (NSString)url
{
UIImage* theImage = [imageCache objectForKey:url];
if ((nil != theImage) && [theImage isKindOfClass:[UIImage class]]) {
return theImage;
}
else {
theImage = [UIImage imageWithData: [NSData dataWithContentsOfURL:[NSURL URLWithString: url]]];
[imageCache setObject:theImage forKey:url];
return theImage;
}
}
And the code I am using to get the images is:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}
// Configure the cell...
int storyIndex = [indexPath indexAtPosition: [indexPath length] - 1];
int wierd = storyIndex *6;
cell.textLabel.text = [[stories objectAtIndex: storyIndex] objectForKey: #"songtitle"];
cell.detailTextLabel.text = [[stories objectAtIndex:storyIndex] objectForKey:#"artist"];
if ([imageLinks count] != 0) {
cell.imageView.image = [self getCachedImage:[imageLinks objectAtIndex:wierd]];
}
return cell;
}
As you can probably see, I am using an NSMutableArray called imageLinks, to store the imageLinks. However I am getting three image links from the rss feed, which means if I try to get the cached image: [imageLink objectAtIndex:storyIndex], the images are in the wrong places, but if I get the cached image: [imageLink objectAtIndex:wierd], it seems to work perfectly. So if you can see a fix to that, it would be great.
Thanks in advanced.
Your problem is that you're using dataWithContentsOfURL which is a blocking API. This means that it is performed on the main thread along with your UI and will block your UI until it completes. This is bad.
You should look into the NSURLConnection class and it's delegate protocol, NSURLConnectionDelegate to do data downloads asynchronously without manually spawning and managing new threads.
Related
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.
I've created a custom UITableViewCell and each cell is passed a custom subclass of AVPlayer object from the UITableViewController. On each cell I have a play button, pause button and loading indicator.
When I play the audio, elements work as required, and change when player state has changed e.g. when playing, pause button appears, play button disappears. When I play audio on a second cell, the first cell knows this, resets it button state, and the second cell does it's business.
So this functionality works perfectly, the only problem is because the UITableViewCells get reused, when I scroll down to cells below, I start seeing the pause button appear on them. This is because they are the same cells as the ones above (reused) and because my cells are delegates for my custom subclass of AVPlayer, the audio player is sending messages to a cell which isn't the correct one.
What can I do to make each UITableViewCell a separate delegate object for my AVPlayer?
You have to remove the elements from the cells upon reuse:
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
} else {
/* prepare for reuse */
[cell.playButton removeFromSuperview];
/* or */
[[cell viewWithTag:10] removeFromSuperview];
}
I had the same problem with images I'm loading from a JSON blob. I used GCD and saved my images to an NSDictionary paired with the key assigned to each cell.
- (UIImage *)imageForRowAtIndexPath:(NSIndexPath *)indexPath
{
// get the dictionary for the indexPath
NSDictionary *tweet = [tweets objectAtIndex:[indexPath row]];
// get the user dictionary for the indexPath
NSDictionary *user = [tweet objectForKey:#"posts"];
//get the image URL
NSURL *url = [NSURL URLWithString:[[[[[tweet objectForKey:#"photos"] objectAtIndex:0] objectForKey:#"alt_sizes"] objectAtIndex:3] objectForKey:#"url"]];
// get the user's id and check for a cached image first
NSString *userID = [user objectForKey:#"id"];
UIImage *image = [self.images objectForKey:userID];
if(!image)
{
// if we didn't find an image, create a placeholder image and
// put it in the "cache". Start the download of the actual image
image = [UIImage imageNamed:#"Placeholder.png"];
[self.images setValue:image forKey:userID];
//get the string version of the URL for the image
//NSString *url = [user objectForKey:#"profile_image_url"];
// create the queue if it doesn't exist
if (!queue) {
queue = dispatch_queue_create("image_queue", NULL);
}
//dispatch_async to get the image data
dispatch_async(queue, ^{
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *anImage = [UIImage imageWithData:data];
[self.images setValue:anImage forKey:userID];
UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
//dispatch_async on the main queue to update the UI
dispatch_async(dispatch_get_main_queue(), ^{
cell.imageView.image = anImage;
});
});
}
// return the image, it could be the placeholder, or an image from the cache
return image;
}
I solved the problem by making the UITableViewController the delegate for the audio player. Then saving the "currently playing" cell's indexPath to a #property in the UITableViewController.
Then in - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath I check to see if the indexPath is the same as the "currently playing" cell's indexPath, if so set the "audio playing" button arrangent, if not then set the default button arrangement.
This works better in distinguishing cells as you have a unique identifier indexPath to compare them with.
I'm loading pictures into a table view that correspond to the cell text, so each image is different. As the user scrolls down, iOS has to manually reload each image from the SSD, so scrolling is very choppy. How do I cache images or prevent the table view cells from needing to be recreated? Others have had their issues solved by using imageNamed: as iOS will automatically cache your images, but I am loading images from the documents directory, not the app bundle. What should I do? Thanks.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return [issues count];
}
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
}
// Set up the cell...
NSDictionary *dic = [self.issues objectAtIndex:indexPath.row];
cell.text = [dic objectForKey:#"Date"];
cell.imageView.image = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:#"%#/issues/%#/cover.png", documentsDirectory, [dic objectForKey:#"Directory Name"]]];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 150;
}
That array of dictionaries is your model, so it would be a natural place. The tricky part is making your model mutable. You can either make your model mutable in the class, or jump through the hoops when you cache the image. I'd recommend the former, but coded it here to match your existing code...
- (UIImage *)imageForIndexPath:(NSIndexPath *)indexPath {
NSDictionary *dic = [self.issues objectAtIndex:indexPath.row];
UIImage *image = [dic valueForKey:#"cached_image"];
if (!image) {
image = [UIImage imageWithContentsOfFile:[NSString stringWithFormat:#"%#/issues/%#/cover.png", documentsDirectory, [dic objectForKey:#"Directory Name"]]];
NSMutableDictionary *updatedDictionary = [NSMutableDictionary dictionaryWithDictionary:dic];
[updatedDictionary setValue:image forKey:#"cached_image"];
NSMutableArray *updatedIssues = [NSMutableArray arrayWithArray:self.issues];
[updatedIssues replaceObjectAtIndex:indexPath.row withObject:[NSDictionary dictionaryWithDictionary:updatedDictionary]];
self.issues = [NSArray arrayWithArray:updatedIssues];
}
return image;
}
This will be choppy on the first scroll through the list, then smoother thereafter. If you'd like to have no first-time chop and incur a little latency before the view appears, you can walk your model ahead of time and force the load:
for (int i=0; i<self.issues.count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
(void)[self imageForIndexPath:indexPath];
}
One last thing - Another solution is a mutable array to match your issues array. That may be just fine, but more often than not, I end up glad that I included some cached calculation with my model. If you find yourself using that issues array elsewhere, you'll be happy that you have the images all taken care of.
Along with caching you may also consider loading the images in background using Grand central dispatch. When the cell is loaded put a UIActivityIndicator then replace it with an image in a separate thread.
Also checkout this related answer for image stutter:
Non-lazy image loading in iOS
I have used ASIHTTPRequest framework in my project to handle all network related tasks.
I have custom cell with thumbnail which is coming from web server and there are around 500 images so I have to reuse the cell to handle it. Due reusing of cell when we scroll through tableview we can see images of previous cells which will be replaced by new image.
If network connection is low its worse since it takes lot of time to download the image..so for that time you can see wrong image for particular because reusing cell so I need to find way so that this image replacement shouldn't be visible to user.
I am using ASIDownalod SharedCache method.
EDIT
NSString *reuseIdentifier = #"offerCell";
BRZOfferCell *offerCell = (BRZOfferCell*)[tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
if (offerCell==nil) {
offerCell = [[[BRZOfferCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier celltype:kDealCellTypeDealsList] autorelease];
}
[offerCell setImage:[UIImage imageNamed:IMAGE_NO_IMAGE]];
//---get the letter in the current section---
//NSString *alphabet = [mDealsIndex objectAtIndex:[indexPath section]];
//---get all deals beginning with the letter---
NSString* lSectionIndex = [NSString stringWithFormat:#"%i",[indexPath section]];
NSMutableArray *deals = [mIndexedOffersDic objectForKey:lSectionIndex];
if ([deals count]>0) {
//---extract the relevant deal from the deals array object---
Offer* lOffer = [deals objectAtIndex:indexPath.row];
[offerCell setOffer:lOffer];
offerCell.accessoryView = UITableViewCellAccessoryNone;
if (mTableView.dragging == NO && mTableView.decelerating == NO)
{
//Function : format image url to _thumb#2x.png and Initiate Image request download
//and set cache policy
[mListViewHelper InitImageRequest: lOffer.PromoImage indexPath: indexPath];
}
}
return offerCell;
As you said UITableView reuses cells in order to perform well, so you need to clear the cell before reuse it, or it's going to display the wrong data.
You also should use asynchronous calls, and some delegation to update cells.
I would actually take it a level higher and use NSOperationQueue, that allows you to set the maximum number of concurrent downloads, and canceling requests when leaving page.
What you might want to do is to create Data helpers
#protocol BookDataHelperDelegate <NSObject>
#required
- (void) bookDataHelperDidLoadImage:(BookDataHelper *)dataHelper;
#end
#interface BookDataHelper
#property (nonatomic, retian) UIImage *bookCover;
#property (nonatomic, retain) Book *book;
#property (nonatomic, assign) NSObject<BookDataHelperDelegate> *delegate;
- (void) fetchImageAsynchronouslyFromWebWithDelegate:(NSObject<BookDataHelperDelegate> *)delegate;
#end
This would be how you reload data on your table
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *SimpleTableIdentifier = #"SimpleTableIdentifier";
CustomCell *cell = [tableView
dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
if (cell == nil)
{
cell = [[[CustomCell alloc]initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:SimpleTableIdentifier] autorelease];
}
BookDataHelper *dataHelper = [myArray objectAtIndex:indexPath.row];
if (!dataHelper.bookCover)
{
[cell.imageView setImage:nil];
[dataHelper fetchImageAsynchronouslyFromWebWithDelegate:self];
}
else
{
[cell.imageView setImage:dataHelper.bookCover];
}
cell.bookTitleLabel.text = dataHelper.book.title;
return cell;
}
- (void)bookDataHelperDidLoadImage:(BookDataHelper *)datahelper
{
[tableView reloadDate];
// here you would either reload the table completely
// Or you could reload specific cells
}
In your tableview cell delegate, when you get a reused or new, cell, clear the image before returning it. Update with the proper ownloaded image in an asynchronous callback. You might want to make sure the images are saved or retained somewhere else though if you don't want your app to keep redownloading them.
in ASIHTTPRequest framework its work on both type Synchronize and ASynchronize so firat tell me which one u use for get image data & also tell me that u send whole 500 image request at time or send as per your cell is loaded
or if you send 500 images request at a time than this on is not right as per the cell requirement send the request fro that cell image other wise its not feasible.
I have used ASIDownloadCache methods to solve my problem. Actually there are 2 solutions for this problem
Setting your own cache path instead of using SharedCache but i didn't went for this becuase I was already using sharedCache and found another efficient method which will avoid me changing my current implementation
In this approach I have used 2 methods from ASIDownloadCache methods(surprisingly ASIHTTPREquest website didn't mention these methods in their brief info)
2.1 First method - (BOOL)isCachedDataCurrentForRequest:(ASIHTTPRequest *)request
to verify if this particular image url is already cached or not if yes use 2nd method
2.2 - (NSData *)cachedResponseDataForURL:(NSURL *)url to get the cached image so that we can set the image in cellForRowAtIndexPath itself and you will not see image replacing issue due reusability of cell.
Here is the code :
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
NSString *reuseIdentifier = #"offerCell";
BRZOfferCell *offerCell = (BRZOfferCell*)[tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
if (offerCell==nil) {
offerCell = [[[BRZOfferCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseIdentifier celltype:kDealCellTypeDealsList] autorelease];
}
[offerCell setImage:[UIImage imageNamed:IMAGE_NO_IMAGE]];
//---get the letter in the current section---
//NSString *alphabet = [mDealsIndex objectAtIndex:[indexPath section]];
//---get all deals beginning with the letter---
NSString* lSectionIndex = [NSString stringWithFormat:#"%i",[indexPath section]];
NSMutableArray *deals = [mIndexedOffersDic objectForKey:lSectionIndex];
if ([deals count]>0) {
//---extract the relevant deal from the deals array object---
Offer* lOffer = [deals objectAtIndex:indexPath.row];
[offerCell setOffer:lOffer];
offerCell.accessoryView = UITableViewCellAccessoryNone;
if ([mListViewHelper isCached:lOffer.PromoImage]) { // Is image available in Cache ?
// Image is available use image fomr cache directly
[offerCell setImage:[UIImage imageWithData:[mListViewHelper cacheDataWithNSURL:lOffer.PromoImage]]];
}
else{
//Function : Initiate Image request download and set cache policy
if (mTableView.dragging == NO && mTableView.decelerating == NO)
[mListViewHelper InitImageRequest: lOffer.PromoImage indexPath: indexPath];
}
}
return offerCell;
}
i have 60 rows in an table view.i have an array named as "BundleImagesArray " with 60 bundle images names.So i am retrieving the images from bundle and creating thumbnail to it.
whenever binding each cell at first time ,i am storing the Thumbnail images in to an array.because of enabling the fast scrolling after bind each cell.i am utilizing the images from the array(without creating the thumbnail again).however the imageCollection array(which will store thumbnail images) is disorder some times
the Index path.row is coming as 1,2.....33,34,50,51..etc
its not an sequential order.so i am getting trouble with my imageCollection array which is used to store and retrieve images according to the index path.may i know what is the reason for that.can any one provide me a good solution for this.is there any way to get the indexpath.row as sequential order?
my cellForRowAtIndexPath code is:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"IndexPath Row%d",indexPath.row);
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
if ([cell.contentView subviews])
{
for (UIView *subview in [cell.contentView subviews])
{
[subview removeFromSuperview];
}
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
[cell setAccessoryType:UITableViewCellAccessoryNone];
Class *temp = [BundleImagesArray objectAtIndex:indexPath.row];
UIImageView *importMediaSaveImage=[[[UIImageView alloc] init] autorelease];
importMediaSaveImage.frame=CGRectMake(0, 0, 200,135 );
importMediaSaveImage.tag=indexPath.row+1;
[cell.contentView addSubview:importMediaSaveImage];
UILabel *sceneLabel=[[[UILabel alloc] initWithFrame:CGRectMake(220,0,200,135)] autorelease];
sceneLabel.font = [UIFont boldSystemFontOfSize:16.0];
sceneLabel.textColor=[UIColor blackColor];
[cell.contentView addSubview:sceneLabel];
//for fast scrolling
if([imageCollectionArrays count] >indexPath.row){
importMediaSaveImage.image =[imageCollectionArrays ObjectAtIndex:indexPath,row];
}
else {
//for start activity indicator
[NSThread detachNewThreadSelector:#selector(showallstartActivityBundle) toTarget:self withObject:nil];
NSData *datas = [self photolibImageThumbNailData:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:temp.fileName ofType:#"png" inDirectory:#"Images"]]];
importMediaSaveImage.image =[UIImage imageWithData:datas];
[imageCollectionArrays addObject:importMediaSaveImage.image];
//to stop activity indicator
[NSThread detachNewThreadSelector:#selector(showallstopActivityBundle) toTarget:self withObject:nil];
}
sceneLabel.text = temp.sceneLabel;
temp = nil;
return cell;
}
Getting the tableview to call you in a particular order is not the right solution. You need to be able to provide any cell it needs in any order.
I think the problem is that you are using an array and trying to access indexes that don't exist yet. You could use an NSMutableDictionary for your imageCollectionArrays (instead of NSArray) and store your data there, keyed by row (or NSIndexPath). They you can add or retrieve them in any order.
An NSArray is perfectly fine for UITableView rows. The rows are ordered, and an array is also ordered, so no problem there.
The problem in your code seems to be that you are using two arrays, one immutable and one mutable. You are adding objects to the mutable array, and so it is not exactly predictable where they will be added (because it is not predictable that the rows are going to be needed in order).
I recommend filling your NSMutableArray first with [NSNull null] objects, and then inserting the image at a specific point in the array:
// during initialization
for (int i=0; i<numberOfImages; i++) {
[imageCollectionArrays addObject:[NSNull null]];
}
// in cellForRowAtIndexPath:
[imageCollectionArrays replaceObjectAtIndex:indexPath.row
withObject:importMediaSaveImage.image];
Try that, see if it works.