UITableViewCell imageView margins...

Discussion in 'iOS Programming' started by Aquis, Sep 8, 2009.

  1. Aquis macrumors member

    Joined:
    Aug 7, 2007
    Location:
    Staffordshire, UK
    #1
    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:

    [​IMG]

    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!
     
  2. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #2
    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.
     
  3. North Bronson macrumors 6502

    Joined:
    Oct 31, 2007
    Location:
    San José
    #3
    Well, that screenshot is from the Elements sample. Did you check the source code?
     
  4. Aquis thread starter macrumors member

    Joined:
    Aug 7, 2007
    Location:
    Staffordshire, UK
    #4
    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!
     
  5. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #5
    Actually that screenshot must be from a modified version of The Elements. The sample app uses a plain and not grouped table style:
     

    Attached Files:

  6. Aquis thread starter macrumors member

    Joined:
    Aug 7, 2007
    Location:
    Staffordshire, UK
    #6
    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.
     
  7. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #7
    Yeah, so that's doesn't help you, unfortunately. :D

    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.
     
  8. North Bronson macrumors 6502

    Joined:
    Oct 31, 2007
    Location:
    San José
    #8
    I'm just curious: why are you having an aversion to using a custom cell for this project?
     
  9. Aquis thread starter macrumors member

    Joined:
    Aug 7, 2007
    Location:
    Staffordshire, UK
    #9
    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.
     
  10. patshi macrumors newbie

    Joined:
    Jul 11, 2009
    #10
    I think u can try increasing the height of cell ,that might help u.As u can see in the screen shot below
     

    Attached Files:

  11. Aquis thread starter macrumors member

    Joined:
    Aug 7, 2007
    Location:
    Staffordshire, UK
    #11
    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!
     
  12. michaeltyson macrumors newbie

    Joined:
    Mar 15, 2010
    #12
    Or, you could round the corners of the image view:

    Code:
    cell.imageView.layer.masksToBounds = YES;
    cell.imageView.layer.cornerRadius = 10.0;
    I wrote a blog entry about it earlier today.
     

Share This Page