インターフェイスビルダーからUIViewボーダープロパティを設定することは可能ですか?


184

インターフェイスビルダーから直接UIViewボーダープロパティ(色、太さなど)を制御することは可能ですか、それともプログラムでしか行えませんか?



1
私のように誰かがGoogleから来た場合に備えて。これらの変更がIBに反映されることを確認するには、UIViewのサブクラスを作成し、IBで操作するビューに割り当てる必要があります。
Kanongata 2017

回答:


392

実際には、インターフェイスビルダーを使用してビューのレイヤーのいくつかのプロパティを設定できます。xcodeを介してレイヤーのborderWidthとcornerRadiusを設定できることを知っています。おそらくレイヤーがUIColorではなくCGColorを必要としているため、borderColorは機能しません。

数値の代わりに文字列を使用する必要があるかもしれませんが、それは機能します!

layer.cornerRadius
layer.borderWidth
layer.borderColor

更新:layer.masksToBounds = true

例

更新:キーパスに適切なタイプを選択:

ここに画像の説明を入力してください


3
あなたとPeter DeWeeseへ:私はXcode 4.6.3を使用しており、CALayerインターフェイスを実装せずにキーパスタイプを「Color」に設定できます

39
残念ながら、layer.borderColorはこの方法で設定できません。これはCGColorRefですが、そのIB Color値タイプはUIColorです。
mrgrieves 14

12
したがって、これはユーザー定義のランタイム属性が行うことです!ハハ、2011年からiOS向けに書いていて、私はそれらのフィールドが何のためにあるのか全く知りませんでした。この素晴らしい答えをありがとう。
アンディアイバニーズ

3
いいですが、各プロパティに正しいタイプを設定する必要があります。たとえば、「layer.cornerRadius」のタイプは、「文字列」ではなく「数値」に設定する必要があります。
Peter Kreinz、2015

5
また、「境界にクリップ」チェックボックスをオンにして、cornerRadiusを機能させることを忘れないでください。
Pierre-Olivier Simonard

183

Rich86Manの答えは正しいですが、layer.borderColorなどのカテゴリを使用してプロパティをプロキシできます。(ConventionalC CocoaPod から)

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

インターフェースビルダー

layer.borderUIColor

結果は、Xcodeではなく実行時に明らかになります。

編集layer.borderWidth選択した色で境界線を表示するには、少なくとも1 に設定する必要もあります。

Swift 2.0の場合:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.CGColor
        }

        get {
            return UIColor(CGColor: self.borderColor!)
        }
    }
}

Swift 3.0の場合:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.cgColor
        }

        get {
            return UIColor(cgColor: self.borderColor!)
        }
    }
}

これを機能させることができません。.mファイルは、borderColorをborderUIColorにして修正する必要があることをうめきます。そうすると、警告が表示され、実行時に境界線の色がレンダリングされません。私とは少し違うのは、@ CALNameer(NameOfFile)の実装ではなく@ NameOfFileの実装があることです。CALayerの部分がわかりません。もっと詳しく説明してください
Dave Haigh

2
@PeterDeWeeseすばらしい回答です!=)
c-villain

1
実際には、borderWidthでNumberを使用し、NSNumberを受け入れることができます。正常に動作します。
Peter DeWeese 2014年

1
これは、ボーダーカラーの問題を解決するための私の意見では間違いなく最良の解決策です。カテゴリーの素晴らしい使い方!
EricWasTaken 2015

1
スウィフトで働いた!
KOTIOS 16

81

iHulkのものと同様の答えですが、Swiftで

プロジェクトにUIView.swiftという名前のファイルを追加します(またはこれを任意のファイルに貼り付けます)。

import UIKit

