UITextFieldボーダー色


133

自分の色をUITextFieldボーダーに設定したいのですが。しかし、これまでのところ、境界線のスタイルのみを変更する方法を見つけることができました。

backgroundプロパティを使用して、次のように背景色を設定しました。

self.textField.backgroundColor = textFieldColor;

しかし、UITextFieldの境界線の色も変更する必要があります。そして、私の質問は、境界線の色を変更する方法についてでした。


役立つ回答はたくさんありますが、私が見つけたキーについて言及したのは1つ(stackoverflow.com/a/5387607/826946)だけでした:textField.borderStyle = UITextField.BorderStyle.none。それがなければ、組み込みの境界線の痕跡が出ます。組み込みの境界線を使用せずに独自の境界線の定義を開始したら、borderStyle = noneを使用して境界線が不要であることを伝え、すべてのパラメーター(color、cornerRadius、およびborderWidth)を定義する必要があるようです
Andy Weinstein

回答:


274

QuartzCoreあなたのクラスにフレームワークをインポートする:

#import <QuartzCore/QuartzCore.h>

境界線の色を変更するには、次のコードスニペットを使用します(私はそれをredColorに設定しています)。

    textField.layer.cornerRadius=8.0f;
    textField.layer.masksToBounds=YES;
    textField.layer.borderColor=[[UIColor redColor]CGColor];
    textField.layer.borderWidth= 1.0f;

元のレイアウトに戻すには、境界線の色をクリアカラーに設定するだけです。

    serverField.layer.borderColor=[[UIColor clearColor]CGColor];

迅速なコードで

    textField.layer.borderWidth = 1
    textField.layer.borderColor = UIColor.whiteColor().CGColor

3
QuartCoreではなく#import <QuartzCore / QuartzCore.h>です(zを忘れた)
cldrr

54
iOS 7では、境界線の幅を設定する必要があります。そうしないと、色が有効になりません。
ミカ2014年

1
初心者としてこれは私には意味がありません。空のアプリを起動した場合は、ストーリーボードに移動してTextViewフィールドを追加します。クォーツコアはどこにインポートしますか?上記の境界幅情報はどこに追加すればよいですか?「textField」とは何ですか。また、どのテキストフィールドについて話しているのか、どのようにしてわかりますか。
Nathan McKaskle 2014年

1
@Sephethusまだ理解していない場合は、これを実行する必要があります。ストーリーボードで作成したテキストフィールドを「接続」し、これらのプロパティをプログラムで変更する必要があります。ストーリーボードを接続したら、コードに移動し(例:)、viewDidLoadこれらのプロパティをself.myTextField.layer.cornerRadius変更するなどして変更します。これらの変更は、アプリを起動するとすぐに有効になりますが、ストーリーボードに変更を表示することはできません。これが意味をなさない場合は、Ray WenderlichなどのWebサイトにアクセスして、初心者向けのチュートリアルを読むことをお勧めします。
アレクサンダー

@NathanMcKaskle クオーツコアはどこからインポートしますか?」ViewController.hファイルの上部に追加します。「「textField」とは何ですか。また、どのテキストフィールドについて話しているのか、どうやって知るのですか?「ローカル」テキストフィールドIBOutlet変数を作成して、ストーリーボードに配置したばかりのTextField(TextViewではない)に接続できます。詳細については、こちらを確認してください。hubpages.com / technology / 「上記のボーダー幅情報はどこに追加すればよいですか?」どこでも、できればviewDidLoad関数。
Chen Li Yong 2016年

21

これを試して:

UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
    theTextFiels.borderStyle=UITextBorderStyleNone;
    theTextFiels.layer.cornerRadius=8.0f;
    theTextFiels.layer.masksToBounds=YES;
        theTextFiels.backgroundColor=[UIColor redColor];
    theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
    theTextFiels.layer.borderWidth= 1.0f;

    [self.view addSubview:theTextFiels];
    [theTextFiels release];

そしてQuartzCoreをインポートします:

#import <QuartzCore/QuartzCore.h>

17

次のクラスをインポートします。

#import <QuartzCore/QuartzCore.h> 

//テキストフィールドの境界線に灰色を設定するためのコード

