如何在iOS上以横向和纵向方向对齐圆形按钮?

时间:2015-07-01 20:06:14

标签: ios iphone ios8 interface-builder

我想在iOS中以圆形图案(一种五边形形状)布局5个按钮(具有圆形图像)。最终它也可以在iPad上运行,但目前,我只是想让它在iPhone上运行。

到目前为止,我刚刚尝试将它们放入UIView并使用约束来通过IB进行布局。但是,当我将设备旋转到横向时,布局会变得混乱。

这是我在IB中所说的布局类型的图片,理想情况下应该适合iPhone肖像和风景。

IB Layout

如果我确定了高度和宽度,它对iPhone来说显然太大了:

Fixed Height and Width

我想我需要找到一种方法让它将宽高比保持为正方形并与父视图的中间对齐。

如果我使用水平空间和垂直空间约束顶部布局指南,它就像这样:

Horizontal and Vertical Space

我似乎无法以正确的方式解决这个问题。

正确方向的任何想法和指示都非常感激。

非常感谢。

1 个答案:

答案 0 :(得分:2)

您需要更新您的方法,

逻辑:使用参数方程从圆周上获取点(按钮中心),在屏幕旋转时更新约束(采用约束出口进行修改)。

这些公式将给出沿圆周的点(x,y)(按钮的中心/按钮的前导和顶部约束)

 x = cx + r * cos(a)
 y = cy + r * sin(a)

 Where,
 r is the radius, ( in your case half of screen size )
 cx,cy the origin, ( in your case centre of view )
 and a the angle from 0..2PI radians or 0..360 degrees. ( Angle between two buttons 360/5 because there are 5 buttons )

我在我开发的一个控件中使用了这个公式..

https://github.com/AdityaDeshmane/iOSCircularMenu

检查以下文件中的方法- (void)setButtonFrames

https://github.com/AdityaDeshmane/iOSCircularMenu/blob/master/iOSCircularMenu/CustomCircularMenuControlFiles/ADCircularMenuViewController.m