@IBDesignable extension UIView {
    @IBInspectable var borderColor: UIColor? {
        set {
            layer.borderColor = newValue?.cgColor
        }
        get {
            guard let color = layer.borderColor else {
                return nil
            }
            return UIColor(cgColor: color)
        }
    }
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

これは、Utilities Panel> Attributes Inspectorのすべてのボタン、imageView、labelなどのInterface Builderで利用できます。

属性インスペクター

注:境界線は実行時にのみ表示されます。


@Gauravどのエラーが表示されますか?どのコンポーネント(UIButton、UILabelなど)で使用していますか?
アクセルギルミン2016

詳細なしでは私はあなたを助けることはできません:(
Axel Guilmin '19

2
@IBDesignable拡張機能の最初から削除するまで、このアプローチでInterface Builderがクラッシュしていました。
Albert Bori 2016年

1
それは素晴らしいです...ありがとう!XCode 8.2.1を使用しています
bobwki 2017年

1
とても便利ですっきり!ありがとう!
Karl-John Chow 2017年

56

あなたはUIViewのカテゴリを作成し、これをカテゴリの.hファイルに追加できます

@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable CGFloat cornerRadius;

これを.mファイルに追加します

@dynamic borderColor,borderWidth,cornerRadius;

そしてこれも同様です。mファイル

-(void)setBorderColor:(UIColor *)borderColor{
    [self.layer setBorderColor:borderColor.CGColor];
}

-(void)setBorderWidth:(CGFloat)borderWidth{
    [self.layer setBorderWidth:borderWidth];
}

-(void)setCornerRadius:(CGFloat)cornerRadius{
    [self.layer setCornerRadius:cornerRadius];
}

これで、すべてのUIViewサブクラス(UILabel、UITextField、UIImageViewなど)のストーリーボードにこれが表示されます。

ここに画像の説明を入力してください

それだけです。カテゴリをどこにもインポートする必要はありません。プロジェクトにカテゴリのファイルを追加し、ストーリーボードでこれらのプロパティを確認するだけです。


2
IBはのdrawRectを使用してカスタムビューを再描画するためにIB_DESIGNABLEとそれを補完する:メソッド developer.apple.com/library/ios/recipes/...
txulu

3
すばらしいです。インターフェイス行の前に.hファイルにIB_DESIGNABLEを書き込んだ場合、.mに@dynamic行を追加する必要はありません
Jasmeet

@ user1618612それは解像度とは何の関係もありません、それは通常のレイヤープロパティを設定しているだけです。
iHulk

11

スウィフト3と4あなたが使用することに喜んでいる場合は、IBInspectableS、これがあります:

@IBDesignable extension UIView {
    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.cgColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

これは私にとって最高のソリューションです
MUCĐồng

素晴らしいソリューション、ありがとうございます
Ebtehal___

7

これによりプロパティが設定される場合がありますが、実際にはIBに反映されません。したがって、もしあなたが本質的にIBでコードを書いているなら、あなたはあなたのソースコードでそれをすることもできます。


1
MVCへようこそ!プロパティをコードに含めてはいけません。
AlejandroIván2016年

2
^これはMVCとは異なります。
Andrew Plummer

1
このコードがコントローラーに入る時間の95%を考慮すると、もちろんそれはMVCでもあります。もちろん、ビューを適切にサブクラス化または拡張してから、コーディングでその構成を正しく行う必要があります:-)
Daniele Bernardini

4

時間を節約したい場合は、2つUIViews重ねて使用します。後ろの1つを境界線の色にし、前の1つを小さくすると、境界線の効果が得られます。私もこれがエレガントな解決策だとは思いませんが、Appleがもう少し気にかけているなら、あなたはこれをする必要はありません。


10
回避策により、現在は時間を節約でき、将来はさらに多くの時間を浪費します。
Lachezar Todorov、2015

0

それlayer.masksToBounds = trueはあなたが物事を設定し、あなたが物事を休ませるときにのみ絶対に可能です。


-1

ここですべての解決策を試してもストーリーボードが機能しない

したがって、常に完璧な答えはコードを使用することです。UIViewのIBOutletインスタンスを作成し、プロパティを追加するだけです。

短い答え :

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

長い答え:

UIView / UIButtonなどの角の丸み

customUIView.layer.cornerRadius = 10

ボーダーの太さ

pcustomUIView.layer.borderWidth = 2

ボーダの色

customUIView.layer.borderColor = UIColor.blue.cgColor

質問は非常に具体的で、Interface Builderからそれを行う方法を尋ねます。あなたの答えは無関係です。
Shinnyx

-5

次の2行の簡単なコードを追加してください:

self.YourViewName.layer.cornerRadius = 15
self.YourViewName.layer.masksToBounds = true

正常に動作します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.