Xcode で、ラベル、テキストビュー、ボタンの書式をいろいろといじる

テキスト関連

今回の、Xcode で作る iPhone アプリのちょっとしたノウハウは、テキスト関連の処理について。
ラベル（UILabel）とか、テキストビュー（UITextView）とか、ボタン（UIButton）なんかは画面作成でよく使う項目で、いろいろなことをしてみたくなるところでもあります。
ということで、今回は、UILabel や UITextView における改行文字の入力方法や UILabel の複数行表示方法と、UILabel や UITextView の角丸設定や、UIButton の背景色設定に必要な一工夫なんかをまとめてみます。

今回のサンプル

今回のサンプルは、以下のような画面。
水色がラベル、緑色がテキストビュー、白色がボタンとなっております。

f:id:dzd12061:20130707200341p:image:w360

改行

まず最初は、UILabel や UITextView などにおける改行コードの入れ方について。
表示をきれいにするためには、改行を入れたくなるのですが、コード上で改行を入れるには、[＼n]と入力しないといけない。
このバックスラッシュは、Xcode上では、[option]ボタンを押しながら、[\]キーを押すと入力することが出来る。続けて[n]を入れると改行コードとなる。具体的には、以下のような感じ。
（Storyboard上で直接改行コードを入力するには、[option]ボタンを押しながら[return]を押せばいい）。

    NSString *a = @"testA";
    NSString *b = @"testB";
    self.textLabel.text = [NSString stringWithFormat:@"%@\n%@",a,b]; //Xcode画面上では[\]ではなく[＼]
    self.textView.text = [a stringByAppendingFormat:@"\n%@",b];//Xcode画面上では[\]ではなく[＼]
    self.textButton.titleLabel.text =  a;

これを実行すると、以下のような感じ。

なお、UILabel を複数行表示出来るようにするには、一つ前準備が必要。
Storyboard の対象のラベルを選択して、ラベルのプロパティにある[Lines]を設定する必要がある。行数そのものを入れてもいいし、[0]をいれるてもよい。

ちなみに、UIButton を複数行にするのは、結構いろいろとまた別の方法になるので、ボタンのみ1行のサンプルになっています。

角丸にする

これだけだと、なんだか寂しいので、いろいろと形状に装飾を加えたくなる。
UILabel や UITextView などで角丸などを設定するには、まずは、対象の「***.m」ファイルの参照として、下記の記述を追記する。

#import <QuartzCore/QuartzCore.h>

これで角丸なんかが設定可能な状態になって、さらに、プログラムの[- (void)viewDidLoad]あたりに、以下のように記述する。

	//Label の書式を変更
    self.textLabel.textColor = [UIColor whiteColor];  //テキストの色設定
    self.textLabel.backgroundColor  = [UIColor  colorWithRed:0.4 green:0.4 blue:1 alpha:1.0];  //背景色設定
    [self.textLabel.layer setCornerRadius:8.0f];  //角丸設定
    [self.textLabel.layer setBorderWidth:1.5f];  //枠線幅設定
    [self.textLabel.layer setBorderColor:[[UIColor blackColor] CGColor]];  //枠線色設定
    
    //text Field の書式を変更
    self.textView.textColor = [UIColor blackColor];  //テキストの色設定
    self.textView.backgroundColor = [UIColor greenColor];  //背景色設定
    [self.textView.layer setCornerRadius:8.0f];  //角丸設定
    [self.textView.layer setBorderColor: [[[UIColor blackColor] colorWithAlphaComponent:0.5] CGColor]];  //枠線色設定
    [self.textView.layer setBorderWidth: 1.5f];  //枠線幅設定

すると下記のような感じになる。

UIButton で背景色を変えつつ角丸

UIButton の場合は、角丸などを設定するだけであれば上記と同様な手順でうまく行く（というか、普通は最初から角丸）。
しかし、UIButton で背景色を変えつつ角丸の状態を作る場合には、少し手順が必要です。
まずは、Storyboard の対象のボタンを選択して、プロパティの項目で[Type]の項目を、[Custom]に変更しておく。

f:id:dzd12061:20130707200346p:image:medium

これで、プログラムの[- (void)viewDidLoad]あたりに、下記のように記述する。

    //button の書式を変更
    self.textButton.titleLabel.textColor = [UIColor blueColor];  //テキストの色設定
    self.textButton.titleLabel.textAlignment = NSTextAlignmentCenter;  //テキスト位置の設定
    [self.textButton.layer setBackgroundColor:[[UIColor redColor] CGColor]]; //背景色設定
    [self.textButton setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateNormal]; //文字の影色設定
    self.textButton.titleLabel.shadowOffset = CGSizeMake( 1, 1 ); //影の位置設定
    [[self.textButton layer] setCornerRadius:8.0f];  //角丸設定
    [[self.textButton layer] setBorderColor:[[UIColor colorWithRed:0.4 green:0.4 blue:0.4 alpha:1.0] CGColor]];  //枠線色設定
    [[self.textButton layer] setBorderWidth:1.5f];  //枠線幅設定
    self.textButton.titleLabel.text =  a;  //最後にテキストの内容を設定

すると下記のような感じになる。