원형 UIView 전체 원형이 아님

Question

흥미로운 문제가 있지만 해결 방법을 모르겠습니다. @IBInspectable로 UIView를 확장하려고합니다. 그러나이 방법을 사용하면 모서리 반경은 뷰의 실제 크기가 아닌 기본 파일면에서 설정되는 것처럼 보입니다.

IB에서 "View as"를 iPhoneSE로 설정하고 iPhoneSE 용으로 빌드하면보기가 원입니다. 그러나 iPhone7 용으로 제작하면 모서리가 완전히 둥글어지지 않습니다. 반대로, iPhone7에 "보기 모드"를 설정하고 iPhone7 용으로 빌드하면 뷰는 원입니다. 그러나 iPhoneSE 용으로 빌드하면 모서리가 둥글게됩니다.

사진 아래 코드 :

확장

extension UIView { 

    @IBInspectable var cornerRadius:Double { 
     get { 
      return Double(layer.cornerRadius) 
     } 
     set { 
      layer.cornerRadius = CGFloat(newValue) 
      layer.masksToBounds = newValue > 0 
     } 
    } 

    @IBInspectable var circleView:Bool { 
     get { 
      return layer.cornerRadius == min(self.frame.width, self.frame.height)/CGFloat(2.0) ? true : false 
     } 
     set { 
      if newValue { 
       layer.cornerRadius = min(self.frame.width, self.frame.height)/CGFloat(2.0) 
       layer.masksToBounds = true 
      } 
      else{ 
       layer.cornerRadius = 0.0 
       layer.masksToBounds = false 
      } 
     } 
    } 

} 

"보기로"IB

에 iPhoneSE로 아이폰 7 iPhoneSE

구축을위한 설계

설정

"보기로"iPhone7로 설정

빌드 아이폰 7

IB 설정 아이폰 SE

빌드에 대한

Answer 1

보기가 정사각형 인 경우에만 전체 원이 생깁니다.

보기가 직사각형이고 가장 작은 치수의 절반보다 작은 값으로 cornerRadius을 설정하면 두 번째보기가 표시되고 그 값보다 큰 경우 다이아몬드 모양의 값이 표시됩니다.

제약 조건을 확인하고 viewDidLayout에보기 완료 레이아웃을 작성한 후 cornerRadius을 계산하여 정확한 크기를 얻으십시오. 여기

이를 보여주는 놀이터입니다 (더 나은 문제를 보여주는 애니메이션 추가 한) : 당신은 185.5로 폭과 높이를 언급

import UIKit 
import PlaygroundSupport 

extension UIView 
{ 
    func addCornerRadiusAnimation(from: CGFloat, to: CGFloat, duration: CFTimeInterval) 
    { 
    let animation = CABasicAnimation(keyPath:"cornerRadius") 
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear) 
    animation.fromValue = from 
    animation.toValue = to 
    animation.duration = duration 
    self.layer.add(animation, forKey: "cornerRadius") 
    self.layer.cornerRadius = to 
    } 
} 

let v = UIView(frame: CGRect(x: 0, y: 0, width: 350, height: 450)) 
PlaygroundPage.current.liveView = v 

let squareView = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 100)) 
squareView.backgroundColor = .red 
squareView.layer.masksToBounds = true 
v.addSubview(squareView) 
var cornerRadius = CGFloat(0.5*min(squareView.frame.width, 
            squareView.frame.height)) 
squareView.addCornerRadiusAnimation(from: 0, to: cornerRadius, duration: 5) 

let rectangleView = UIView(frame: CGRect(x: 10, y: 200, width: 100, height: 200)) 
rectangleView.backgroundColor = .blue 
rectangleView.layer.masksToBounds = true 
v.addSubview(rectangleView) 
cornerRadius = CGFloat(0.5*min(rectangleView.frame.width, 
            rectangleView.frame.height)) 
rectangleView.addCornerRadiusAnimation(from: 0, to: cornerRadius, duration: 5) 

let diamondView = UIView(frame: CGRect(x: 200, y: 200, width: 100, height: 200)) 
diamondView.backgroundColor = .green 
diamondView.layer.masksToBounds = true 
v.addSubview(diamondView) 
cornerRadius = CGFloat(0.5*max(diamondView.frame.width, 
           diamondView.frame.height)) 
diamondView.addCornerRadiusAnimation(from: 0, to: cornerRadius, duration: 5) 

Answer 2

을하지만 당신은 (350)로 너비 제약 조건을 유지

Answer 3

viewDidLayout으로 이동하지 않으려면 .layoutIfNeeded()를 추가하여 코너 반경을 설정하기 전에 간단히 트릭을 만들 수 있습니다.

yourCircleView.layoutIfNeeded() 
yourCircleView.layer.cornerRadius = yourCircleView.frame.size.width/2