2

I am trying to position an element that has an equal distance from the top layout guide and the bottom layout guide. Is there a way to do this through the interface builder or programmatically?

One solution I can think of is to just make another view (with explicit constraints to the top/bottom layout guide) embedding that element, then centering the element within that view, but I was wondering if there was a way to do this through autolayout.

user3587412
  • 1,053
  • 1
  • 12
  • 13
  • You want to position the element in such a way so it has equal distance from the top and from the bottom? Just use auto layout. Select the view and pin it from the top and the bottom by some equal numbers – Daniel Isaac Jun 25 '17 at 01:50
  • @DanielIsaac Thanks for the reply. Pinning them with arbitrary equal numbers doesn't seem to make it responsive for different screen sizes though--are there any steps that I am missing? – user3587412 Jun 25 '17 at 02:06
  • Where exactly do you want to place the element ? Assuming you want to do it at the center, do the following 1. Select the image and check in the smallest iPhone size, a size that fits. Use auto layout and fix it to that width and height 2. Select the view and choose options center horizontally and vertically in container 3. Pin the view by equal amounts from top and bottom – Daniel Isaac Jun 25 '17 at 02:16

2 Answers2

2

Add another UIView with constraints with top and bottom layout guide. Then add your view as a subview and align vertically and horizontally.

enter image description here

enter image description here

Bilal
  • 18,478
  • 8
  • 57
  • 72
1

Set constraints in this way. Layout guides tells you the vertical beginning and ending of your view controller. So all you need to do is to set the height and width of your view and then put it on horizontal and vertical center. enter image description here

Fangming
  • 24,551
  • 6
  • 100
  • 90
  • Thanks, but centering it vertically does not seem to make it respond to bottom layout guide changes. However it does work when I make another view embedding my element, then centering my element within, as mentioned in my question. – user3587412 Jun 25 '17 at 02:08
  • @user3587412 - this seems (to me) like the correct answer. I'm confused, and I think most auto layout "gurus" too. Most times this means you question is a bit vague. Can you give a specific *runtime* example - I prefer code, but I'm sure IB will work for us - of what behavior you need? At the very least, could you **define** how a bottom layout guide *changes*? Across devices, orientations, or maybe views? Sure a tab control "changes" things, but centering against the Y axis is simple! (Both you and I know this, obviously.) So what's the issue? –  Jun 25 '17 at 03:18
  • @dfd Sorry, by bottom layout guide changes, I meant the length of the bottom layout guide changing programmatically. For example, I may insert a bottom bar just above the tab bar and and change the length of the bottom layout guide to make corresponding UI changes. I essentially ended up doing what Bilal did below but I was wondering if there was a way to bypass adding another UIView. – user3587412 Jun 25 '17 at 11:18