Circular Gradient Buttons in Swift - ios

Question

I am creating circular button in the following way:
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)
}
When button is clicked, I am applying gradient to the clicked button in following way:
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])
}
This is the extension I used for applying gradient:
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)
}
}
In doing so I have two issues:
Not able to identify the color of selected button so I can apply respective gradient to that button.
When I apply gradient to button, the button becomes rectangular instead of circular.
Ideally needed:
This is how it looks now:
How can I resolve this?

Answer 1

For the first case you can do
button.layer.cornerRadius=15.0
//this line is what you need
button.clipsToBounds = true
For second case you can subclass the UIButton and create an ivar colorType of enum.
Then based on enum you can check what is the color of your button.
Below is the example of the code of a 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)
}
}

Answer 2

Try using this:
button.layer.cornerRadius = button.frame.size.width/2.0
button.layer.borderColor = UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0).CGColor
button.backgroundColor = UIColor.whiteColor()
button.tintColor = UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0).CGColor
button.layer.masksToBounds = true
Make sure your button must have same Height and Width and there is image required for Button.