web-dev-qa-db-ja.com

ストーリーボードでUIButtonの境界線を設定します

コードに直接設定しないと、XCode 5のボタンに境界線を設定できません。カスタムの背景画像を作成せずにストーリーボードでこれを行う方法はありませんか?

25
Tommy Nicholas

キーパスを使用できます。

たとえば、角の半径(layer.cornerRadius)画像の説明どおり。 ストーリーボードで効果を確認することはできません。このパラメーターは実行時に評価されるためです。 これで、UIViewのSwiftカテゴリ(画像の下のコード)を@IBInspectableは、結果をストーリーボードに表示します(カテゴリを使用している場合は、cornerRadiusのみを使用し、layer.cornerRadiusキーパスとして。

enter image description here


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

Peter DeWeese keypath layer.borderUIColor境界線の色を設定します。

CALayer + XibConfiguration.h:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer(XibConfiguration)

// This assigns a CGColor to borderColor.
@property(nonatomic, assign) UIColor* borderUIColor;

@end

CALayer + XibConfiguration.m:

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)

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

-(UIColor*)borderUIColor
{
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Swift 3IBInspectableを使用するときにIBで結果を表示するには、UIViewを拡張し、そのクラスにプロパティを追加する必要があります。

@IBDesignable class MyView: UIView {}

extension MyView {
    @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
            layer.masksToBounds = newValue > 0
        }
    }

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

参照: http://nshipster.com/ibinspectable-ibdesignable/

7
dchakarov

短い答え:

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

長答:

角丸UIButton

customUIView.layer.cornerRadius = 10

ボーダーの厚さ

pcustomUIView.layer.borderWidth = 1

ボーダの色

customUIView.layer.borderColor = UIColor.blue.cgColor
0
swiftBoy