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

Я только начал изучать разработку для iOS, не могу найти, как сделать простую округлую кнопку. Нахожу ресурсы по старым версиям. Мне нужно установить собственный фон для кнопки? В Android я бы просто использовал патч 9, но я знаю, что iOS не имеет такой возможности.

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

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

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

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

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

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

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

например, ваш outletявляется myButtonто,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Swift

  myButton.layer.cornerRadius = 5.0

Если вы хотите кнопку точной круглой , то ваша кнопка это widthи heightдолжно быть , equalи cornerRadiusдолжна быть равна высоте или ширине / 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
    }
}

При добавлении 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");
}

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

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