Как сделать закругленные границы и обводку у UIButton в Swift?
Программный способ (рекомендуется для начинающих)
Ваш код в целом правильный, но есть одна важная деталь: если вы используете UIButton с типом system (стандартный тип в сториборде), то системная кнопка может игнорировать некоторые свойства слоя, так как она сама управляет своим отображением. Чтобы это исправить, нужно либо изменить тип кнопки на custom, либо настроить дополнительные параметры.
Вот исправленный и полный пример:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Шаг 1: Убедитесь, что тип кнопки - Custom (в сториборде или программно)
// Если кнопка создана в сториборде, выберите Type = Custom в инспекторе атрибутов
// Шаг 2: Настройка закругления углов
myButton.layer.cornerRadius = 15.0 // Радиус скругления
// Шаг 3: Настройка обводки
myButton.layer.borderWidth = 2.0 // Толщина границы
myButton.layer.borderColor = UIColor.systemBlue.cgColor // Цвет границы
// Шаг 4: Дополнительно - настройка тени (опционально)
myButton.layer.shadowColor = UIColor.black.cgColor
myButton.layer.shadowOffset = CGSize(width: 0, height: 2)
myButton.layer.shadowOpacity = 0.3
myButton.layer.shadowRadius = 4.0
// Шаг 5: Обрезаем содержимое по границам слоя (важно для скругления)
myButton.clipsToBounds = true
// Шаг 6: Настройка внутренних отступов для текста
myButton.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)
}
}
Настройка через Interface Builder (Storyboard)
Если вы предпочитаете визуальный редактор, можно использовать IBDesignable и IBInspectable:
- Создайте новый файл Swift (File → New → File → Cocoa Touch Class). Назовите его, например,
RoundedButton. - Унаследуйте класс от
UIButton. - Добавьте следующий код:
import UIKit
@IBDesignable
class RoundedButton: UIButton {
@IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
@IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor: UIColor = .clear {
didSet {
layer.borderColor = borderColor.cgColor
}
}
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupView()
}
private func setupView() {
clipsToBounds = true
}
}
- В сториборде выберите вашу кнопку, перейдите в инспектор Identity и укажите Custom Class = RoundedButton.
- В инспекторе Attributes Inspector появятся новые поля: Corner Radius, Border Width, Border Color. Заполните их нужными значениями.
Важные моменты
- clipsToBounds = true — обязательно для корректного отображения скругления, иначе содержимое кнопки может выходить за границы.
- Тип кнопки — используйте
UIButtonType.custom(в сториборде Type = Custom), чтобы избежать конфликтов с системным стилем. - Цвет границы — используйте
.cgColorдля свойств слоя, так как Core Animation работает с CGColor, а не UIColor. - Анимация — если нужно анимировать эти свойства, оборачивайте изменения в
UIView.animateили используйтеCABasicAnimation.
Теперь ваша кнопка будет иметь красивые закругленные углы и обводку!
<<Альтернативный подход: создание кнопки через код без сториборда
Если вы предпочитаете полностью программный подход (без сториборда), вот как можно создать и настроить кнопку:
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton(type: .custom)
button.frame = CGRect(x: 100, y: 200, width: 200, height: 50)
button.setTitle("Нажми меня", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = UIColor.systemBlue
// Настройка закругления и обводки
button.layer.cornerRadius = 12
button.layer.borderWidth = 3
button.layer.borderColor = UIColor.darkGray.cgColor
button.clipsToBounds = true
// Добавление обработчика нажатия
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
view.addSubview(button)
}
@objc func buttonTapped() {
print("Кнопка нажата!")
}
}
Этот метод дает полный контроль над расположением и внешним видом кнопки. Вы можете легко изменить размер, цвет и другие параметры прямо в коде. Также рекомендую использовать Auto Layout вместо фиксированного frame для адаптивности под разные размеры экрана.
Ответов пока нет.
Войдите чтобы оставить ответ
Блоги