Як створити кордон в UIButton?

Я використовую власну кнопку в моєму додатку під назвою "addButton", і я хочу обшити її білим кольором. Як я можу отримати межу білого кольору навколо моєї спеціальної кнопки?

Ви можете встановити властивості кордону на CALayer, отримавши доступ до властивості шару кнопки.

Спочатку додайте кварц

#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

Це дуже просто, просто додайте заголовок 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

І швидко, вам не потрібно імпортувати "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

Налаштування шару проблема borderWidthі borderColorв тому , що при натисканні на кнопку кордон не анімувати ефект виділення.

Звичайно, ви можете спостерігати за подіями кнопки та відповідно змінювати колір облямівки, але це відчуває себе непотрібним.

Інший варіант - створити розтягуваний UIImage та встановити його як фонове зображення кнопки. Ви можете створити набір зображень у своїх Images.xcassets так:

Потім ви встановлюєте його як фонове зображення кнопки:

Якщо ваше зображення є шаблоновим зображенням, ви можете встановити колір відтінку кнопки, і межа буде змінена:

Тепер рамка буде підкреслена рештою кнопки при дотику.

Щоб змінити кнопку Радіус, колір і ширину, я встановив так:

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;

Ось оновлена версія ( Swift 3.0.1 ) від Бена Packard в відповідь .

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.

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

Інші властивості можуть бути додані аналогічно, для радіуса кордону та підкреслення часу вицвітання.

QuartzCore.hЗараз вам не потрібно імпортувати . Беручи до уваги iOS 8 sdk та Xcode 6.1.

Безпосередньо використовувати:

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

Ось 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

Зовнішній вигляд:

Цього можна досягти різними методами в Swift 3.0, який працював над останньою версією серпня - 2017

Варіант 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

Варіант 2: [Рекомендовано]

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

//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()

Кнопка виведення методу розширення:

Оновлення за допомогою Swift 3

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

**** В Swift 3 ****

Для створення кордону

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

Щоб кут був закругленим

 btnName.layer.cornerRadius = 5

Швидкий 5

button.layer.borderWidth = 2

Для зміни кольору рамки використовуйте

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)