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

Program / 글쓴이

방금 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 클래스를 만듭니다.

여기에 이미지 설명 입력

  1. 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
        }
    }
}

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

여기에 이미지 설명 입력

답변

가장 쉬운 방법은 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
    }
}