Autolayout: origin and size should change according to width and height factor

落花浮王杯 提交于 2019-11-28 09:55:20

As pre your question you can set this constraints to your UIButton.


You are not required to change the constraint which you have set for height and width of UIButton.


1.) You need to set horizontal space to Button.Leading and Superview.Trailing.

Set constant=0, Priority=1000 and Multiplier=100:320 as I've set in below image.


2.) You need to set horizontal space to Button.Top and Superview.Bottom.

Set constant=0, Priority=1000 and Multiplier=100:568 as I've set in below image.


Result


Hope this solves your problem.

Use the multiplier of the constraints. So, set up a constraint that the button's width equals the top view's width with a multiplier of 100:320 (you can use this ratio form to express the multiplier). Set the constraint's constant to 0. Do the same for button's height proportional to top view's height (ratio 100:568). For the button's position, constrain the button's leading to the top view's width with a ratio of 100:320 and the button's top to the top view's height with a ratio of 100:568.

If you want to do this entirely in your storyboard (or XIB), you need to use a spacer view.

First, put a spacer view in the upper left corner of the root view. Constrain its top and left edges to be distance zero from the superview. Constrain its width to be 100:320 to its superview width (and make sure the first item of the constraint is the spacer). Constrain its height to be 100:568 to its superview height. These width and height constraints will control the position of the button.

Now constrain the top edge of the button to the bottom edge of the spacer, and constrain the left edge of the button to the right edge of the spacer. Create the proportional width and height constraints between the button and the superview.

Set the spacer view to hidden. Hidden views aren't visible and don't receive touches, but still participate in layout.

…If you want to do it in code, just use the autoresizing mask and set translatesAutoresizingMaskIntoConstraints to YES.

For height and width, create an "aspect ratio" constraint in Interface Builder linking the button to the superview. There is no property for aspect ratio; it will use the values at the time it was created to set the multiplier (If iPhone <= 5 width and linking superview to button widths, it will be 320:100) . Add a second constraint for aspect ratio linking the button height to superview height (if you didn't want the height to stretch with the iPhone 5, you could link the buttons aspect ratio to itself.).

For origin, I don't think there's a way to link origin of views and size of views. To set origin to an arbitrary height or width based on size of the screen, you do need to create a spacer view. Inelegant, but necessary. Add the view and set it hidden (and name it in the object outline to the left, which when working with autolayout in IB you probably want to do with everything to make the constraints readable, but definitely here so you can find it again easily). Set create constraints to zero linking it to the button and the top layout guide, and zero to the superview.leading and button leading.

To adjust the spacing you can create aspect ratio constraints, to both the superview width and to the superview height, or just set it equal to the button width and height.

Try this solution

  1. Set views top alignment to superviews centerY and set the multiplier 84:240
  2. Set views left alignment to superviews center X and set the multiplier 100:160
  3. set proportional width with multiplier 100:320 and proportional height 100:568

Hope this solves your problem

You can possibly do it all in IB using 2 helper views. A Top helper and a Left Helper. The rest is just setting it up so that each height and width is appropriately proportional to the size of the view. I setup an example. Here are a couple of screenshots and different view sizes.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!