iOS UITableViewCell imageView margins...

[Aquis]

Hello,

I have a UITableViewCell with an image in its imageView to the left, but I’m having problems making the image not overlap with the rounded corners of cells. The images I’m using at the moment are 41x41 pixels, and vertically fit in the cell great, but I’d like them more to the centre of the edge of the cell and the start of the text, instead of hugging the cell’s sides. At the moment, it looks like this:

But I’d rather the imageView was shifted to the right by a few pixels. I’ve attempted to modify the frame of the imageView, but it doesn’t look like I have that much access to its internal UIImageView. I realise I could create my own UITableViewCell, but I’d rather use the provided stuff if at all possible.

As seen in “Figure 1-4”, Apple appear to be able to do it.

Is there a way to do what I want to do, or am I meant to decrease the image dimensions to a certain size before it will work?

Thanks!

 

[PhoneyDeveloper]

It seems you've analyzed the problem very well. The provided cell won't do what you want. Either make your images smaller or build your own cell.

 

[North Bronson]

As seen in “Figure 1-4”, Apple appear to be able to do it.

Well, that screenshot is from the Elements sample. Did you check the source code?

 

[Aquis]

Well, that screenshot is from the Elements sample. Did you check the source code?

Oh no I didn’t, good suggestion! I shall now…

Edit: Well, as far as I can see, it appears to be using a completely custom table view cell to render the data, including the label, mainly I guess because it’s not actually an image but a custom view that’s being rendered. Oh well, I guess unless someone says differently, I’ll just shrink the icons for now. Thanks anyway!

 

[dejo]

Well, that screenshot is from the Elements sample.

Actually that screenshot must be from a modified version of The Elements. The sample app uses a plain and not grouped table style:

 

[Aquis]

Actually that screenshot must be from a modified version of The Elements. The sample app uses a plain and not grouped table style:

Yeah, I did notice that, but I changed it to a grouped style anyway. Still looked good; it was padded correctly, but as I say, it was using custom cells.

 

[dejo]

Still looked good; it was padded correctly, but as I say, it was using custom cells.

Yeah, so that's doesn't help you, unfortunately.

So, current plan is: smaller icons for now and then custom table view cells when you get bolder? You can actually lay the custom cells out using IB but you have some minor hoops to jump through to make sure you "hook them up" correctly.

 

[North Bronson]

Edit: Well, as far as I can see, it appears to be using a completely custom table view cell to render the data, including the label, mainly I guess because it’s not actually an image but a custom view that’s being rendered. Oh well, I guess unless someone says differently, I’ll just shrink the icons for now. Thanks anyway!

I'm just curious: why are you having an aversion to using a custom cell for this project?

 

[Aquis]

I'm just curious: why are you having an aversion to using a custom cell for this project?

Well, if I can simply tell it that the image is wrong and to shift it a bit, it’s a lot less hassle than to create a custom cell! I could probably have written a subclass by now, but, I just wanted really to see if there was a proper and easier way to do it.

 

[patshi]

I think u can try increasing the height of cell ,that might help u.As u can see in the screen shot below

 

[Aquis]

Thanks for all your input. As this part of the app is a “major” part with few items, I eventually settled on increasing the height of the cell to 60px, which makes it overall look better and coincidentally fixes the problem with the images by shifting them to the correct position. It seems that the table view expects images to be of a certain size, but if they’re larger, it appears to lock their “right” positions, making them appear off-centre.

Anyway, all fixed now, thanks!

 

[michaeltyson]

Or, you could round the corners of the image view:

cell.imageView.layer.masksToBounds = YES;
cell.imageView.layer.cornerRadius = 10.0;

I wrote a blog entry about it earlier today.