Как сделать простую округлую кнопку в Раскадровке?

Чтобы сделать это в раскадровке, вам нужно использовать изображение для кнопки.

В качестве альтернативы вы можете сделать это в коде:

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

Краткий ответ: ДА

Вы можете сделать простую кнопку с закругленными углами без необходимости в дополнительном фоновом изображении или написании кода для него. Просто следуйте приведенному ниже снимку экрана, чтобы установить атрибуты времени выполнения для кнопки, чтобы получить желаемый результат.

Он не будет отображаться в Storyboard, но он будет работать нормально, когда вы запустите проект.

Примечание.
"Путь к ключу" layer.cornerRadius и значение 5. Это значение необходимо изменить в соответствии с высотой и шириной кнопки. Формула для этого - высота кнопки * 0,50. Поэтому поиграйте со значением, чтобы увидеть ожидаемую округленную кнопку в симуляторе или на физическом устройстве. Эта процедура будет выглядеть утомительной, если у вас есть более одной кнопки для округления в раскадровке.

Вы можете сделать что-то вроде этого:

@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
    }
}

Установите class в MyButton в 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. Обратитесь к изображению.

Я нашел самый простой способ сделать это - установить угол радиуса равным половине высоты представления.

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

Поскольку другой ответ предлагал выполнить большую часть этой работы в коде, только один ответ фактически предоставил способ просмотра ваших изменений в интерфейсе раскадровки IB. Мой ответ выходит за рамки этого ответа, позволяя вам изменять угол радиуса представления, кнопки, изображения и т. Д.

Взгляните на следующий код. Чтобы использовать этот код, создайте новый быстрый файл с именем 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
    }
}

Вы можете подключить IBOutlet кнопки из раскадровки.

Затем вы можете настроить corner radius кнопки так, чтобы угол был закругленным.

например, ваш outlet равен myButton, тогда,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Быстрый

  myButton.layer.cornerRadius = 5.0

Если вам нужна точная круглая кнопка, тогда width и height вашей кнопки должны быть equal и cornerRadius должны быть равны высоте или ширине / 2 (половине ширины или высоты).

Следуйте приведенному ниже снимку экрана. Он работает, когда вы запускаете симулятор (не увидите его при предварительном просмотре)

При добавлении layer.cornerRadius в раскадровку убедитесь, что у вас нет начальных и конечных пробелов. Если вы сделаете копипаст, вы можете вставить пробелы. Было бы неплохо, если бы XCode сообщал какое-то предупреждение или ошибку.

Я использую Xcode версии 11.4

В инспекторе атрибутов вы можете определить радиус угла.

Он не будет отображаться в раскадровке, но он будет работать нормально при запуске проекта.

Расширение - лучший вариант решения этой проблемы. Создайте расширение View или Button

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

Назовите это из кода

button.roundCorners()

Попробуй это!!

 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");
}