너비가있는 테두리를 UIView에 추가하면 외부에 작은 배경이 표시됩니다.

Question

UIView에 녹색 테두리가있는 원 테두리를 추가하려고하는데 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 
     } 
    } 

} 

하지만 컴파일하고 응용 프로그램을 실행하거나 인터페이스 빌더에 표시 할 때 내가 아직 거기 (흰색 배경에 꽤 볼) 경계 외부 라인을 볼 수 있습니다.

녹색 배경, 프레임 10 × 10, 모서리 반경 = 5이 RoundedView

는 일반 UIImageView의 모서리에 배치됩니다 (누군가가 온라인인지 여부를 나타내는). UIImageView와 흰색 배경 모두에서 녹색 테두리가 바깥 쪽을 볼 수 있습니다.

당신은 무엇이 잘못되었는지 말해 주실 래요?

Answer 1

당신이하고있는 일은 레이어를 사용하여 모서리를 둥글게 만드는 것입니다. 따라서 결과를 담당하지 않습니다. 당신은 녹색 배경을 주었고, 이제 국경의 가장자리에 배경이 "튀어 나와"보입니다. 그리고 어떤 경우 에든, 모퉁이를 반올림하는 것은 정말 사기성 있고 신뢰할 수없는 방법으로 둥근 모양을 만듭니다. 라운드 뷰를 만들려면 마스크을 만듭니다.

그래서, 배지를 만들 수있는 방법은 그리는 것을 완전 충전을하는 것입니다 : 당신이 흰색 배경의 중심에 녹색 원을 그릴 및 가 가진 모든 마스크 국경을 만들기위한 큰 원. 다음과 같이

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) 

괜찮아 보인다. 원하는대로 매개 변수를 조정하십시오.