Як зробити просту закруглену кнопку на Дошці розповідей?

Я щойно почав вивчати розробку iOS, не можу знайти, як зробити просту округлу кнопку. Я знаходжу ресурси для старих версій. Чи потрібно встановити спеціальний фон для кнопки? В Android я б просто використав 9 патч, але я знаю, що iOS не має такої можливості.

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

Можна також зробити це в коді:

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

Коротка відповідь: ТАК

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

Він не відображатиметься, Storyboardале буде добре працювати при запуску проекту.

Примітка: «Key Path» і значення 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
    }
}

Встановіть клас MyButtonу Identity Inspectorта в IB Ви матимете roundedвластивість:

1. Створіть клас какао-дотику.

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. Перейдіть до зображення.

Я знайшов найпростіший спосіб це зробити, встановивши кутRadius на половину висоти виду.

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

Ви можете підключити IBOutletкнопку "Юр" із розкадрівки.

Потім ви можете встановити corner radius свою кнопку, щоб зробити кут круглим.

наприклад, ваш outletє myButtonте,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Швидкий

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

Розширення - найкращий варіант для цієї проблеми. Створіть розширення Перегляд або Кнопка

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