2

I'm trying to create something that I thought would be easy using Auto Layout for iOS. I've been on this for days, bought a book, and tried various keyword search combinations. Anyone done this before and could point me in the right direction?

I want 3 UILabels, arranged in columns, with the middle one (which has more content) to be variable width depending on orientation of iPad.

I can get this to work, but once the iPad rotates from landscape to portrait (and therefore reduces the width available to the middle label) the middle label content gets cut off. i.e. the middle label height doesn't resize.

This is what I want to achieve: This is what I want to achieve

Once you rotate to portrait: Once you rotate to portrait

Here are my constraints and View hierarchy: Here are my constraints and View hierarchy

If I give the middle UILabel a height constraint of 'less than or equal to' 250 (the height it needs to show all content in narrow portait mode), once the iPad orientates back to landscape the label content expands to fit the new width but also no longer aligns nicely with the tops of the other labels on either side.

Wrong vertical alignment wrong alignment

Here's my constraints on the middle label constraints on middle label

(that Height equal 250 has a priority of 1, as it was a generated constraint that I cant get rid of.)

I've tried so many combinations of content hugging and compression resistance, I was sure that that would have been the answer, i.e. requiring the UILabel frame to hug the content. I obviously don't understand that as well as I should.

Cuespeak
  • 149
  • 1
  • 13

2 Answers2

1

Ok, finally figured it out after finding this stackoverflow question: Link to answer
It's now working as I would have hoped

All I had to do was set the line breaks to 'Word Wrap' and update the preferred width on device orientation, like this

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {
    if (UIDeviceOrientationIsLandscape(interfaceOrientation)) {
        self.middleLabel.preferredMaxLayoutWidth = 600;
    } else {
        self.middleLabel.preferredMaxLayoutWidth = 314;
    }
}

So, to sum up, it was a combination of increasing content hugging, reducing the priority of the height constraint and updating the preferredMaxLayoutWidth on device orientation. Still, putting hardcoded values into the layout code feels wrong. Can think of a better way?

Community
  • 1
  • 1
Cuespeak
  • 149
  • 1
  • 13
0

Change gray box size programmatically ,on interface builder, set this properties for

left text field https://dl.dropboxusercontent.com/u/1172778/left.png

middle text field https://dl.dropboxusercontent.com/u/1172778/middle.png

Texts will fill a container (gray box in your image).

Sorry for my bad english.

Elto
  • 420
  • 3
  • 11
  • I'm using Auto Layout, not the old springs and struts, or are you saying I should turn off Auto Layout for that one UILabel? – Cuespeak Jul 18 '13 at 16:35
  • if you are using xib, disable. Using storyboard you will disable for all screens . – Elto Jul 18 '13 at 20:27
  • Thanks, but I moved to Auto Layout to help with laying out the elements in the main content view. I'd really like to know if this is possible using Auto Layout – Cuespeak Jul 19 '13 at 08:50