ボタンのラベルの外見を変える

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

サンプルコードの実行例

概要

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

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

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

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

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

クラス
UIButton
関数
setTitleColor:forState:

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

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

クラス
UIButton
関数
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プロパティを利用して、フォントなどの細かい表示形式を変更することができます。

クラス
UIButton
プロパティ
titleLabel
利用例
buttonA.titleLabel.font = [ UIFont fontWithName:@"Zapfino" size:11 ];

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

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

titleLabelのプロパティ一覧

UILabelのプロパティ説明UIButtonでの利用可否
textラベル文字列不可。UIButtonのsetTitle:forState:関数を利用する
fontフォント利用可能
textColor文字列の色不可。UIButtonのsetTitleColor:forState:関数を利用する
textAlignment文字列の表示位置不可。
lineBreakMode改行モード利用可能
adjustsFontSizeToFitWidthフォント自動縮小利用可能
baselineAdjustmentフォント自動縮小時の配置位置利用可能
minimumFontSizeフォント自動縮小時の最小フォントサイズ利用可能
numberOfLines行数利用可能
highlightedTextColorハイライト時の文字列の色不可。UIButtonのsetTitleColor:forState:関数を利用する
shadowColor文字列の影の色不可。UIButtonのsetTitleShadowColor:forState:関数を利用する
shadowOffset文字列の影の表示位置利用可能

UILabelの公式リファレンス

サンプル1:フォントや色を変更する

UIButtonのフォントや色を変更した例

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 );

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

UIButtonの自動的にフォントサイズを調整する例

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

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

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

UIButtonの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;

サンプル3:複数行を表示する

UIButtonのラベル文字列を複数行にする例

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.fontUIButton.titleLabel.font
UIButton.lineBreakModeUIButton.titleLabel.lineBreakMode
UIButton.titleShadowOffsetUIButton.titleLabel.shadowOffset

関連する記事