I am trying to create a colored 10pt circle with a 1pt border of another color. For this example, let's say I want a red circle of 10pt with a white 1pt border.
I assume that I have to make the UIView 12pt diameter (10pt for circle across, and 1pt of border on each side). The corner-radius is half of the width of the view.
This circle is added to another UIView, which is a customView in a barButtonItem in an NavigationBar, if that has anything to do with this..
My code is as follows:
let circle = UIView(frame: CGRect.zero)
circle.translatesAutoresizingMaskIntoConstraints = false
let w = NSLayoutConstraint(item: circle, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .width, multiplier: 1, constant: 12)
let h = NSLayoutConstraint(item: circle, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1, constant: 12)
circle.addConstraints([w, h])
let x = NSLayoutConstraint(item: circle, attribute: .centerX, relatedBy: .equal, toItem: someView, attribute: .centerX, multiplier: 1, constant: 0)
let y = NSLayoutConstraint(item: circle, attribute: .centerY, relatedBy: .equal, toItem: someView, attribute: .centerY, multiplier: 1, constant: 0)
someView.addSubview(circle)
someView.addConstraints([x, y])
circle.backgroundColor = UIColor.red
circle.layer.cornerRadius = 6
circle.layer.borderColor = UIColor.white.cgColor
circle.layer.borderWidth = 1
circle.clipsToBounds = true
And this is the result:
As you can see, the circle is 10pt wide nicely, and then a border of 1pt around it, but it has small artifacts of red throughout the border. Some sort of rasterization? How can I fix this?
Zoomed in:
I can make a 12pt view and another view 10pt centered within, with different colors, but I'd rather instantiate 1 view instead of 2.