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

Here is a scenario what I needed.

I have put a UIButton on IB (size iPhone4 inch) whose initial frame on IB is x:100,y:100,w:100,h:100. I want the origins and height should change according to device size. for example the width and height of iPhone6 is 375X667, hence the width factor (375/320=1.1718) and height factor (667/568=1.1742). In this scene I want to change my buttons origin X and width with multiply by width factor (1.1718) and origin Y and height with multiply by height factor (1.1782). In this case my button should be shown on x:100X1.1718, y:100X1.1742, w:100X1.1718, h:100X1.1742 .

  • How to set aspect ratio constraint programmatically in ios
  • Where to update Autolayout constraints when size changes?
  • Getting a “This application is modifying the autolayout engine from a background thread” error?
  • How can I trigger to update all the autolayout constrains?
  • iOS 7 TableView in a ViewController and NavigationBar blurred effect
  • AutoLayout to keep view sizes proportional
  • same thing is needed for iPhone6+.

    enter image description here

    I can easily achieve this by setting This autoresizing masks. How can I achieve the same by using autolayout? What step should I follow, what constraints should I apply?

    My previous question on this

    I am attaching some screenshots what i needed by using Autolayout (Achieved with autoresizing mask shown in above image).

    I am attaching some screenshots what i needed by using autoresizing.

    enter image description here

    enter image description here

    enter image description here

    My Try:-

    Step1:- Take a button of size 100X100 on IB. set its X=100 and y=100.
    enter image description here
    Step2:- applied this constraints.
    enter image description here
    enter image description here
    enter image description here
    enter image description here
    enter image description here

    6 Solutions Collect From Internet About “Autolayout: origin and size should change according to width and height factor”

    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.

    enter image description here


    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.

    enter image description here


    Result


    enter image description here

    enter image description here

    enter image description here

    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

    Image reflecting above propertyalign left to superview centerX

    Align top to superview centerY

    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.

    enter image description here
    enter image description here