ios - Swift 中的圆形渐变按钮

Question

我正在通过以下方式创建圆形按钮:

 func CreateCirclularButton(xpos:CGFloat, ypos:CGFloat, Circlevalue:CGFloat, ParentView:UIView, TagValue:Int){

    let button = UIButton()

    var buttonFrame = EventStripe.frame
    buttonFrame.origin.x = xpos
    buttonFrame.origin.y = ypos
    buttonFrame.size.width = 30
    buttonFrame.size.height = 30

    button.frame = buttonFrame
    button.tag = TagValue

    button.backgroundColor = UIColor.clearColor()
    button.backgroundColor = UIColor.whiteColor()

    button.layer.borderWidth=1
    button.layer.cornerRadius=15.0

    if(Circlevalue<=4){

        button.layer.borderColor = UIColor(red:0/255, green:136/255, blue:43/255, alpha:1.0).CGColor
        button.setTitleColor(UIColor(red:0/255, green:136/255, blue:43/255, alpha:1.0), forState: UIControlState.Normal)

    }else if(Circlevalue>4 && Circlevalue<=7){
        button.layer.borderColor = UIColor(red:243/255, green:144/255, blue:25/255, alpha:1.0).CGColor
        button.setTitleColor(UIColor(red:244/255, green:179/255, blue:100/255, alpha:1.0), forState: UIControlState.Normal)

    }else{
        button.layer.borderColor = UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0).CGColor
        button.setTitleColor(UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0), forState: UIControlState.Normal)
    }        

    let circleval  = Int(Circlevalue)
    button.setTitle("\(circleval)", forState: UIControlState.Normal)

    button.addTarget(self, action: #selector(ViewController.didCircleBtnTouched), forControlEvents: UIControlEvents.TouchUpInside)
    ParentView.addSubview(button)
}

单击按钮时，我按以下方式对单击的按钮应用渐变:

func didCircleBtnTouched(sender:UIButton!){       

    //let color = UIColor(red:134/255, green:16/255, blue:1/255, alpha:1.0)//red
    //let color = UIColor(red:0/255, green:136/255, blue:43/255, alpha:1.0)//green
    //let color = UIColor(red:243/255, green:144/255, blue:25/255, alpha:1.0)//orange

    //For setting Gradient to selected circle -- unable to identify the border color from selected button
    //if any how we can identify the border color


    let color1 = UIColor()
    let color2 = UIColor()


    if(bordercolor == red){
         color1 = UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0)
         color2 = UIColor(red:134/255, green:16/255, blue:1/255, alpha:1.0)
    }
    else if(bordercolor == Orange){
         color1 = UIColor(red:243/255, green:144/255, blue:25/255, alpha:1.0)
         color2 = UIColor(red:200/255, green:110/255, blue:1/255, alpha:1.0)
    }
    else if(bordercolor == red){
         color1 = UIColor(red:37/255, green:200/255, blue:6/255, alpha:1.0)
         color2 = UIColor(red:16/255, green:134/255, blue:1/255, alpha:1.0)
    }
    sender.applyGradient([color1, color2 ], locations: [0.0, 0.90])       
}

这是我用来应用渐变的扩展:

extension UIView {
    func applyGradient(colours: [UIColor]) -> Void {
        self.applyGradient(colours, locations: nil)
    }

    func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> Void     
    {
            let gradient: CAGradientLayer = CAGradientLayer()
            gradient.frame = self.bounds
            gradient.cornerRadius=3.0
            gradient.colors = colours.map { $0.CGColor }
            gradient.locations = locations
            self.layer.insertSublayer(gradient, atIndex: 0)
    }   
}

这样做有两个问题:

1. 无法识别所选按钮的颜色，因此我可以为该按钮应用相应的渐变。
2. 当我对按钮应用渐变时，按钮变成矩形而不是圆形。

理想情况下需要:

现在是这样的:

我该如何解决？

Answer 1

对于第一种情况你可以做

button.layer.cornerRadius=15.0
//this line is what you need
button.clipsToBounds = true

对于第二种情况，您可以子类化 UIButton 并创建枚举的 ivar colorType。

然后根据枚举，您可以检查按钮的颜色是什么。

下面是ViewController的代码示例

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let button = GradientButton.createCircularButton(xPos: 100, yPos: 100, width: 30, height: 30, circleValue: 7)
    button.addTarget(self, action: #selector(didCircleBtnTouched(sender:)), for: .touchUpInside)
    self.view.addSubview(button)
  }


  func didCircleBtnTouched(sender: GradientButton!){
    var color1 = UIColor()
    var color2 = UIColor()

    if(sender.colorType == .red){
      color1 = UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0)
      color2 = UIColor(red:134/255, green:16/255, blue:1/255, alpha:1.0)
    }
    else if(sender.colorType == .green) {
      color1 = UIColor(red:37/255, green:200/255, blue:6/255, alpha:1.0)
      color2 = UIColor(red:16/255, green:134/255, blue:1/255, alpha:1.0)
    }
    else if(sender.colorType == .orange) {
      color1 = UIColor(red:243/255, green:144/255, blue:25/255, alpha:1.0)
      color2 = UIColor(red:200/255, green:110/255, blue:1/255, alpha:1.0)
    }

    sender.setTitleColor(UIColor.white, for: .normal)

    sender.applyGradient(colours: [color1, color2 ], locations: [0.0, 0.90])
  }

}


enum ColorType {
  case red, green, orange
}

class GradientButton: UIButton {
  var colorType: ColorType?



  public class func createCircularButton(xPos: CGFloat, yPos: CGFloat, width: CGFloat, height: CGFloat, circleValue: Int) -> GradientButton {
    let button = GradientButton()

    let buttonFrame = CGRect(x: xPos, y: yPos, width: width, height: height)

    button.frame = buttonFrame

    button.backgroundColor = UIColor.clear
    button.backgroundColor = UIColor.white


    button.layer.borderWidth = 1
    button.layer.cornerRadius = 15.0
    //this helps making it circular not rectangle
    button.clipsToBounds = true


    let red = UIColor(red:134/255, green:16/255, blue:1/255, alpha:1.0)//red
    let green = UIColor(red:0/255, green:136/255, blue:43/255, alpha:1.0)//green
    let orange = UIColor(red:243/255, green:144/255, blue:25/255, alpha:1.0)//orange

    if(circleValue <= 4){
      button.colorType = .red
      button.layer.borderColor = red.cgColor
      button.setTitleColor(red, for: .normal)

    } else if(circleValue > 4 && circleValue <= 7){
      button.colorType = .green
      button.layer.borderColor = green.cgColor
      button.setTitleColor(green, for: .normal)

    } else {
      button.colorType = .orange
      button.layer.borderColor = orange.cgColor
      button.setTitleColor(orange, for: .normal)

    }

    button.setTitle("\(circleValue)", for: .normal)
    return button
  }




  //keep gradient buttons here
  func applyGradient(colours: [UIColor]) -> Void {
    self.applyGradient(colours: colours, locations: nil)
  }

  func applyGradient(colours: [UIColor], locations: [NSNumber]?) -> Void
  {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.cornerRadius=3.0
    gradient.colors = colours.map { $0.cgColor }
    gradient.locations = locations
    self.layer.insertSublayer(gradient, at: 0)
  }
}