4

I'm trying to have to views overlap as shown in the picture below, but I couldn't figure out how would I go about doing it with auto layout.

enter image description here

I tried doing the bottom view programmatically, and it worked fine except for the button which I had laid out using interface builder.

enter image description here

If it's possible to have views overlap what are the constraints needed, and is there a way to let the button show on top of the view in the bottom without doing programmatically?

Nishant Bhindi
  • 2,242
  • 8
  • 21
Ahmed Al Abdulaal
  • 270
  • 1
  • 3
  • 16

3 Answers3

1

You can do something like this.

make the second view uplift with minus value:

enter image description here

Here is the output. SecondView(green) has been uplifted to -50

enter image description here

elk_cloner
  • 2,049
  • 1
  • 12
  • 13
0

You can do overlapping views using InterfaceBuilder. First create the top view i.e the one with image, give its constraints like top ,trailing,leading and bottom space. Then create the overlapping view. The constraints for the overlapping view can be its trailing space, leading space,bottom space and height. Then add those buttons inside that view.

Aravind A R
  • 2,674
  • 1
  • 15
  • 25
  • What about the image view? I gave I give it equal width and height and center vertically and horizontally in the top view, but the bottom view hides it. – Ahmed Al Abdulaal Jun 08 '17 at 10:18
  • If you give imageView equal width and height then while overlapping the bottom view will definitely hide it. – Aravind A R Jun 08 '17 at 10:21
  • Instead of equal height you may give imageview's top space as 0 and bottom space as the padding that you want between the top and bottom view then the top view will not hide the imageView – Aravind A R Jun 08 '17 at 10:25
0

In the interface builder, using a constraint, hook the top of the bottom view to the bottom of the top view, and then edit the constant in the Size Inspector to move it like you want.

It should look something like this: Example

TawaNicolas
  • 636
  • 1
  • 5
  • 11