简体   繁体   中英

How to align two buttons equidistance from the centre of the UIView

I am working with auto layout . Facing on interesting issue . Fortunately overcame from it for the time but need to know the best way to solve it .

在此输入图像描述

Problem : As showing in the above figure I have couple of buttons . Both needed to place at equidistance width from the centre of the UIView (bold vertical line is centre of the view). Also I have to apply to constraint in such a way that distance between the button will be automatically adjusted. for eg the distance should be 25% of the device width. If my device width is 320 the distance between the button is 80 pixels and so on.

Solution(I have tried) : For above problem I tried on solution . As shown in the figure I have added on dummy view in the UIView the width of the dummy view is equal to spacing between two buttons. And then I have applied the constraints to the dummy view. such as : 1. Horizontal centre of the UIView 2.Width equals to the UIView width with 0.25 as a multiplier

Question: above solution is working perfectly for me . But if in future if my view will have too many complex elements then adding dummy view might not be the good idea . So, Is there any other clean way to do this ?

I faced the same problem. I resolved using the idea i got from rdelmar's answer.

This is what I did.

For left button:

  1. Added the constraint to 'Center - Horizontally in container'
  2. Then changed the multiplier to 0.5 instead of 1 for that constraint.

For right button:

  1. Added the constraint to 'Center - Horizontally in container'
  2. Then changed the multiplier to 1.5 instead of 1 for that constraint.

Let me know if it worked for you.

You can do this in the storyboard (or xib) by using constraints to the right edge of the screen -- the value of the right edge is the same as the width of the screen, so you can use that for calculations. For the left button you want its trailing edge to equal the superview's right edge times 0.375 (0.5 minus .125 which is half of your 25% requirement). the right button would have its leading edge equal to right edge of superview times 0.625 (.5 + .125).

The constraints look like this,

在此输入图像描述

在此输入图像描述

尝试将btn2的前缘和btn1的后缘与视图集的中心y对齐,并将乘数200:160和120:160分别调整为中心y为第二项

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM