web-dev-qa-db-ja.com

ストーリーボードでUIButton BorderColorを変更

ユーザー定義のランタイム属性のUIbuttonにCornerRadiusとBorderWidthを設定します。 layer.borderColorを追加しなくてもうまく機能し、境界線を黒色で表示します。ただし、add layer.borderColorが機能しない場合（境界線は表示されません）。

enter image description here

ioscolorsuibuttonstoryboard
72
Jaleel Nazir

Swiftの場合：

enter image description here

Swift 3：

extension UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

Swift 2.2：

extension UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(CGColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.CGColor
        }
    }
}
152
Jaleel Nazir

答えを変更しましたlayer.borderColor to layer.borderColorFromUIColor

enter image description here

.mファイルにコードを追加します

#import <QuartzCore/QuartzCore.h>
@implementation CALayer (Additions)

- (void)setBorderColorFromUIColor:(UIColor *)color
{
    self.borderColor = color.CGColor;
}

@end

ティック属性インスペクターのプロパティ

Attribute Inspector

80
Jaleel Nazir

Swift 4、Xcode 9.2-IBDesignableおよびIBInspectableを使用して、カスタムコントロールを構築し、Interface Builderでデザインをライブプレビューします。

Swiftのサンプルコードを次に示します。ViewController.SwiftのUIKitのすぐ下に配置します。

@IBDesignable extension UIButton {

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

ビューの検査可能な属性に移動する場合、これらのプロパティを視覚的に見つけ、プロパティを編集する必要があります。

enter image description here

変更は、ユーザー定義のランタイム属性にも反映されます。

enter image description here

ビルド時間と出来上がりで実行してください！明確な丸いボタンと境界線が表示されます。

enter image description here

43
Cons Bulaquena

説明は、おそらくここの他の回答のいくつかで失われています：

このプロパティが設定されない理由は、layer.borderColorにはCGColor型の値が必要だからです。

ただし、UIColorタイプのみが、Interface Builderのユーザー定義ランタイム属性を介して設定できます！

そのため、Interface Builderを介してUIColorをプロキシプロパティに設定し、その呼び出しをインターセプトして、同等のCGColorをlayer.borderColorプロパティに設定する必要があります。

これは、CALayerでカテゴリを作成し、キーパスを一意の新しい「プロパティ」（borderColorFromUIColor）に設定し、対応するセッターをオーバーライドするカテゴリ（setBorderColorFromUIColor:）で実現できます。

9
pkamb

これを行うにははるかに良い方法があります！ @IBInspectableを使用する必要があります。 Mike Woelmerのブログエントリを確認してください： https://spin.atomicobject.com/2017/07/18/Swift-interface-builder/

XcodeでIBに機能を実際に追加します！他の回答のスクリーンショットの一部では、フィールドがIBに存在するように見えますが、少なくともXcode 9では存在しません。しかし、彼の投稿に従うとそれらが追加されます。

1
cdeerinck

Swiftの場合、機能は動作しません。目的の結果を得るには、計算されたプロパティが必要です。

extension CALayer {
    var borderColorFromUIColor: UIColor {
        get {
            return UIColor(CGColor: self.borderColor!)
        } set {
            self.borderColor = newValue.CGColor
        }
    }
}
0
Furqan Khan

これは私のために動作します。

Swift 3、Xcode 8.3

Identity inspector (UIButton in this case

CALayer拡張：

extension CALayer {
var borderWidthIB: NSNumber {
    get {
        return NSNumber(value: Float(borderWidth))
    }
    set {
        borderWidth = CGFloat(newValue.floatValue)
    }
}
var borderColorIB: UIColor? {
    get {
        return borderColor != nil ? UIColor(cgColor: borderColor!) : nil
    }
    set {
        borderColor = newValue?.cgColor
    }
}
var cornerRadiusIB: NSNumber {
    get {
        return NSNumber(value: Float(cornerRadius))
    }
    set {
        cornerRadius = CGFloat(newValue.floatValue)
    }
}

}

0
Jovan Stankovic