丸みを帯びた四角形のテキストフィールドのようにUITextviewをスタイルする方法


170

テキストビューをコメント作成者として使用しています。

プロパティインスペクターでは、ボーダースタイルのプロパティのようなものが見つからないため、のような丸い四角形を使用できUITextFieldます。

だから、問題は:丸みを帯びた四角形でaのUITextViewようなをスタイルするにはどうすればよいUITextFieldですか?


1
使えないのにUITextField電源を切っていただけませんuserInteractionEnabledか?
ジョーイ2013

回答:


285

暗黙的なスタイルを選択する必要はありません。QuartzCoreフレームワークを使用してコードを少し書く必要があります。

//first, you
#import <QuartzCore/QuartzCore.h>

//.....

//Here I add a UITextView in code, it will work if it's added in IB too
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];

//To make the border look very close to a UITextField
[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
[textView.layer setBorderWidth:2.0];

//The rounded corner part, where you specify your view's corner radius:
textView.layer.cornerRadius = 5;
textView.clipsToBounds = YES;

OS 3.0以上でのみ動作しますが、とにかく、事実上のプラットフォームになっていると思います。


47
上記のコードに次のコードを追加すると、境界線がUITextFieldに非常に近くなります。[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; [textView.layer setBorderWidth:2.0];
Rob

12
#import <QuartzCore / QuartzCore.h>が必要です。QuartzCoreをインポートしなかったために問題が発生しました
2011年

1
私のようなn00bsの場合、注目に値します:このコードをinitWithNibNameではなくviewDidLoadに入れます:-)
Brian Colavito

1
プロパティをに設定してa UITextFieldを使用するだけです-以下の私の投稿を参照してください。borderStyleUITextBorderStyleRoundedRect
ジョウイ2013

5
iOS 7-1.0のborderWidthと.2のalphaはデフォルトのスタイルで動作します。
Kalel Wade、2014

77

このコードは私にとってうまくいきました:

    [yourTextView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
    [yourTextView.layer setBorderColor: [[UIColor grayColor] CGColor]];
    [yourTextView.layer setBorderWidth: 1.0];
    [yourTextView.layer setCornerRadius:8.0f];
    [yourTextView.layer setMasksToBounds:YES];

4
5pxはテキストフィールドに近いと思いますが、この回答の灰色は選択した回答よりも優れています。
Peter DeWeese、2011

2
もちろん、この回答にQuartzCore Frameworkを追加し、#import <QuartzCore / QuartzCore.h>でインポートする必要があります
lukaswelte 2013年

36

Swift 3バージョン

インターフェイスビルダーでテキストビューを設定した後。

@IBOutlet weak var textView: UITextView!

override func viewDidLoad() {
    super.viewDidLoad()
    textView.layer.cornerRadius = 5     
    textView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
    textView.layer.borderWidth = 0.5  
    textView.clipsToBounds = true
}

Swift 2.2バージョン

@IBOutlet weak var textView: UITextView!

override func viewDidLoad() {
    super.viewDidLoad()
    textView.layer.cornerRadius = 5     
    textView.layer.borderColor = UIColor.grayColor().colorWithAlphaComponent(0.5).CGColor
    textView.layer.borderWidth = 0.5  
    textView.clipsToBounds = true
}

1
問題は、それが正確に灰色ではないということです。UITextFieldのフレームの色は少し異なります。
Makalele 2017年

1
それは私がiOSの11に見近い現在のスタイルに見える.borderWidth = 0.7になり作る
クリスAmelinckx

28

編集:インポートする必要があります

#import <QuartzCore/QuartzCore.h>

コーナー半径を使用するため。

これを試してください、確実に機能します

UITextView* txtView = [[UITextView alloc] initWithFrame:CGRectMake(50, 50, 300, 100)];
txtView.layer.cornerRadius = 5.0;
txtView.clipsToBounds = YES;

Robが境界線の色を同じようUITextFieldにしたい場合は、境界線の幅を2.0に変更し、次の行を追加して色を灰色に変更する必要があることを確認したので、

[textView.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]]; 
[textView.layer setBorderWidth:2.0];

2
なぜこれがうまくいかないのかと思っていました。QuartzCoreに関するヒントをありがとう。
Echilon

23

私は本物の取引が欲しかったのでUIImageView、のサブビューとして追加しUITextViewます。これはUITextField、上から下へのグラデーションを含む、のネイティブの境界線と一致します。

textView.backgroundColor = [UIColor clearColor];
UIImageView *borderView = [[UIImageView alloc] initWithFrame: CGRectMake(0, 0, textView.frame.size.width, textView.frame.size.height)];
borderView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
UIImage *textFieldImage = [[UIImage imageNamed:@"TextField.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 8, 15, 8)];
borderView.image = textFieldImage;
[textField addSubview: borderView];
[textField sendSubviewToBack: borderView];

これらは私が使用する画像です:

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


2
また、XCodeでUITextBorderStyle Noneを設定していない場合は、textViewにUITextBorderStyle Noneを設定する必要があると思います
超論理的な

1
私はpng画像を再アップロードしました
Ben Packard

5
UITextViewをスクロールすると、背景が移動します。すべて親UIViewに配置する必要があると思います。
Oliver Pearmain 2013

1
優れた。D:ルックス素晴らしいこと
Sune Trudslev

12

1つの解決策は、UITextViewの下にUITextField追加しUITextView背景を透明にして、でのユーザー操作を無効にすることUITextFieldです。次に、コードでUITextFieldそのようなものでフレームを変更します

self.textField.frame = CGRectInset(self.textView.frame, 0, -2);

テキストフィールドとまったく同じ外観になります。

そして、Jonによって提案されているように、このコード[UIViewController viewDidLayoutSubviews]をiOS 5.0以降の内部に配置する必要があります。


1
これはとてもシンプルで、私が望んでいたとおりに見えます。UITextFieldのフレームをUITextViewに一致させました。CGRectframe = self.myTextView.frame; frame.size.height + = 2; self.myTextField.frame = frame;
ブイインブライアン

1
素敵な答え。クリーンでシンプル。viewDidLayoutSubviews:(iOS 5.0以降)にコードを挿入します。
2013年

1
いいですね、これは私が最後に行ったソルンでした。私はジョンさんのコメントを再使用するまで、それは仕事をしなかったことを注意:viewDidLayoutSubviews:
daver

1
これが最速で、見た目も最高です。
Weston

5

最良の効果を得るには、カスタムの(伸縮可能な)背景画像を使用する必要があります。これは、UITextFieldの丸みを帯びた境界が描画される方法でもあります。


4

プログラミングせずにそれを行うことがわかった1つの方法は、テキストフィールドの背景を透明にし、その後ろに丸い四角形のボタンを配置することです。必ずボタンの設定を変更して無効にし、チェックDisable adjusts imageボックスをオフにしてください。


4

DCKitと呼ばれる私のライブラリをチェックしてみてください。

直接UIViewから角の丸いテキストビュー(およびテキストフィールド/ボタン/プレーン)を作成することができますInterface Builder

DCKit:ボーダー付きのUITextView

また、検証付きのテキストフィールド、境界線付きのコントロール、破線の境界線、円やヘアラインビューなど、他にも多くの便利な機能があります。


4

これについてはすでにたくさんの答えがあることは知っていますが、実際には十分ではありませんでした(少なくともSwiftでは)。UITextFieldと同じ正確な境界線を提供するソリューションが必要でした(現在のように見える近似されたものではなく、まったく同じように見え、常に同じように見えるものです)。UITextFieldを使用して背景のUITextViewをバックアップする必要がありましたが、毎回個別に作成する必要はありませんでした。

以下のソリューションは、ボーダーに独自のUITextFieldを提供するUITextViewです。これは私の完全なソリューションのトリミングされたバージョンであり(これは同様の方法でUITextViewに「プレースホルダー」サポートを追加します)、ここに投稿されました:https ://stackoverflow.com/a/36561236/1227119

// This class implements a UITextView that has a UITextField behind it, where the 
// UITextField provides the border.
//
class TextView : UITextView, UITextViewDelegate
{
    var textField = TextField();

    required init?(coder: NSCoder)
    {
        fatalError("This class doesn't support NSCoding.")
    }

    override init(frame: CGRect, textContainer: NSTextContainer?)
    {
        super.init(frame: frame, textContainer: textContainer);

        self.delegate = self;

        // Create a background TextField with clear (invisible) text and disabled
        self.textField.borderStyle = UITextBorderStyle.RoundedRect;
        self.textField.textColor = UIColor.clearColor();
        self.textField.userInteractionEnabled = false;

        self.addSubview(textField);
        self.sendSubviewToBack(textField);
    }

    convenience init()
    {
        self.init(frame: CGRectZero, textContainer: nil)
    }

    override func layoutSubviews()
    {
        super.layoutSubviews()
        // Do not scroll the background textView
        self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
    }

    // UITextViewDelegate - Note: If you replace delegate, your delegate must call this
    func scrollViewDidScroll(scrollView: UIScrollView)
    {
        // Do not scroll the background textView
        self.textField.frame = CGRectMake(0, self.contentOffset.y, self.frame.width, self.frame.height);
    }        
}

3

プログラミングせずにそれを行うことがわかった1つの方法は、テキストフィールドの背景を透明にし、その後ろに丸い四角形のボタンを配置することです。ボタンの設定を変更して無効にし、[画像の調整を無効にする]チェックボックスをオフにしてください。

Quartzcoreコードを試してみたところ、古い3G(テストに使用)で遅延が発生することがわかりました。大きな問題ではありませんが、さまざまなiosとハードウェアについて可能な限り包括的にしたい場合は、上記のAndrew_Lの回答をお勧めします。または、独自のイメージを作成して、それに応じて適用してください。


3

UITextViewiPhoneのメッセージアプリでテキストメッセージを送信するために使用されるものと同じ素晴らしい背景画像があります。入手して変更するには、Adobe Illustratorが必要です。 iphone uiベクトル要素


3
#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad{
  UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(50, 220, 200, 100)];
  textView.layer.cornerRadius = 5;
  textView.clipsToBounds = YES;
  [textView.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
  [textView.layer setBorderColor: [[UIColor grayColor] CGColor]];
  [textView.layer setBorderWidth: 1.0];
  [textView.layer setCornerRadius:8.0f];
  [textView.layer setMasksToBounds:YES];
  [self.view addSubView:textview];
}

2

次のように、テキストビューの上にイベントを受け入れないテキストフィールドを作成できます。

CGRect frameRect = descriptionTextField.frame;
frameRect.size.height = 50;
descriptionTextField.frame = frameRect;
descriptionTextView.frame = frameRect;
descriptionTextField.backgroundColor = [UIColor clearColor];
descriptionTextField.enabled = NO;
descriptionTextView.layer.cornerRadius = 5;
descriptionTextView.clipsToBounds = YES;

または、インターフェイスビルダーでテキストフィールドを作成します。次に、コードで高さを設定します(インターフェイスビルダーでは許可されないため)。CGRect frameRect = self.textField.frame; frameRect.size.height = 50; self.textField.frame = frameRect;
audub

2

コントローラーコードをクリーンに保ちたい場合は、以下のようにUITextViewをサブクラス化し、インターフェイスビルダーでクラス名を変更できます。

RoundTextView.h

#import <UIKit/UIKit.h>
@interface RoundTextView : UITextView
@end

RoundTextView.m

#import "RoundTextView.h"
#import <QuartzCore/QuartzCore.h>
@implementation RoundTextView
-(id) initWithCoder:(NSCoder *)aDecoder {
    if (self = [super initWithCoder:aDecoder]) {
        [self.layer setBorderColor:[[[UIColor grayColor] colorWithAlphaComponent:0.333] CGColor]];
        [self.layer setBorderWidth:1.0];
        self.layer.cornerRadius = 5;
        self.clipsToBounds = YES;
    }
    return self;
}
@end

1

これが私の解決策です:

- (void)viewDidLoad {
    [super viewDidLoad];


    self.textView.text = self.messagePlaceholderText;
    self.textView.layer.backgroundColor = [[UIColor whiteColor] CGColor];
    self.textView.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.3] CGColor];
    self.textView.layer.borderWidth = 0.5;
    self.textView.layer.cornerRadius = 5.5f;
    self.textView.layer.masksToBounds = YES;
    self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
}

