iOS Interface design - unknown cell height

Question

TheUnrealz OP

Created Feb ’16

Replies 1

Boosts 0

Participants 2

I've been designing a custom table cell layout for my app (with auto layout) and I'm facing few problems.

This is how my custom table cell xib:

My table cell XIB

http://i.stack.imgur.com/qblLW.png

What I cant find how to do:

The ImageView: The images in these cells are from remote URLS (with JSON). Their height and width is always different and I don't know them. My goal is to make the width of the image always all over the screen width with few pixels margin from the device's screen (similar to Instagram image width) with the scaled image's height (proportional to the image's width).

Instagram screenshot example

http://i.stack.imgur.com/n0brG.png

Since I have no idea what the height of the image will be, how I can design the app so the label will always below the image with no much spacing? I mean - No matter where the images bottom is, the label will be always 10px under it.
I don't know the label length - so the next cell will have to start as soon as the label text ends. How do I accomplish that?

Hope to get some help with those things, I feel very frustrated about it since I've done this in one line of code in my Anroid version (whoever familiar with this - TopOf anotherid / BottomOfanotherid)

Boost

Answer 1

junkpile OP

Feb ’16

You should be able to just specify leading & trailing constraints for your image view to take care of the width. You may need to set the content mode to something like Aspect Fit. Don't add a height constraint for the image; UIKit should be able to calculate the height based on the image's intrinsic size and the constraint on the width.

Then for the label, just add your vertical spacing constraint of 10 (points, not pixels) from the bottom of the image to the top of the label just like you did in Android.

Making the label handle multiple lines is not quite as easy as it is on Android where it Just Works (tm). On iOS you have to set number of lines = 0, set the line wrap mode (usually word wrap), and deal with preferredMaxLayoutWidth. For some unknown reason UILabel doesn't always automatically lay out to fit its bounds; there's a separate property that determines how wide it will allow the text to get before truncating or wrapping. So I usually use a UILabel subclass that just sets the preferredMaxLayoutWidth to the bounds width in layoutSubviews.

When adding constraints, remember less is more. You want the absolute minimum constraints necessary to give everything an unambiguous size and position in each dimension.

0