I have found many answers to problems I've encountered on here and would like to ask a question for the first time (I'm a newbie to asking for help!)
I've implemented the SDWebImage framework into an project that uses JSON parsed data to populate a UITableViewController. The images are being cached successfully but when the App first launches, all the cell images are absent. Only when I scroll up or down and the rows appear (or when I tap them to select a row) do they appear. If I go back into it, all the images are there cached and work fine. It's just the first launch that I am missing all my images. I've pasted what I have here in the hope someone can post a simple solution. Got a feeling it's something minor that I have to do to make them appear on first launch.
Code follows:
static NSString *MyIdentifier = #"Maincell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:MyIdentifier];
}
UIFont *wireBold = [UIFont fontWithName:#"Helvetica" size:14.0f];
cell.textLabel.text = [[news objectAtIndex:indexPath.row]objectForKey:#"Title"];
cell.textLabel.font = wireBold;
cell.textLabel.textColor = [UIColor blackColor];
UIFont *wireSub = [UIFont fontWithName:#"Sintony" size:10.0f];
cell.detailTextLabel.text = [[news objectAtIndex:indexPath.row]objectForKey:#"Name"];
cell.detailTextLabel.font = wireSub;
cell.detailTextLabel.textColor = [UIColor grayColor];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
NSString *filePath = [[news objectAtIndex:indexPath.row]objectForKey:#"Image"];
NSString *urlString = [NSString stringWithFormat:#"http://www.mywebhost/images/%#.png",filePath];
[cell.imageView setImageWithURL:[NSURL URLWithString:urlString] placeholderImage:[UIImage imageNamed:#"placeholder.png"]];
return cell;
Are you at least seeing placeholder.png initially? Is that image appropriately sized for your cell? Reading through comments in other posts, it appears that if you do not have a placeHolder image then it won't show the loaded image until the tableView is reloaded. That is consistent with the behavior you reported.
I also recommend you checkout JSON fetching frameworks such as Sensible TableView. The framework will automatically fetch all your JSON data from your web service, and will handle all display details including fetching the images asynchronously. Saves me tons of time.
Related
My UITableView, after the messages (content) is loaded into the cells, experiences a very noticeable lag in scrolling and sometimes freezes up for a few seconds. This is weird because all the messages are loaded once the user scrolls. Any ideas on how to make this fast scrolling no problem?
Thank you!
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *simpleTableIdentifier = #"MailCell";
MailCell *cell = (MailCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"MailCell" owner:self options:nil];
cell = [nib objectAtIndex:0];
// Anything that should be the same on EACH cell should be here.
UIView *myBackView = [[UIView alloc] initWithFrame:cell.frame];
myBackView.backgroundColor = [UIColor colorWithRed:40.0/255.0 green:148.0/255.0 blue:196.0/255.0 alpha:1];
cell.selectedBackgroundView = myBackView;
cell.messageText.textAlignment = NSTextAlignmentLeft;
cell.messageText.lineBreakMode = NSLineBreakByTruncatingTail;
}
NSUInteger row = [indexPath row];
// Extract Data
// Use the message object instead of the multiple arrays.
CTCoreMessage *message = [[self allMessages] objectAtIndex:row];
// Sender
CTCoreAddress *sender = [message sender];
NSString *senderName = [sender name];
// Subject
NSString *subject = [message subject];
if ([subject length] == 0)
{
subject = #"(No Subject)";
}
// Body
BOOL isPlain = YES;
NSString *body = [message bodyPreferringPlainText:&isPlain];
body = [[body componentsSeparatedByCharactersInSet:
[NSCharacterSet whitespaceAndNewlineCharacterSet]]
componentsJoinedByString:#" "];
body = [body stringByReplacingOccurrencesOfString:#" " withString:#" "];
// Populate Cell
[[cell nameText] setText:senderName];
[[cell subjectField] setText:subject];
[[cell messageText] setText:body];
if ([message isUnread])
{
cell.nameText.textColor = [UIColor colorWithRed:15.0/255.0 green:140.0/255.0 blue:198.0/255.0 alpha:1];
}
else
{
cell.nameText.textColor = [UIColor blackColor];
}
return cell;
}
xCode comes with a profiler called Instruments. It's CPU time profiler is perfect for figuring out which code is slowing things down. Run your app with the profiler and spend a few seconds just scrolling around. It will give you statistics.
Keep in mind, the code inside if (cell == nil) will run about 10 times (UITableView caches just enough cells to fill itself). But the code outside the if is expensive - it runs every time a cell becomes visible.
I would guess the most expensive operations in the code you posted are:
Giving iOS too many subviews to draw on a cell
Do your own drawing instead.
Replacing runs of whitespace in the entire body text with single spaces
The code you posted allocates new strings for each word, plus an array to hold them. Then it allocates two more copies (one with words rejoined and one with runs of spaces compacted). It processes the entire body text string, even if the majority will never be visible to the user in a tiny preview of the body!
Cache the resulting string so that this operation is performed only once per cell.
Also, you can create a new mutable string, reserve space in it, and copy characters from the original in a loop (except runs of whitespace). Instead of processing the entire body text, you could stop at 100 characters or so (enough to fill a table cell). Faster and saves memory.
Slow UITableView scrolling is a very very common question. See:
How to solve slow scrolling in UITableView
iPhone UITableView stutters with custom cells. How can I get it to scroll smoothly?
Nothing seems wrong with your code. I'd recommend using a table optimization framework such as the free Sensible TableView.
My tableview consists of images loading from server, this slow down my tableview scrolling. Below is my code . any idea, please help me.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CustomTblViewCellFacetoface *cell = (CustomTblViewCellFacetoface *) [tableView dequeueReusableCellWithIdentifier:#"cellA"];
if (cell == nil)
{
NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:#"CustomTblViewCellFacetofaceNib" owner:Nil options:nil];
for (id currentObject in topLevelObjects)
{
if ([currentObject isKindOfClass:[UITableViewCell class]])
{
cell = (CustomTblViewCellFacetoface *) currentObject;
break;
}
}
}
// configure cell
IStructFacetofaceRequests *objappointmentdetails = [M_ArrFacetofaceRequests objectAtIndex:indexPath.row];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.backgroundColor = [UIColor clearColor];
cell.m_CtrllblName.text = objappointmentdetails.m_strUsername;
cell.m_CtrllblVenue.text = [NSString stringWithFormat:#"Venue : %#",objappointmentdetails.m_strVenue];
cell.m_CtrllblDate.text = [NSString stringWithFormat:#"%# - %#",objappointmentdetails.m_strStartDate,objappointmentdetails.m_strEndDate];
[cell.m_CtrllblName setTextColor:[UIColor colorWithRed:(113/255.f) green:(113/255.f) blue:(113/255.f) alpha:1.0f]];
[cell.m_CtrllblVenue setTextColor:[UIColor colorWithRed:(113/255.f) green:(113/255.f) blue:(113/255.f) alpha:1.0f]];
[cell.m_CtrllblDate setTextColor:[UIColor colorWithRed:(113/255.f) green:(113/255.f) blue:(113/255.f) alpha:1.0f]];
cell.m_CtrllblName.font=[UIFont fontWithName:#"Arial-BoldMT" size:16];
NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: objappointmentdetails.m_strImageurl]];
cell.m_CtrlImgViewUser.image=[UIImage imageWithData: imageData];
[cell.m_CtrlBtnView addTarget:self action:#selector(MoveToNextView:) forControlEvents:UIControlEventTouchUpInside];
cell.m_CtrlBtnView.tag=indexPath.row;
return cell;
}
this is the code i used in cellfor row at index path.
You can solve that by using Asynchronous loading..
please go through this tutorial..
http://www.markj.net/iphone-asynchronous-table-image/
You can use UITableView lazy loading .
here an sample from apple
and u can see this project at github
Yes, UITableView is designed around the assumption of lazy loading. When you make a UITableView, you do not load any of the entries at all. Instead you wait for the system framework to call your cellForRowAtIndexPath method. That method gets called once for every cell that needs to be loaded, and that is just for the cells that are visible at the time. As the user scrolls the table view, new cells come into view, and your cellforRowAtIndexPath method gets called again for each new cell coming into view.
Now that is the general principle. But if your cells are being populated by data from a server, then there are some additional considerations. You could structure your cellForRowAtIndexPath to be as lazy as possible and call the server for each and every cell that comes into view. But the network delays would make the user experience really awful. So it is to your advantage to buffer up a number of cells worth of data ahead of time in a data structure other than the cells in a UITableView. That way, when cellForRowAtIndexPath gets called, you will be able to quickly supply the contents of the cell by constructing it from the buffered data. Exactly how much data to buffer depends on how large each data element is, and what else your application is doing in the way of memory allocation. Offhand, I see nothing wrong with buffering 500 to 1000 cells worth of data in your app. But don't mix up your buffering of the data with the UITableView's queuing and reusing of cells. There is no reason to maintain a large number of cells ready to go - just the data that goes into those cells.
I wonder if anyone can speculate or better yet provide a piece of code as for the implementation of the lengthy friends list in the Facebook iPhone app.
when you open the app and go strait to the friends list, you get the list almost in an instant, at least for me with ~500 friends.
when I try it in my own app it takes lots of precious seconds to populate the table view with the same data, so how does Facebook accomplished such a quick response time ?
upon looking at the tableview in the facebook app you notice there is no scroll bar usually found in such tableview, could that be one sign of the neat trick facebook is utilizing to achieve this rapid rows insert ? could it be they implemented some sort of a virtual tableview with only holds a few dozen rows but rotates them ?
any thoughts ?
the UITableView will let you do this. There are a number of examples on the internet with UITableView and Custom Cell's
Essentially, you load your images in the background, and you reuse the Cells that are in the tableview
EDIT Added example code to demonstrate how this is accomplished.
IMPORTANT NOTE
This code was not tested and may or may not actually function as is.
It was pasted with some editing for length. I did a lot more then this in my app, but in the interest of keeping with the example requested I omitted a lot.
On with the example:
Here is where I get the cell, load it with the items that are readily available. And send it to the background thread to load the rest.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"OfferCell";
static NSString *CellNib = #"OfferItem";
OfferCell* cell = (OfferCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:CellNib owner:self options:nil];
cell = (OfferCell*)[nib objectAtIndex:0];
}
NSDictionary* couponPackage = [self.jsonOfferData valueForKey:#"result"];
NSArray *couponList = [couponPackage valueForKey:#"offers"];
if ([couponList count] >= indexPath.row )
{
NSDictionary* couponData = [couponList objectAtIndex:indexPath.row];
Coupon *coupon = [[Coupon alloc] initWithDictionary:couponData];
NSDictionary *params = [NSDictionary dictionaryWithObjectsAndKeys:cell,#"cell",coupon,#"coupon", nil];
//Right here you would try to load any cached imaged from disk.
//Then send a Thread to the background to load the image.
[self performSelectorInBackground:#selector(loadTableViewCellData:) withObject:params];
//Load up the rest of the custom info into the custom cell.
[cell.captionLabel setText:coupon.name];
[cell.subTextLabel setText:coupon.subText];
[cell setAccessoryType:UITableViewCellAccessoryDetailDisclosureButton];
[cell setCommand:coupon.command];
[cell setParameter:coupon.commandArgs];
[cell setImageURL:coupon.imageURL];
[cell setImageAltURL:coupon.imageAltURL];
[cell setRegistrationCode:coupon.registrationCode];
[coupon release];
}
return cell;
}
as you can see, i call a background thread before i even load the custom content in the cell.
- (void) loadTableViewCellData:(NSDictionary*) objectData
{
OfferCell *cell = [objectData objectForKey:#"cell"];
Coupon *coupon = [objectData objectForKey:#"coupon"];
UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[coupon iconURL]]]];
[objectData setValue:image forKey:#"image"];
self performSelectorOnMainThread:#selector(setImageOnMainThread:) withObject:objectData
}
after downloading the image, i send a Main thread request to update the Image that is in the cell object.
- (void) setImageOnMainThread:(NSDictionary*) objectData
{
OfferCell *cell = [objectData objectForKey:#"cell"];
Coupon *coupon = [objectData objectForKey:#"coupon"];
UIImage *image = [objectData objectForKey:#"image"];
cell.icon.image = image;
}
##AGAIN This May not Actually Function. ##
I did not copy all of my code for this. this is a hammer out so you can get the idea.
play with the code and test it. but the fundamentals are.
Dequeue the cell that will fit your needs (Reuse Identifier)
Use the cell if it can be dequeue'd or create a new one with a reuse identifier (my example uses a xib file named OfferItem.xib)
Send a thread to the background that will load the image data from disk or url (a combination of both is recommended)
Send a thread back to the UI when you are ready to load the image into the View (Updating the UI must be done on the main thread)
if you can do that, then your friends list (or in this case offers) will be loaded up as fast as possible. and the Images will pop on the screen as soon as they download.
Also if you use a Caching technique it will be faster for subsequent loads because in the the first method {tableView:cellForRowAtIndexPath:} you would load up the cached image immediately.
Aside from that, this should load your cell's pretty fast.
They obviously load the data from a local resource (plist, ManagedObject, ...)
Have a look at some sample code to draw a TableView:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *kCellIdentifier = #"MyCellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:kCellIdentifier] autorelease];
}
return cell;
}
The dequeueReusableCellWithIdentifier: thing is one reason why TableViews in iOS can draw quickly. It works somehow like this:
1)You provide an identifier for a cell you're creating.
2)Cells that are visible at first get alloced (with identifier)
3)When a Cell is moved off the screen it gets put on a pile MyCellIdentifier
4)Whenever the system needs to draw a cell of identifier:MyCellIdentifier it first looks whether there are any cells currently unused on the MyCellIdentifier pile. If that's the case it picks one off the pile and thus doesn't have to alloc a new one. That way expensive allocing can be kept at a minimum.
I hope this answers your question :)
I am creating an application which uses a web service.And retrieves a list of users and there details like images, user id and there names.I displayed all the information related to users in table view, Thus each of the cell in the table view has an image with the for tables in it. I am using a Custom cell class to create the individual cells. selecting any row in table presents a detail view (using navigation) which show a larger image and all the details related to the particular user i selected.
in customcell and detail view class i am using web view to display image.
But when i run the app the images gets a bit of delay to display and same happens with the detail view.
Is there any alternative so that i can improve the performance of the table view so that i can have smooth scrolling of table view with out any delay in image loading and detail view??
here is the code...
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CustomCellIdentifier = #"CustomCellIdentifier ";
CustomCell *cell = (CustomCell *)[tableView
dequeueReusableCellWithIdentifier: CustomCellIdentifier];
if (cell == nil)
{
NSArray *nib = [[NSBundle mainBundle] loadNibNamed:#"CustomCell" owner:self options:nil ];
//cell = [[CustomCell alloc] initwi ];
for (id oneObject in nib)
if ([oneObject isKindOfClass:[CustomCell class]])
cell = (CustomCell *)oneObject;
}
NSUInteger row = [indexPath row];
NSString *imageName = [imgArray objectAtIndex:row];
NSString *completeImageUrl = [[NSString alloc] initWithFormat:#"http://122.160.153.166:201/%#", imageName];
NSURL *url = [NSURL URLWithString:completeImageUrl];
//NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
NSData *imageData = [[NSData alloc] initWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:imageData]; /// check to see if we are getting all the arrays such as image array and userId array and name array of same size..
if(image == nil)
{
}
cell.imgView.image = image; /// other wise an execption of out out array range will be shown
[image release];
[imageName release];
//[cell.webView initWithFrame:CGRectZero];
//[cell.webView loadRequest:requestObj];
//cell.webView.frame = CGRectMake(20, 0, 80.0, 64);
cell.userIdLabel.text = (NSString *)[userId objectAtIndex:row];
cell.nameLabel.text = (NSString *)[userName objectAtIndex:row];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
return cell;
}`
i think problem can be in imgArray array as i am setting it from other class. Where i request the web service and fetched all the data about users .
Any help is greatly appreciated . Thanks in advance
I got the same problem. For that I used EGOImageCache and some thing.
Find this Url for EGOImage
Download files those names starts with "EGO", and add those to your project.
and write the following code where ever you want to put the image:
EGOImageView *imgView = [[EGOImageView alloc] initWithFrame:CGRectMake(50,50,220,360)];
NSString *imageName = [imgArray objectAtIndex:row];
NSString *completeImageUrl = [[NSString alloc] initWithFormat:#"http://122.160.153.166:201/%#", imageName];
NSURL *url = [NSURL URLWithString:completeImageUrl];
imgView.imageUrl = url;
[self.view addSubView:imgView];
Thats it. Use the similar code, where ever you want the image.
At the first time while loading it will take some time to download the image. But later it will cache the image and use it the next time.
Is there any alternative so that i can improve the performance of the table view so that i can have smooth scrolling of table view with out any delay in image loading
For this the answer is Lazy Loading of images in cells
You can implement lazy loading on webviewDidLoad which shows that webview has loaded completely
Using a UIWebView to display a single image is overkill. You should be using NSURLConnection (or one of many alternative HTTP wrappers/libraries) to load the image data and UIImageView to display it in each of your table cells. In my experience, there is no way (or at least no straightforward way) to eliminate the rendering delay when using UIWebView.
Why are you using the webview for displaying the images. Imageview should be used instead. If you are getting the images from the server then you should get those in separate thread and after you receive the images you should reload that particular row.
Some code snippet is like this:
- (UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath
...
...
UIImage *img = (UIImage *)[imagesArray objectAtIndex:indexPath.row];
if(img == nil){
[imgView setImage:temporaryImage];
[NSThread detachNewThreadSelector:#selector(getTheThumnbails:) toTarget:self withObject:indexPath];
}
else
[imgView setImage:img];
for further assistance look at this
Hope this helps.
Thanks,
Madhup
okay finally i removed the uiweb view from my app and used Imaged view and succeed.
i used the link that was given by the developer of the tweetie . here it is link text
i used the ABTableViewCell class and created the whole cell using the code.
The scrolling was very jerky when i executed the app. after applying almost 4 hours and with the help of lazy loading i was able to run my app smoothly. I stored the data which is retrieved from url into an array then applied the concept in tableView:cellForRowAtIndexPath:
method..
Thanks you guys for helping me ...
Three20 has a rich-text table view cell class (TTStyledTextTableCell I think) - should render significantly faster than an embedded UIWebView. You could also roll your own, though that would take a lot longer.
I have a UILabel that I create a radius on the layer, using cornerRadius. The ultimate goal is to make the label look like Apple does in the mail app.
It looks great at first, but once you drill down into that row and back a few times, the quality of the rounded edge starts to degrade. You can see in the screen shot, the left side is blocky.
Why would this be happening? It seems to happen after about 2 times of loading that view.
(source: puc.edu)
Here is my cell creation method:
- (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];
}
Trip *trip = [fetchedResultsController objectAtIndexPath:indexPath];
cell.textLabel.text = trip.title;
cell.detailTextLabel.text = #"Date of trip";
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
// Create a nice number, like mail uses
UILabel *count = [[UILabel alloc] initWithFrame:CGRectMake(cell.contentView.frame.size.width - 50, 12, 34, 20)];
[count setText:[NSString stringWithFormat:#"%i",[[trip.rides allObjects] count]]];
[count setFont:[UIFont fontWithName:#"Helvetica-Bold" size:16]];
count.textAlignment = UITextAlignmentCenter;
count.backgroundColor = [UIColor grayColor];
count.textColor = [UIColor whiteColor];
count.layer.cornerRadius = 10;
[cell addSubview:count];
[count release];
return cell;
}
In every call to cellForRowAtIndexPath, you are creating a new count UILabel. Eventually there will be several overlapping views in the same place with the same antialiased curve, so it will look blocky.
Try creating the count UILabel only when a new cell is created, in the if (cell == nil) block. Otherwise, get the count label by tag.
if ( cell == nil ) {
cell = ...
count = ...
...
count.tag = 'coun';
[cell.contentView addSubview:count];
[count release];
} else {
count = (UILabel *)[cell viewWithTag:'coun'];
}
[count setText:[NSString stringWithFormat:#"%i",[[trip.rides allObjects] count]]];
Check to see if the tableview/cell is set to clear its context before drawing. I noticed I had similar issues with text on the cell.
I've seen some strange issues wherein it looks like Core Animation based properties are accumulative even though they shouldn't be. Your problem here might be caused by some kind of accumulative creep from changing the value of the corner radius repeatedly every time the cell is returned.
I would suggest testing if the corner radius already equals 10 before setting it again. (Although I would expect that to show up more with scrolling up and down than in reloading the view.)
Another possible problem would be that some subview is migrating causing a visual artifact.
Edit:
Instead of adding the label to the cell itself. Try adding it as a subview of the cell's content view.