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

Question

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:

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

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:

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...

Answer 1

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):

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

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.

Answer 2

Your constraints are okay, this seems to be a bug in SDWebImage. While the image you want is downloading, the placeholder is displayed correctly (labels are visible). However, once the image is downloaded something strange happens while replacing the placeholder with your image and your layout goes bad. If you call

[_imageView setImageWithURL:[NSURL URLWithString:kAvatar];

instead of

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

it's doing what it's supposed to.

Update: You need to call

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

inside viewDidAppear for constraints to take effect. So this might not be SDWebImageBug after all :)

Answer 3

1- i think your problem is that your using an simulator with an 3.5 inch screen , try using an 4 inch screen or an ipad simulator if you want.

2-the reason i think they disappear is that there is no room for them, try to make the SDWebImage smaller .

3-also in your storyboard if you click on the label itself and go to the first tab (file inspector)you can see an option that says use AutoLayuot see if you have that checked or not since it might be the problem.

i hope this helps you.