如何在Swift中以编程方式旋转一组按钮？ [英] how do I rotate a group of buttons programmatically in Swift?

问题描述

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

I am trying to arrange numbered buttons programmatically in a circle. NSLayoutConstraint anchors the view while a subClass of UIView creates the circle of buttons. The frame rotates about the centre but buttons rotate inconsistently. Text orientation is the same on all but one rotation.

  for example

我的用于排列按钮的Swift代码在目标C中的早期工作。我还提供了一些有用的建议来轮换有关屏幕中心的视图，包括这一个。

My Swift code for arranging buttons improves on an earlier effort in Objective C. I have also followed up a few helpful suggestions for rotating a view about the screen centre including this one.

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

I'd be grateful if anyone can show me how to improve my code so the UI is consistent for every screen size and orientation.

这是 Viewcontroller

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的子类

... and the subclass of 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()
}

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

... the second last function draws the coloured circular background

    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
}

...当最后一个函数以圆弧绘制按钮时

... while the last function draws buttons in a circular arc

    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被颠倒时出现上面显示的），并且与接受的答案中解释的原因无关（见下文）。如果代码在实际设备而不是模拟器上运行，这将变得更加明显。

Rotation 4 (shown above) appears when the iPhone is held upside down and is irrelevant for reasons explained in the accepted answer (see below). This becomes more obvious if the code runs on an actual device rather than the simulator.

带工作按钮的解决方案

对于按钮保持打开的解决方案-centre 和工作，请参阅此

For a solution with buttons that remain on-centre and work, refer to this

推荐答案

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

For an iphone, this behavior is correct. You usually do not support rotation for upside down because it makes it confusing if the user has to answer a call; its in the apple HIG guidelines. Look at your project settings on the general tab under device orientation. By default Upside Down is disabled. Check it if you want to support Upside Down rotation.

这篇关于如何在Swift中以编程方式旋转一组按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！