- (void)textViewDidBeginEditing:(UITextView *)textView {
    if (textView == self.tvMessage) {
        // Delete placeholder text
        if ([self.textView.text isEqualToString:self.messagePlaceholderText]) {
            self.textView.text = @"";
            self.textView.textColor = [UIColor blackColor];
        }
    }
}

- (void)textViewDidEndEditing:(UITextView *)textView {
    if (textView == self.tvMessage) {
        // Write placeholder text
        if (self.textView.text.length == 0) {
            self.textView.text = self.messagePlaceholderText;
            self.textView.textColor = [[UIColor grayColor] colorWithAlphaComponent:0.4];
        }
    }
}

0

可能だとは思いません。ただしUITableView、1つのセクションと1つの空のセルで(グループ化して)実行し、のコンテナとして使用できますUITextView


0

これは古い質問です。この質問の回答も検索しました。luvieeresの答えは100%正解で、後でRobがコードを追加しました。それは素晴らしいですが、私は別の質問の回答でサードパーティを見つけました。私はUITextFieldoverの類似した外観を検索しただけでなくUITextView、複数行のサポートも検索しました。ChatInputSampleは両方を満たしました。だからこそ、このサードパーティは他の人に役立つかもしれないと思います。また、ティムールのおかげで、彼はこのオープンソースについてここで触れまし


0

iOS7では、次はUITextFieldの境界に完全に一致します(少なくとも私の目では)。

textField.layer.borderColor = [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor];
textField.layer.borderWidth = 0.5;
textField.layer.cornerRadius = 5;
textField.clipsToBounds = YES;

特別なものをインポートする必要はありません。

@uvieereと@hanumanDevに感謝します。


-1

どうですか:

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(20, 20, 280, 32)];
textField.borderStyle = UITextBorderStyleRoundedRect;
[self addSubview:textField];

質問はtextviewについてです。
Azik Abdullah 2013

申し訳ありません-幸せなスタック応答をトリガーしてください。彼らが単にUITextFieldwith userInteractionEnabledset toを使用できない理由を知りたいと思うでしょうNO
ジョーイ2013

テキストフィールドが複数行をサポートしていません
Azikアブドラ

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