iOS Autolayout have label sit on top of an image

Question

I am attempting to implement a UIPageController so my users can swipe left and right on a gallery. The UIImageView will take up the entire background, while the label will sit ON TOP OF as in stacked. Here is my attempt in the interface builder:

Size inspector for the UIImageView because of comment below:

But I get lots of errors in the interface builder like this:

2015-09-18 22:19:33.964 ParksonUI[10525:453297] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7aec77f0 V:[_UILayoutGuide:0x7aec7330]-(449)-[UILabel:0x7aec6ca0'Over 200 Tips and Tricks']>",
    "<NSLayoutConstraint:0x7aec78b0 V:[UILabel:0x7aec6ca0'Over 200 Tips and Tricks']-(20)-[_UILayoutGuide:0x7aec7440]>",
    "<_UILayoutSupportConstraint:0x7aec5ee0 V:[_UILayoutGuide:0x7aec7330(64)]>",
    "<_UILayoutSupportConstraint:0x7aec6690 V:|-(0)-[_UILayoutGuide:0x7aec7330]   (Names: '|':UIView:0x7aec7270 )>",
    "<_UILayoutSupportConstraint:0x7aec6540 V:[_UILayoutGuide:0x7aec7440(0)]>",
    "<_UILayoutSupportConstraint:0x7aec7220 _UILayoutGuide:0x7aec7440.bottom == UIView:0x7aec7270.bottom>",
    "<NSLayoutConstraint:0x7afea660 'UIView-Encapsulated-Layout-Height' V:[UIView:0x7aec7270(519)]>"
)

I think the label is being pushed below the image perhaps?

Please attach screenshots of your [size inspector](http://cdn1.raywenderlich.com/wp-content/uploads/2014/09/image13-225x320.png) for label as well as image. — Nishant, Sep 18 '15 at 14:39
`UIImageView` constraints look fine. What about the `UILabel` that u want above it? — Nishant, Sep 18 '15 at 14:51
@Nishant I want the label to sit on TOP OF the label. Not above it. Or below. On top. As in z-index of label > uiimageview — user1416564, Sep 18 '15 at 14:55

score 1 · Accepted Answer · answered Sep 18 '15 at 18:40

First of all, be sure to have imageView before the label in document outline as some fellows have mentioned. After that, adjust the imageView to all borders of the main view and try the following constraints:

Bottom Space to: Superview
Align Trailing to: Superview
Align Leading to: Superview
Align Top to: Superview

And these to the label:

Bottom Space to Bottom Layout: DESIRED DISTANCE
Align Leading to Superview: DESIRED DISTANCE
Width: DESIRED WITDH
Height: DESIRED HEIGHT

Hope it works.

score 0 · Answer 2 · answered Sep 18 '15 at 14:53

0

You have constraint to top and other to bottom on label. If you remove the top constraint the warning disappear. And the result will be correct. You can add width and height constraints to label instead top constraint. I hope help you.

answered Sep 18 '15 at 14:53

Cristiano Alves

233
1
13

I want the label to sit on TOP OF the label. Not above it. Or below. On top. As in z-index of label > uiimageview – user1416564 Sep 18 '15 at 14:56
When you run, you see only the imageView? In document outline you have the the imageView before the label? – Cristiano Alves Sep 18 '15 at 15:05
I do see the label and the imageView is before the label but if I remove some constraints the label moves around between switching views. If I setup the constraints then I get the warning and it moves off the page. – user1416564 Sep 18 '15 at 15:08
I download de code of this tutorial [link](http://appcoda.com/uipageviewcontroller-storyboard-tutorial) And I adapted the code and I create a label in viewController and this label is above the pageView. In viewController.m I change this in viewDidLoad: `UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 150, 50)]; label.text = @"Like this?"; [self.view addSubview:_pageViewController.view]; //this line already existed [self.view addSubview:label]; ` This is what you want to do? I hope this help you. – Cristiano Alves Sep 18 '15 at 15:48
Yes. This will work. However, this is creating the UILabel programmatically. How can I achieve the same effect through interface builder? – user1416564 Sep 18 '15 at 15:50
Yes, In the example code You can add a label to the viewController (is the initial viewController) in interface builder and in the end of viewDidLoad add `[self.view bringSubviewToFront:self.myLabel ];` for the label stay on top. – Cristiano Alves Sep 18 '15 at 16:00
Ah the issue is, you aren't adding the label to the `PageContentViewController`. You are adding it to `ViewController`. The difference is, the label actually should belong to `PageContentViewController`. Doing it your way makes it so the label doesn't move between page flips. – user1416564 Sep 18 '15 at 16:13
If the label is in PageContentViewController I think the label will always move. But in ViewController you can change the text [you can know the current view controller] (http://stackoverflow.com/questions/8400870/uipageviewcontroller-return-the-current-visible-view) or you can create a delegate for change text of the label. – Cristiano Alves Sep 18 '15 at 16:47

iOS Autolayout have label sit on top of an image

2 Answers2