Как создать границу в UIButton?

Ответ 1

Вы можете установить свойства границы на CALayer, обратившись к свойствам слоя кнопки.

Сначала добавьте Quartz

#import <QuartzCore/QuartzCore.h>

Установить свойства:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

См:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

CALayer в приведенной выше ссылке позволяет вам устанавливать другие свойства, такие как угловой радиус, maskToBounds и т.д.

Кроме того, хорошая статья о забаве кнопок:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

Ответ 2

Это очень просто, просто добавьте заголовок quartzCore в свой файл (для этого вы должны добавить кварцевую платформу в свой проект)

а затем сделайте это

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

вы можете изменить значения с плавающей запятой, как требуется.

наслаждаться.

Вот типичный современный код...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

что похож на сегментированные элементы управления.

ОБНОВЛЕНИЕ для Swift:

• Не нужно добавлять "QuartzCore"

Просто сделайте:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

Ответ 3

И быстро вам не нужно импортировать "QuartzCore/QuartzCore.h"

Просто используйте:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

или

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

Ответ 4

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

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

Другой вариант - создать растяжимый UIImage и установить его как фоновое изображение кнопки. Вы можете создать набор изображений в ваших изображениях .xcassets следующим образом:

Затем вы установите его как фоновое изображение кнопки:

Если ваше изображение является образ шаблона, вы можете установить цвет тона кнопки, и граница изменится:

Теперь при нажатии на кнопку выделяется остальная часть кнопки.

Ответ 5

Чтобы изменить кнопку Радиус, цвет и ширину, установите следующее:

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

Ответ 6

Теперь вам не нужно импортировать QuartzCore.h. Взятие iOS 8 sdk и Xcode 6.1 в референции.

Непосредственно используйте:

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

Ответ 7

Здесь обновлена ​​версия (Swift 3.0.1) от Ben Packard answer.

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = currentBorderColor.cgColor
                animation.duration = 0.4
                self.layer.add(animation, forKey: "")
            }
        }
    }
}

Получающаяся кнопка может использоваться внутри вашего StoryBoard благодаря тегам @IBDesignable и @IBInspectable.

Также определены два свойства, позволяющие установить ширину и цвет границы непосредственно на конструкторе интерфейса и просмотреть результат.

Другие свойства могут быть добавлены аналогичным образом, для радиуса границы и выделения времени затухания.

Ответ 8

Здесь подкласс UIButton, который поддерживает выделенную анимацию состояния без использования изображений. Он также обновляет цвет границы при изменении режима оттенков.

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.CGColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.CGColor
    }

    override var highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.CGColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.CGColor
                animation.duration = 0.4
                layer.addAnimation(animation, forKey: "")
            }
        }
    }
}

Использование:

let button = BorderedButton(style: .System) //style .System is important

Внешний вид:

Ответ 9

Это может быть достигнуто различными способами в Swift 3.0. Работает в последней версии Август - 2017

Option 1:

Непосредственно назначьте значения свойства borderWidth для кнопки пользовательского интерфейса:

  btnUserButtonName.layer.borderWidth = 1.0

Установить заголовок с помощью значений цвета по умолчанию для кнопки пользовательского интерфейса:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

Установите границу с цветом по умолчанию для значений свойств границы для кнопки пользовательского интерфейса:

btnUserButtonName.layer.borderColor = UIColor.red

Установите пользовательский цвет для значений свойств границы для кнопки пользовательского интерфейса:

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

Option 2: [Recommended]

Используйте метод Extension, чтобы Button во всем приложении выглядела согласованно, и не нужно повторять несколько строк кода где угодно.

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

Использование в коде:

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

Вывод метода расширения Button:

Ответ 10

Обновление с помощью Swift 3

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

Ответ 11

**** В Swift 3 ****

Чтобы создать границу

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

Чтобы закруглить угол

 btnName.layer.cornerRadius = 5