Search code examples
iosiphoneobjective-cautolayoutsdwebimage

Autolayout with image view, 2 labels, button - the labels disappear after rotating

In a simple test app for iPhone I am trying to display a user phone in an image view (using SDWebImage through CocoaPods), two labels and a "Play" button - each UI element underneath other as shown in the screenshot:

app screenshot

I am using Autolayout in Xcode 5 and set 20px around each UI element as shown in the screenshot (here fullscreen):

Xcode 5 screenshot

My code in ViewController.m is short and simple:

- (void)viewDidLoad
{
    [super viewDidLoad];

    _firstName.text = @"Alex";
    _city.text      = @"Bochum";

    [_imageView setImageWithURL:[NSURL URLWithString:kAvatar]
               placeholderImage:[UIImage imageNamed:@"Male.png"]];
}

Unfortunately my problem is that after rotation both labels disappear:

landscape screenshot

portrait screenshot

Why does it happen? I've spent a lot of time trying to figure it out, tried changing the "Content Hugging Priority" and "Content Compression Resistance Priority" for various UI elements too...

Solution

  • I've solved my problem by giving lower "Content Hugging Priority" and "Content Compression Resistance Priority" to the image view (set everything to 250, here fullscreen) and higher - to the both labels and button (set them to 750):

    Xcode screenshot

    (Also for the image view I've changed the mode to "Aspect Fill" and enabled "Clip Subviews") and now it works ok:

    portrait screenshot

    landscape screenshot

    Being an iOS programming newbie, I'm sorry if my question has been too simple, but that what seems to have resolved it (moving setImageWithURL:placeholderImage: call to viewDidAppear did not). Also sorry for having my face 5 times at this web page - that image had the problem in the test app, so I didn't bother to search for a neutral one.