[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
                                                   green:171.0/255.0
                                                    blue:171.0/255.0
                                                   alpha:1.0] CGColor]];

171.0必要に応じて、それぞれの色番号に置き換えてください。


14

この質問はGoogle検索でかなり高く表示され、ほとんどの部分で機能しました。Salman Zaidiの答えがiOS 7に対して部分的に正しいことがわかりました。

「元に戻す」コードに変更を加える必要があります。私は元に戻すための以下が完全に機能することを発見しました:

textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;

これはiOS 7の変更が原因である可能性が最も高いと理解しています。


10

受け入れられた回答からこのアクションを簡略化するために、カテゴリを作成することもできますUIView(これはテキストフィールドだけでなく、UIViewのすべてのサブクラスで機能するためです:

UIView + Additions.h:

#import <Foundation/Foundation.h>

@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width 
                   radius:(float)radius;
@end

UIView + Additions.m:

#import "UIView+Additions.h"

@implementation UIView (Additions)

- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width
                   radius:(float)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    self.layer.borderColor = [color CGColor];
    self.layer.borderWidth = width;
}

@end

使用法:

#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
                       width:1.0f
                      radius:8.0f];

9

角が丸いTextFieldを使用する場合は、次のコードを使用します。

    self.TextField.layer.cornerRadius=8.0f;
    self.TextField.layer.masksToBounds=YES;
    self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
    self.TextField.layer.borderWidth= 1.0f;

境界線を削除するには:

self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];

8

Swift 5.0のアップデート

textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 1.0

4

ボーダの色任意のビュー(またはUIViewサブクラス)のは、少しのコーディングでストーリーボードを使用して設定することもできます。この方法は、複数のUIオブジェクトで境界線の色を設定する場合に非常に便利です。

以下はそれを達成する方法のステップです、

  1. CALayerクラスにカテゴリを作成します。型のプロパティを宣言UIColorを、適当な名前で、私はそれに名前を付けますborderUIColor
  2. このプロパティのセッターとゲッターを記述します。
  3. 'Setter'メソッドでは、レイヤーの "borderColor"プロパティを新しい色のCGColor値に設定するだけです。
  4. 'Getter'メソッドで、レイヤーのborderColorを含むUIColorを返します。

PS:カテゴリにプロパティを格納することはできません。'borderUIColor'は計算されたプロパティとして使用されます。これは、私たちが焦点を当てていることを達成するための参照としてのみ使用されます。

以下のコードサンプルをご覧ください。

目的C:

インターフェースファイル:

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

@interface CALayer (BorderProperties)

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

@end

実装ファイル:

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

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

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

@end

Swift 2.0:

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

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

最後に、ストーリーボード/ XIBに移動し、残りの手順に従います。

  1. 境界線の色を設定するビューオブジェクトをクリックします。
  2. 「ユーティリティ」(画面右側)パネルの「IDインスペクタ」(左から3番目)をクリックします。
  3. [ユーザー定義のランタイム属性]で、[+]ボタンをクリックしてキーパスを追加します。
  4. キーパスのタイプを「カラー」に設定します。
  5. キーパスの値を「layer.borderUIColor」と入力します。[これがあるべき覚えている変数名ではない、あなたは、カテゴリ内で宣言BORDERCOLORここでのborderUIColor ]。
  6. 最後に、好きな色を選びました。

境界線の色を表示するには、layer.borderWidthプロパティの値を少なくとも1 に設定する必要があります。

ビルドして実行します。ハッピーコーディング。:)


複数の質問に同じ回答を投稿しないでください。良い答えを1つ投稿してから、投票またはフラグを立てて、他の質問を重複として閉じます。質問が重複していない場合は、質問に対する回答を調整してください
josliber

1

これがSwiftの実装です。必要に応じて、他のビューで使用できるように拡張を行うことができます。

extension UIView {
    func addBorderAndColor(color: UIColor, width: CGFloat, corner_radius: CGFloat = 0, clipsToBounds: Bool = false) {
        self.layer.borderWidth  = width
        self.layer.borderColor  = color.cgColor
        self.layer.cornerRadius = corner_radius
        self.clipsToBounds      = clipsToBounds
    }
}

次のように呼び出します email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true)

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