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ヘッダーを追加するだけです（そのため、プロジェクトにquartzフレームワークを追加する必要があります）

そしてこれを行う

[[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）を以下に示します。

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

結果のボタンは、@IBDesignableおよび@IBInspectableタグのおかげでStoryBoard内で使用できます。

また、2つのプロパティが定義されているため、境界線の幅と色をインターフェイスビルダーで直接設定し、結果をプレビューできます。

ボーダーの半径とハイライトのフェージング時間について、他のプロパティを同様の方法で追加できます。

ここでインポートする必要はありません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のさまざまな方法で実現できます。

オプション1：

UIボタンのborderWidthプロパティ値を直接割り当てます。

  btnUserButtonName.layer.borderWidth = 1.0

UIボタンのデフォルトの色値でタイトルを設定します。

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

UIボタンの境界線プロパティ値にデフォルト色の境界線を設定します。

btnUserButtonName.layer.borderColor = UIColor.red

UIボタンの境界線プロパティ値にユーザー定義の色を設定します。

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

オプション2：[推奨]

Extensionメソッドを使用すると、アプリケーション全体でボタンの一貫性が保たれ、どこにでも複数行のコードを繰り返す必要がなくなります。

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