如何在 Swift 中以编程方式旋转一组按钮？

Posted 2023-02-23

【中文标题】如何在 Swift 中以编程方式旋转一组按钮？

【英文标题】：how do I rotate a group of buttons programmatically in Swift?

【发布时间】：2016-11-12 02:19:44

【问题描述】：

我正在尝试以编程方式将编号按钮排列成一个圆圈。 NSLayoutConstraint 锚定视图，而 UIView 的子类创建按钮圈。框架围绕中心旋转，但按钮旋转不一致。除了一次旋转外，文本方向都是相同的。

  for example

我用于排列按钮的 Swift 代码改进了 an earlier effort in Objective C。我还跟进了一些有用的建议来旋转屏幕中心的视图，包括this one。

如果有人能告诉我如何改进我的代码，使 UI 对于每个屏幕尺寸和方向都保持一致，我将不胜感激。

这是视图控制器

import UIKit

class ViewController: UIViewController 

var circle: CircleView?

override func viewDidLoad() 
    super.viewDidLoad()

    let circle = CircleView()
    circle.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(circle)

    let horizontalConstraint    = circle.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    let verticalConstraint      = circle.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    NSLayoutConstraint.activate([horizontalConstraint, verticalConstraint])
    

...和UIView 的子类

import UIKit

class CircleView: UIView 

// MARK: Initialization

let points: Int             = 10    // 80 25 16 10 5
let dotSize: CGFloat        = 60    // 12 35 50 60 100
let radius: CGFloat         = 48    // 72 70 64 48 45

var arcPoint                = CGFloat(M_PI * -0.5)  // clockwise from 12+ (not 3+)!

required init?(coder aDecoder: NSCoder) 
    fatalError("init(coder:) has not been implemented")


override init(frame: CGRect) 
    super.init(frame: frame)

    drawUberCircle()
    drawBoundaryCircles()

...倒数第二个函数绘制彩色圆形背景

    func drawUberCircle() 

    // Create a CAShapeLayer

    let shapeLayer = CAShapeLayer()

    // give Bezier path layer properties
    shapeLayer.path = createBezierPath().cgPath

    shapeLayer.strokeColor      = UIColor.cyan.cgColor
    shapeLayer.fillColor        = UIColor.cyan.cgColor
    shapeLayer.lineWidth        = 1.0        
    self.layer.addSublayer(shapeLayer)

    func createBezierPath() -> UIBezierPath 

    let path  = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0),
                                radius: radius * 2,
                            startAngle: CGFloat(M_PI * -0.5),
                              endAngle: CGFloat(M_PI * 1.5),
                             clockwise: true)
    return path

...而最后一个函数在圆弧中绘制按钮

    func drawBoundaryCircles() 

    for index in 1...points 
    let point: CGPoint  = makeBoundaryPoint()
    drawButton(point: point, index: index)
    



func makeBoundaryPoint() -> (CGPoint) 
    arcPoint += arcAngle()
    print(arcPoint)
    let point   = CGPoint(x: 0 + (radius * 2 * cos(arcPoint)), y: 0 + (radius * 2 * sin(arcPoint)))
    return (point)



func arcAngle() -> CGFloat 
    return CGFloat(2.0 * M_PI) / CGFloat(points)



func drawButton(point: CGPoint, index: Int) 
     let myButton = UIButton(type: .custom) as UIButton
     myButton.frame              = CGRect(x: point.x - (dotSize/2), y: point.y - (dotSize/2), width: dotSize, height: dotSize)
     myButton.backgroundColor    = UIColor.white
     myButton.layer.cornerRadius = dotSize / 2
     myButton.layer.borderWidth  = 1
     myButton.layer.borderColor  = UIColor.black.cgColor
     myButton.clipsToBounds      = true
     myButton.titleLabel!.font   = UIFont(name: "HelveticaNeue-Thin", size: dotSize/2)
     myButton.setTitleColor(UIColor.red, for: .normal)
     myButton.setTitle(String(index), for: .normal)
     myButton.tag                = index;
     myButton.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
     addSubview(myButton)



 func buttonAction(myButton: UIButton) 
    let sender:UIButton = myButton
    print("Button \(sender.tag) was tapped")
    

编辑

旋转 4（如上所示）在 iPhone 被倒置时出现，并且由于接受的答案中解释的原因无关紧要（见下文）。如果代码在实际设备而不是模拟器上运行，这将变得更加明显。

带有工作按钮的解决方案

有关按钮保持在中心位置并且工作的解决方案，请参阅this

【参考方案1】：

对于 iphone，这种行为是正确的。您通常不支持颠倒旋转，因为如果用户必须接听电话，它会让人感到困惑；它在苹果 HIG 指南中。在设备方向下的常规选项卡上查看您的项目设置。默认情况下，颠倒是禁用的。如果你想支持颠倒旋转，请勾选它。

【讨论】：

唉，即使我选中了 Upside Down 框，这种行为仍然存在。

乔希，你说的一切都很有道理，所以我不得不接受它作为答案。行动目标不起作用，但这将是一个单独的帖子。谢谢

有关操作目标问题的更多信息，请参阅单独的帖子 [***.com/questions/40600974/…

关于行动目标的更多信息，请参阅新帖子 [***.com/questions/40650951/…