How can I add a little white tick to SSRadioButton

Question

The following is my code. I want to add a little white tick to middle when i clicked the button. How can i do that by programming but not using image...

import Foundation
import UIKit

@IBDesignable
class SSRadioButton: UIButton {

private var circleLayer = CAShapeLayer()
private var fillCircleLayer = CAShapeLayer()
override var selected: Bool {
    didSet {
        toggleButon()
    }
}
/**
    Color of the radio button circle. Default value is UIColor red.
*/
@IBInspectable var circleColor: UIColor = UIColor.redColor() {
    didSet {
        circleLayer.strokeColor = circleColor.CGColor
        self.toggleButon()
    }
}
/**
    Radius of RadioButton circle.
*/
@IBInspectable var circleRadius: CGFloat = 5.0
@IBInspectable var cornerRadius: CGFloat {
    get {
        return layer.cornerRadius
    }
    set {
        layer.cornerRadius = newValue
        layer.masksToBounds = newValue > 0
    }
}

private func circleFrame() -> CGRect {
    var circleFrame = CGRect(x: 0, y: 0, width: 2*circleRadius, height: 2*circleRadius)
    circleFrame.origin.x = 0 + circleLayer.lineWidth
    circleFrame.origin.y = bounds.height/2 - circleFrame.height/2
    return circleFrame
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    initialize()
}

override init(frame: CGRect) {
    super.init(frame: frame)
    initialize()
}

private func initialize() {
    circleLayer.frame = bounds
    circleLayer.lineWidth = 2
    circleLayer.fillColor = UIColor.clearColor().CGColor
    circleLayer.strokeColor = circleColor.CGColor
    layer.addSublayer(circleLayer)
    fillCircleLayer.frame = bounds
    fillCircleLayer.lineWidth = 2
    fillCircleLayer.fillColor = UIColor.clearColor().CGColor
    fillCircleLayer.strokeColor = UIColor.clearColor().CGColor
    layer.addSublayer(fillCircleLayer)
    self.titleEdgeInsets = UIEdgeInsetsMake(0, (4*circleRadius + 4*circleLayer.lineWidth), 0, 0)
    self.toggleButon()
}
/**
    Toggles selected state of the button.
*/
func toggleButon() {
    if self.selected {
        fillCircleLayer.fillColor = circleColor.CGColor
    } else {
        fillCircleLayer.fillColor = UIColor.clearColor().CGColor
    }
}

private func circlePath() -> UIBezierPath {
    return UIBezierPath(ovalInRect: circleFrame())
}

private func fillCirclePath() -> UIBezierPath {
    return UIBezierPath(ovalInRect: CGRectInset(circleFrame(), 2, 2))
}

override func layoutSubviews() {
    super.layoutSubviews()
    circleLayer.frame = bounds
    circleLayer.path = circlePath().CGPath
    fillCircleLayer.frame = bounds
    fillCircleLayer.path = fillCirclePath().CGPath
    self.titleEdgeInsets = UIEdgeInsetsMake(0, (2*circleRadius + 4*circleLayer.lineWidth), 0, 0)
}

override func prepareForInterfaceBuilder() {
    initialize()
}
}

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Something like this?

You could do achieve by using UIBezierPath to draw a couple of lines that make a tick. Unless you were looking for something more fancy or curvy? The answer to this question: Draw a line with UIBezierPath has a nice little function that simplifies the process of drawing the lines.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 28 '16 at 10:34

Westside

675
1
7
16

i know this method. but i don't know how to draw it exactly inside the circle. – ray ray Jul 29 '16 at 01:55
Could you please show the code which is applicable for this case. thank you. – ray ray Jul 29 '16 at 02:39

How can I add a little white tick to SSRadioButton

1 Answers1