如何创建圆形和三角形按钮

Question

下面我附上了我目前用于在 Swift 2、Xcode 7 中创建蓝色按钮的代码

我想知道是否有办法将按钮创建为三角形和圆形。

    let btn = UIButton(type: UIButtonType.System) as UIButton        
    btn.backgroundColor = UIColor.blueColor()
    btn.setTitle("CALL TPT AGENT", forState: UIControlState.Normal)
    btn.frame = CGRectMake(100, 100, 200, 100)
    btn.addTarget(self, action: "clickMe:", forControlEvents: UIControlEvents.TouchUpInside)
    self.view.addSubview(btn)

任何帮助将不胜感激;)

Answer 1

我总是通过设置btn.layer.cornerRadius = btn.frame.height / 2 来制作圆形按钮，这样无论按钮多高，按钮末端总是圆形的。如果你想要一个圆圈，请将宽度和高度设置为相同的值。

Answer 2

为什么不创建三角形和圆形图像（使用图像文件或动态）然后相应地设置按钮图像：

enum Shape {
    case Triangle, Circle
}

class ShapeButton : UIButton
{
    var shapeColor:UIColor!
    var buttonShape:Shape!
}

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    let button1  = UIButton(type:  .custom)
    button1.frame = CGRect(x:100, y:50, width:50, height:50)
    if let image = UIImage(named:"circle.png") {
        button1.setImage(image, for: .normal)
    }
    self.view.addSubview(button1)

    let button2  = ShapeButton(type:  .custom)
    button2.shapeColor = UIColor.red
    button2.buttonShape = Shape.Triangle
    button2.frame = CGRect(x:50, y:50, width:50, height:50)
    if let image = drawCustomImage(size:button2.frame.size,imageShape: button2.buttonShape,color:button2.shapeColor) {
        button2.setImage(image, for: .normal)
    }
    self.view.addSubview(button2)

    let button3  = ShapeButton(type:  .custom)
    button3.buttonShape = Shape.Circle
    button3.shapeColor = UIColor.green
    button3.frame = CGRect(x:150, y:50, width:50, height:50)
    if let image = drawCustomImage(size:button3.frame.size,imageShape: button3.buttonShape,color:button3.shapeColor) {
        button3.setImage(image, for: .normal)
    }
    self.view.addSubview(button3)

}

func drawCustomImage(size: CGSize,imageShape:Shape,color:UIColor) -> UIImage? {
    // Setup our context
    let bounds = CGRect(origin: CGPoint.zero, size: size)
    let opaque = false
    let scale: CGFloat = 0
    UIGraphicsBeginImageContextWithOptions(size, opaque, scale)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }

    // Setup complete, do drawing here
    context.setStrokeColor(color.cgColor) //UIColor.red.cgColor
    context.setLineWidth(1)

    // Would draw a border around the rectangle
    // context.stroke(bounds)

    context.beginPath()
    if imageShape == Shape.Triangle {
        context.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        context.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        context.addLine(to: CGPoint(x: bounds.maxX/2, y: bounds.minY))
        context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
    } else {
        context.addEllipse(in: bounds)
    }
    context.closePath()

    context.setFillColor(color.cgColor)
    context.fillPath()

    // Drawing complete, retrieve the finished image and cleanup
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

}

Answer 3

对于圆形按钮，在您的viewDidLoad():

yourButton.layer.cornerRadius = 90

对于三角形按钮，这可能会有所帮助：Swiftiotutorials - Nice Triangle View Border

Answer 4

要画一个三角形，这里是代码

let trianglePath = UIBezierPath()
let triangleLayer = CAShapeLayer()
//change the CGPoint values to get the triangle of the shape you want
trianglePath.move(to: CGPoint(x: 0, y: 0))
trianglePath.addLine(to: CGPoint(x: 100, y: 50))
trianglePath.addLine(to: CGPoint(x: 0, y: 100))
trianglePath.addLine(to: CGPoint(x: 0, y: 0))

triangleLayer.path = trianglePath.cgPath
triangleLayer.fillColor = UIColor.black.cgColor

btn.layer.addSublayer(triangleLayer)