Storyboard에서 간단한 둥근 버튼을 만드는 방법은 무엇입니까?

방금 iOS 개발을 배우기 시작했는데 간단한 둥근 버튼을 만드는 방법을 찾을 수 없습니다. 이전 버전에 대한 리소스를 찾습니다. 버튼에 대한 사용자 정의 배경을 설정해야합니까? Android에서는 9 패치 만 사용하지만 iOS에는이 기능이 없다는 것을 알고 있습니다.

스토리 보드에서이를 수행하려면 버튼에 대한 이미지를 사용해야합니다.

또는 코드에서 수행 할 수 있습니다.

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

짧은 답변 : 예

추가 배경 이미지 나 동일한 코드를 작성하지 않고도 간단한 둥근 버튼을 만들 수 있습니다. 원하는 결과를 얻으려면 버튼의 런타임 속성을 설정하려면 아래 스크린 샷을 따르십시오.

에 표시되지 Storyboard않지만 프로젝트를 실행하면 제대로 작동합니다.

주 : '주요 경로' 과 값이 값이 버튼의 높이와 폭에 따라 변경 될 필요가 5이다. 공식은 버튼의 높이 * 0.50입니다. 따라서 시뮬레이터 또는 물리적 장치에서 예상되는 둥근 버튼을 보려면 값을 조정하십시오. 이 절차는 스토리 보드에 둥글게 할 버튼이 두 개 이상있을 때 지루해 보입니다.
layer.cornerRadius

다음과 같이 할 수 있습니다.

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

클래스를 MyButtonin으로 설정 Identity Inspector하고 IB에서 rounded속성 을 갖게 됩니다.

1. Cocoa Touch 클래스를 만듭니다.

2. RoundButton 클래스에 코드를 삽입합니다.

   import UIKit
   
   @IBDesignable
   class RoundButton: UIButton {
   
       @IBInspectable var cornerRadius: CGFloat = 0{
           didSet{
           self.layer.cornerRadius = cornerRadius
           }
       }
   
       @IBInspectable var borderWidth: CGFloat = 0{
           didSet{
               self.layer.borderWidth = borderWidth
           }
       }
   
       @IBInspectable var borderColor: UIColor = UIColor.clear{
           didSet{
               self.layer.borderColor = borderColor.cgColor
           }
       }
   }

3. 이미지를 참조하십시오.

가장 쉬운 방법은 cornerRadius를 뷰 높이의 절반으로 설정하는 것입니다.

button.layer.cornerRadius = button.bounds.size.height/2

IBOutlet스토리 보드에서 yur 버튼을 연결할 수 있습니다 .

그런 다음 corner radius버튼을 설정 하여 모서리를 둥글게 만들 수 있습니다.

예를 들어, 당신은 outlet이다 myButton, 다음

Obj-C

 self.myButton.layer.cornerRadius = 5.0 ;

빠른

  myButton.layer.cornerRadius = 5.0

그런 다음 정확한 둥근 버튼을 원하는 경우 버튼입니다 width및 height수 있어야 equal하고 cornerRadius(너비 또는 높이의 절반) 높이 또는 너비 / 2와 동일해야합니다.

다른 답변 이이 작업의 대부분을 코드로 수행하도록 제안했듯이 실제로 스토리 보드 IB 인터페이스에서 변경 사항을 볼 수있는 방법을 제공하는 답변은 하나뿐입니다. 내 대답은 뷰, 버튼, 이미지 등의 cornerRadius를 변경할 수 있도록 허용하여 그 대답을 뛰어 넘습니다.

다음 코드를 살펴보십시오. 이 코드를 사용하려면 RoundedView라는 새 파일을 만들고 원하는 파일을 만든 다음 스토리 보드로 이동하여 클래스를 "RoundedView", "RoundedImageView"또는 "RoundedButton"으로 변경합니다.

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

layer.cornerRadius스토리 보드를 추가하는 동안 앞뒤에 공백이 없는지 확인하십시오. 복사 붙여 넣기를 수행하면 공백이 삽입 될 수 있습니다. XCode가 일종의 경고 또는 오류를 말하면 좋을 것입니다.

이 시도!!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}

확장은이 문제에 대한 최상의 옵션입니다. 보기 또는 버튼의 확장 만들기

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

코드에서 호출

button.roundCorners()

내가 사용하고 Xcode의 버전 11.4을

속성 검사기에서 모서리 반경을 정의 할 수 있습니다.

스토리 보드에는 표시되지 않지만 프로젝트를 실행하면 제대로 작동합니다.

import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}