【问题标题】:Is there any way to layout buttons in circular arrangement?有没有办法以圆形排列布局按钮?
【发布时间】:2020-08-06 07:32:14
【问题描述】:

我试图在角落里做一个圆形按钮,当你按下它时,它周围会弹出 3 个按钮。当您按住别针时,类似于 Pinterest 的菜单。我已经使用UIBezierPath 进行了查找,但这不是我想要的。我知道有 GitHub 库,但我正在尝试从头开始。

这是我尝试从头开始制作的示例:

我想出了如何使用圆角半径制作圆形按钮。而且我有一个特定的功能,它将为按钮设置动画,但我不知道如何正确地将它们放在一个圆圈中。我使用了约束,但这使得方形布局比圆形布局更多。

【问题讨论】:

  • 谢谢你,罗伯。我想出了如何使用圆角半径制作圆形按钮。而且我有一个特定的功能,它将为按钮设置动画,但我不知道如何正确地将它们放在一个圆圈中。我使用了约束,但这使得方形布局比圆形布局更多。
  • 好吧,你已经完成了 90% 的任务!因此,只需一点三角函数即可确定新按钮的中心与现有按钮的关系。如果 r 是到现有圆的 x,y 的距离,并且圆 i 与 θᵢ 夹角,则 xᵢ = x + r * cos(θᵢ)和 yᵢ = y + r * sin(θᵢ)。 (在这种安排中,角度从 3 点钟开始以弧度测量,顺时针方向进行,或者逆时针方向变为​​负值。)
  • 这很有意义!谢谢!现在我唯一的问题是以编程方式定位所有按钮。

标签: ios swift menu uibutton nslayoutconstraint


【解决方案1】:

你说:

但我不知道如何正确地将它们围成一圈。

只需一点三角函数即可确定新按钮的中心与现有按钮的关系。如果r是到现有圆的中心x的距离,y,圆i在一个θᵢ 的角度,然后 xᵢ = x + r * cos(θᵢ)yᵢ = y + r * sin(θᵢ)。 (在这种安排中,角度从 3 点钟开始以弧度测量,顺时针方向进行,或者逆时针方向进行。)

例如,如果使用约束:

let r: CGFloat = 150               // let's say you want center of the circles to be 150 points away from center of existing button
let range = -CGFloat.pi / 2 ... 0  // and we want the angles to range from -π/2 to 0
let howMany = 5                    // and you want five of them

for i in 0 ..< howMany {
    let angle = range.lowerBound + CGFloat(i) / CGFloat(howMany - 1) * (range.upperBound - range.lowerBound)
    let offset = CGPoint(x: r * cos(angle), y: r * sin(angle))
    let button = ...
    button.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(button)
    NSLayoutConstraint.activate([
        button.centerXAnchor.constraint(equalTo: mainButton.centerXAnchor, constant: offset.x),
        button.centerYAnchor.constraint(equalTo: mainButton.centerYAnchor, constant: offset.y),
        button.widthAnchor.constraint(equalToConstant: 40),
        button.heightAnchor.constraint(equalToConstant: 40)
    ])
}

【讨论】:

  • 谢谢!我能够以我想要的效果为按钮设置动画。回想起来,这一切都很简单。
猜你喜欢
  • 1970-01-01
  • 2011-10-13
  • 1970-01-01
  • 1970-01-01
  • 2013-08-25
  • 2012-03-09
  • 1970-01-01
  • 2020-02-01
  • 2016-02-11
相关资源
最近更新 更多