UIButtonで作成したボタンのラベル文字列の外見を変える方法について解説します。

概要

ラベル文字列の外見を変えるには、いくつかの方法があります。

• UIButtonの関数を利用してテキストの色などを変更する
• UIButtonのtitleLabelプロパティを利用して、フォントや文字列の行数などを変更する

UIButtonの関数を利用してテキストの色などを変更する

UIButtonの関数を利用して、ラベル文字列の色や影の色を変更します。

ラベル文字列の色を変更する

setTitleColor:forState:

setTitleColor:forState:関数の公式リファレンス

ラベル文字列の影の色を変更する

setTitleShadowColor:forState:

setTitleShadowColor:forState:関数の公式リファレンス

影の色を設定する場合は、titleLabel.shadowOffsetプロパティを利用して影の表示位置を指定します。

サンプルコード

[ buttonA setTitleColor:[ UIColor redColor ] forState:UIControlStateNormal ];
[ buttonA setTitleShadowColor:[ UIColor grayColor ] forState:UIControlStateNormal ];
buttonA.titleLabel.shadowOffset = CGSizeMake( 1, 1 );

titleLabelプロパティを利用してフォントなどを変更する

titleLabelプロパティを利用して、フォントなどの細かい表示形式を変更することができます。

buttonA.titleLabel.font = [ UIFont fontWithName:@"Zapfino" size:11 ];

titleLabelプロパティの公式リファレンス

titleLabelプロパティはUILabel型です。UILabelの様々なプロパティを利用してラベル文字列の見栄えを変更できます。ただし、UILabel一部のプロパティは設定してもボタンの外見には反映されません。

titleLabelのプロパティ一覧

UILabelの公式リファレンス

サンプル１：フォントや色を変更する

titleLabel.fontプロパティを利用してラベル文字列のフォントを変更できます。また、setTitleColor:forState:関数／setTitleShadowColor:forState:関数でラベル文字列の色／影の色を変更できます。

影の表示位置を指定するtitleLabel.shadowOffsetプロパティは、初期状態で(0,0)となっており初期状態では影が文字の後ろに隠れてしまいます。ラベル文字列の影を表示するには、titleLabel.shadowOffsetプロパティを明示的に指定します。

サンプルコード

UIButton * buttonA = [ UIButton buttonWithType:UIButtonTypeRoundedRect ];
[ buttonA setTitle:@"Font Sample Button" forState:UIControlStateNormal ];
buttonA.titleLabel.font = [ UIFont fontWithName:@"Zapfino" size:11 ];
[ buttonA setTitleColor:[ UIColor redColor ] forState:UIControlStateNormal ];
[ buttonA setTitleShadowColor:[ UIColor grayColor ] forState:UIControlStateNormal ];
buttonA.titleLabel.shadowOffset = CGSizeMake( 1, 1 );

サンプル２：自動的にフォントサイズを調整する

titleLabel.adjustsFontSizeToFitWidthプロパティをYESに設定すると、ラベル文字列の長さに応じて自動的にフォントサイズが調整されます。

titleLabel.minimumFontSizeプロパティには最小フォントサイズを指定します。フォントサイズが自動調整されても、titleLabel.minimumFontSizeで指定したフォントサイズより小さくなりません。

ラベル文字列がボタンをはみ出る場合は、titleLabel.lineBreakModeプロパティで指定された動作でテキストを表示します。たとえばUILineBreakModeTailTruncationを指定するとテキスト末尾を「...」で省略して表示します。

サンプルコード

UIButton * buttonB = [ UIButton buttonWithType:UIButtonTypeRoundedRect ];
[ buttonB setTitle:@"長いテキスト文字列の自動調節 テスト" forState:UIControlStateNormal ];
buttonB.titleLabel.adjustsFontSizeToFitWidth = YES;
buttonB.titleLabel.baselineAdjustment = UIBaselineAdjustmentAlignCenters;
buttonB.titleLabel.minimumFontSize = 8;
buttonB.titleLabel.lineBreakMode = UILineBreakModeTailTruncation;

サンプル３：複数行を表示する

titleLabel.numberOfLinesプロパティに表示したい最大行数を、titleLabel.lineBreakModeプロパティに改行モードを指定すると、ラベル文字列が複数行で表示されます。

サンプルコード

UIButton * buttonC = [ UIButton buttonWithType:UIButtonTypeRoundedRect ];
[ buttonC setTitle:@"複数行のテキスト文字列のサンプル あいうえおかきくけこさしすせそ1234567890"
    forState:UIControlStateNormal ];
buttonC.titleLabel.lineBreakMode = UILineBreakModeWordWrap;
buttonC.titleLabel.numberOfLines = 3;

推奨しないプロパティ(Deprecated)とその代用

iOS 3.0でtitleLabelプロパティが導入されたことにより、以前からあったUIButtonのfont／lineBreakMode／titleShadowOffsetプロパティの利用は非推奨となりました。代わりにtitleLabelのプロパティを利用します。

関連する記事

• UIButtonでボタンを作る
• いろいろな状態のボタンを作成する