Как да направите прост заоблен бутон в Storyboard?

За да го направите в сценария, трябва да използвате изображение за бутона.

Като алтернатива можете да го направите в код:

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

Кратък отговор: ДА

Можете абсолютно да направите прост закръглен бутон без необходимост от допълнително фоново изображение или писане на код за същото. Просто следвайте екранната снимка, дадена по-долу, за да зададете атрибутите за изпълнение на бутона, за да получите желания резултат.

Няма да се покаже в Storyboard, но ще работи добре, когато стартирате проекта.

Забележка:
Стойността на 'Key Path' 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
    }
}

Задайте клас на 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

Тъй като други отговори предложиха да се извърши по-голямата част от тази работа в код, само един отговор всъщност предостави начин да видите вашите промени в интерфейса на Storyboard IB. Моят отговор надхвърля този отговор, като ви позволява да промените радиуса на ъгъла на изгледа, бутона, изображението и т.н.

Моля, разгледайте следния код. За да използвате този код, създайте нов swift файл, наречен 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

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

Няма да се покаже в Storyboard, но ще работи добре, когато стартирате проекта.

Разширението е най-добрият вариант за този проблем. Създайте разширение на 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");
}