向UIView添加宽度的边框显示外部的小背景

我想添加一个带有绿色背景的UIView圆形边框，我创build了带有borderWidth，cornerRadius和borderColor属性的简单的UIView子类，我从故事板设置它。

 @IBDesignable class RoundedView: UIView { @IBInspectable var cornerRadius: CGFloat { get { return layer.cornerRadius } set { layer.cornerRadius = newValue layer.masksToBounds = newValue > 0 } } @IBInspectable var borderWidth: CGFloat { get { return layer.borderWidth } set { layer.borderWidth = newValue } } @IBInspectable var borderColor: UIColor { get { if let color = layer.borderColor { return UIColor(cgColor: color) } else { return UIColor.clear } } set { layer.borderColor = newValue.cgColor } } } 

但是，当我编译并运行一个应用程序或在InterfaceBuilder中显示它时，我可以看到边界之外的一条线仍然存在（并且在白色背景上很明显）。

这个带有绿色背景，框架10×10，圆angular半径= 5的RoundedView被放置在普通UIImageViewangular落（指示是否有人在线）。 您可以在UIImageView和白色背景上看到外部的绿色边框。

你能告诉我什么是错的吗？

Answer 1

你正在做的是依靠图层来绘制你的边界和angular落。 所以你不负责结果。 你给了它一个绿色的背景，现在你看到的背景边缘“突出”的背景。 而且无论如何，四舍五入都是一种非常简单而不可靠的方式。 圆看，做一个圆形的面具 。

所以，制作徽章的方法是完全掌握它的绘制方法：在白色背景中间画一个绿色的圆圈 ，用一个更大的圆圈将它们全部掩盖起来，形成边框。

这是一个徽章视图，它将完成你所追求的内容，外面没有神器。

 class Badge : UIView { class Mask : UIView { override init(frame:CGRect) { super.init(frame:frame) self.isOpaque = false self.backgroundColor = .clear } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: CGRect) { let con = UIGraphicsGetCurrentContext()! con.fillEllipse(in: CGRect(origin:.zero, size:rect.size)) } } let innerColor : UIColor let outerColor : UIColor let innerRadius : CGFloat var madeMask = false init(frame:CGRect, innerColor:UIColor, outerColor:UIColor, innerRadius:CGFloat) { self.innerColor = innerColor self.outerColor = outerColor self.innerRadius = innerRadius super.init(frame:frame) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } override func draw(_ rect: CGRect) { let con = UIGraphicsGetCurrentContext()! con.setFillColor(outerColor.cgColor) con.fill(rect) con.setFillColor(innerColor.cgColor) con.fillEllipse(in: CGRect( x: rect.midX-innerRadius, y: rect.midY-innerRadius, width: 2*innerRadius, height: 2*innerRadius)) if !self.madeMask { self.madeMask = true // do only once self.mask = Mask(frame:CGRect(origin:.zero, size:rect.size)) } } } 

我试着用一个样本设置如下：

 let v = Badge(frame: CGRect(x:100, y:100, width:16, height:16), innerColor: .green, outerColor: .white, innerRadius: 5) self.view.addSubview(v) 

它看起来很好。 根据需要调整参数。