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

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

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

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 2

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

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)

Answer 3

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

yourButton.layer.cornerRadius = 90

对于三角形按钮，这可能会有所帮助： 斯威夫特教程 - 漂亮的三角形视图边框

Answer 4

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