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

104

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

введите описание изображения здесь

Гинтас_
источник

Ответы:

82

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

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

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true
realtimez
источник
2
зачем нужен clipsToBounds? Кажется, эта тень не работает, пока я ее не уберу.
Gintas_
1
Хороший ответ, но можно и в IB, без изображений. Увидеть ниже.
zontar 02
225

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

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

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

введите описание изображения здесь

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

Нишант
источник
9
Пожалуйста, оставьте комментарий при отрицательном голосовании.
Nishant
7
досадно, что IB не может показать это как обычное приложение для рисования.
Уильям Чернюк
2
@WilliamCerniuk: Вообще-то может. Проверьте nshipster.com/ibinspectable-ibdesignable
Nishant
Установка атрибутов времени выполнения, определяемых пользователем, действительно работает, их можно просмотреть в симуляторе после сборки.
Cons Bulaquena
Как говорится в принятом ответе, вам также может потребоваться добавить логический путь ключа, clipsToBoundsчтобы это работало.
Макс
87

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

@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свойство:

введите описание изображения здесь

ЧикабуЗ
источник
4
Безусловно, лучший ответ. Узнал что-то классное сегодня новое!
Марк
2
Этот ответ неполный. Когда вы запускаете приложение, xCode будет использовать размер кадра представления в построителе интерфейса, а не реальный размер кадра, когда приложение запущено.
Саймон Бэкс
2
Вы также можете использовать didSet вместо willSet и удалить аргумент isRounded.
Саймон Бэкс
1
Если вы используете фоновое изображение, установите layer.masksToBounds = trueтакже
zontar 02
34
  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. Обратитесь к изображению.

введите описание изображения здесь

Ансон
источник
Пожалуйста, перестаньте публиковать один и тот же ответ несколько раз. Это считается шумом. Либо адаптируйте свои ответы к различным вопросам, либо, если это действительно один и тот же вопрос, вы можете пометить их как повторяющиеся (и, когда у вас будет достаточно репутации, проголосуйте за закрытие).
elixenide
Не знаю, сталкивались ли с этим и другие, но как только я установил класс для кнопки и дал ему радиус, ширину границы и цвет границы, Xcode (9.2) выдает ошибку, что произошла ошибка рендеринга. Создание приложения идет успешно, но красный знак "!" продолжает отображаться. Просто говорю ... Я вернулся к решению только с кодом (хотя это был действительно элегантный способ).
Aeger
10

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

button.layer.cornerRadius = button.bounds.size.height/2
FrankkieNL
источник
Нет, я не. Если у вас одинаковая высота и ширина (значит, он будет квадратным), то вы получите круг. Но если ширина больше высоты, кнопка будет правильной.
FrankkieNL
2
Вы правы, я пропустил изображение, включенное в вопрос, которое показывает, чем на самом деле был плакат, после того, как ваш ответ больше соответствует принятому, чем принятый ответ - голос за
Майкл Хадсон
4

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

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

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

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Swift

  myButton.layer.cornerRadius = 5.0

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

Кетан Пармар
источник
4

Поскольку другой ответ предлагал выполнить большую часть этой работы в коде, только один ответ фактически предоставил способ просмотра ваших изменений в интерфейсе раскадровки 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
    }
}
Джозеф Шентон
источник
1

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

Venki Mohan
источник
0

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

 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");
}
Санджит верма
источник
0

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

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

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

button.roundCorners()
Мухаммад Усман
источник
0

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

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

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

введите описание изображения здесь

Касильяс
источник
-1
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)
        }
    }
}
Родриго Саломао
источник