Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
TJ Rogers
8,758 PointsImage in UITableView Cell oversized
I'm trying to add an image to my UITableView cell programmatically. I have not created a custom class for the cell, so it's simply using the class UITableViewCell.
I created 2 versions of this image in PhotoShop - an 80x80 pixel version and a 40x40. The image is a letter "D," with transparent background (i.e., no background).
The code U'm using to add the image is pretty straight forward:
cell.imageView.image = [UIImage imageNamed:@"myImage"];
Problem is this. When I run the program, the image appears on the left hand side of the row, as expected. But the lines that demarcate each cell row have disappeared in the region where the image is placed. It appears that the image is overlapping these demarcating lines. My understanding from the blogreader tutorial, is that this should not be happening - by default the image should fit within the cell.
Just for laughs, I experimented with different sized images, both larger and smaller to see if there is any impact, and I get the same result for each image. It's almost as though the image frame is defined slightly larger than the height of the cells, although I have not made any modifications to the frame programmatically.
How can I fix this so that my image is contained within the borders of the cell?
Thanks!
4 Answers
Stone Preston
42,016 Pointsuse an image thats used in the cell imageViews in the blog reader app to verify that its not your image thats causing this.
if its not your image, try setting the frame of the imageView to have your needed width and height
cell.imageView.frame = CGRect(cell.imageView.frame.origin.x, cell.imageView.frame.origin.y, 40,40);
Stone Preston
42,016 Pointsif you havent already try removing your tableViewController in the storyboard and adding a new one and see if the new one works or not.
TJ Rogers
8,758 PointsHey, I just wanted to thank you for your persistence in helping me with this problem.
Ultimately, I ended up creating a custom class and redoing my cell that way. I went this route because I didn't know how to create a custom cell class and decided I had better learn sometime. Cell's looking good now and the image fits within it just fine. Still have no idea what's up with the storyboard's prototype cell though. Weird.
Thanks again!
Stone Preston
42,016 Pointsno problem.
TJ Rogers
8,758 PointsThanks for your reply. I tried using the Treehouse image from the tutorial and got the same result. Also tried your solution to set the frame, without success (although I'm assuming you meant "CGRectMake" instead of "CGRect", as the latter did not auto-populate).
I read a few posts on stackoverflow which say - if I understand correctly - that imageview properties cannot be modified if the cell's class is set to UITableViewCell, which mine currently is. Apparently if you want to modify imageview properties, you need to create a custom class for the cell, which I'm trying to avoid having to do, but I guess I will if I must. Of course, I may have misunderstood, and could be completely wrong about that :)
Stone Preston
42,016 Pointsare you using a storyboard? if you are using a storyboard with a tableViewController you shouldnt have to mess with the cells class at all.
Stone Preston
42,016 Pointsanother thing, if you are using storyboards, you can customize the prototype cell and then access the views and controls you added using tag properties which can be set in the storyboard.
So you drag your own imageView onto the prototype cell, set its tag, then access that imageView in cellForRowAtIndexPath using
UIImageView *imageView = (UIImageView *)[cell viewWithTag:101];
Then you could set the image property using that object
TJ Rogers
8,758 PointsYeah, I'm using the storyboard. It defaults the cell class to UITableViewCell.
Stone Preston
42,016 Pointssee my comment above about adding your own image view to the prototype cell instead of using cell.imageView. I think this will work for you. You can position it where you want and the size you need in the storyboard
TJ Rogers
8,758 Pointshmmm... interesting alternative, but not sure that will work. I simplified the description of my program for the sake of brevity. The problem with that is I actually have several different images which are conditionally assigned to the row based upon the selection of a previous table. I'm pretty sure that needs to be done programmatically - can't be done with the storyboard, right?
Stone Preston
42,016 Pointsyou can set the image of the imageView programatically. All you do in storyboard is set the size and position of the imageView
UIImageView *imageView = (UIImageView *)[cell viewWithTag:101];
imageView.image = whatever image you need to load
Stone Preston
42,016 Pointsstill though. something is up with your prototype cell or something. If you are just using default stuff and setting the image with cell.imageView.image it should work just as it did in the blog reader app.