问题描述
我正在尝试在这样的环中绘制圆形按钮.
I am attempting to plot circular buttons in a ring like this.
我有 6 个 UI 按钮,它们的圆角半径均为 360 度,我试图在 Swift 中做的是将它们均匀地绘制在中央按钮/点周围,就像上图一样.每个圆与其邻居等距.实现此功能的最佳方法是什么?我应该创建一条贝塞尔曲线,然后使用数学方法在所述曲线周围绘制按钮,还是您有其他建议?
I have 6 UI buttons which all have a corner-radius of 360 degrees, what I am attempting to do in Swift is plot them equally around a central button/point just like the image above. Each circle is equally spaced from its neighbour. What is the best way of achieving this functionality? Should I create a bezier curve and then use math to plot the buttons around said curve or is there another way which you would suggest?
旁注是我不是在寻找任何类型的径向菜单,不需要动画.我只是想以上面的格式绘制我现有的 UI 按钮.
A side note is that I am not looking for a radial menu of any kind there is no animation required. I am just trying to plot my existing UI Buttons in the format above.
谢谢!
推荐答案
我建议使用 math (trigonometry) 来计算中心按钮的水平和垂直偏移,然后使用布局锚来定位按钮.
I would suggest using math (trigonometry) to compute the horizontal and vertical offsets from the center button and then use layout anchors to position the buttons.
这是一个自包含的例子:
Here is a self contained example:
class ViewController: UIViewController {
func createButton(size: CGFloat) -> UIButton {
let button = UIButton(type: .custom)
button.backgroundColor = .red
button.translatesAutoresizingMaskIntoConstraints = false
button.widthAnchor.constraint(equalToConstant: size).isActive = true
button.heightAnchor.constraint(equalToConstant: size).isActive = true
button.layer.cornerRadius = size / 2
return button
}
func setUpButtons(count: Int, around center: UIView, radius: CGFloat) {
// compute angular separation of each button
let degrees = 360 / CGFloat(count)
for i in 0 ..< count {
let button = createButton(size: 50)
self.view.addSubview(button)
// use trig to compute offsets from center button
let hOffset = radius * cos(CGFloat(i) * degrees * .pi / 180)
let vOffset = radius * sin(CGFloat(i) * degrees * .pi / 180)
// set new button's center relative to the center button's
// center using centerX and centerY anchors and offsets
button.centerXAnchor.constraint(equalTo: center.centerXAnchor, constant: hOffset).isActive = true
button.centerYAnchor.constraint(equalTo: center.centerYAnchor, constant: vOffset).isActive = true
}
}
override func viewDidLoad() {
super.viewDidLoad()
let centerButton = createButton(size: 50)
self.view.addSubview(centerButton)
// use anchors to place center button in the center of the screen
centerButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
centerButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
setUpButtons(count: 6, around: centerButton, radius: 100)
}
}
注意事项:
如果不需要中心按钮,只需在
self.view
周围设置按钮:
setupButtons(count: 6, around: self.view, radius: 100)
或在任意点附近:
let point = CGPoint(x: 180, y: 300)
let centerView = UIView(frame: CGRect(origin: point, size: CGSize.zero))
self.view.addSubview(centerView)
setUpButtons(count: 6, around: centerView, radius: 140)
UIView
作为中心而不是点更灵活,因为您可以动态移动 UIView
并且按钮将跟随.UIView
as the center instead of a point is more flexible because you can dynamically move that UIView
and the buttons will follow.这里是在模拟器中运行:
Here it is running in the simulator:
这篇关于如何围绕环中的中心点绘制圆形按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!