前回までのプログラミング学習レシピに引き続き、2回目の勉強内容です。
第２回 「UILabel編」
■ まずはテキスト表示から
UI、つまりユーザインターフェイスの構築においては、なんといっても文字の表示が大事です。もちろん文字を全く使わずにアプリの操作方法をユーザに完璧に知らせることができればそれが一番理想的ですが、なかなかそうは行きません。最低限の文字をきちんと表示してユーザをやさしく導くのが現実的な方法です。
UIKitフレームワークでは文字列表示を扱うクラスがいくつかありますが、今回はUILabelを取り上げます。他のクラス、UITextFieldやUITextViewなどがキーボードからの入力をサポートしているのに対し、UILabelは表示に特化した機能が充実しています。
UILabelのさまざまな機能を知るために、テンプレートから新規プロジェクトを作成してラベルだけを表示してみましょう。
■ Storyboardでいろんな設定を試そう
まず新規プロジェクト作成時、テンプレートは「Single View Application」を選択する、と前回説明しました。このテンプレートでは、はじめから１つのUIViewControllerクラスのオブジェクトと、その上に１枚のUIViewクラスのオブジェクトが配置されています。ですからまずやるべきことは、その１枚のViewの上にいろんなラベル、つまりUILabelクラスのオブジェクトをペタペタ貼って、その設定を色々変えながらどんな表示になるかを確認することです。その過程でUILabelの機能を習得していきます。
前回の図を再掲します。新規プロジェクト作成時のStoryboardは以下のようになっています。
図. Storyboardのデフォルト状態。View ControllerとViewが既に配置されている。
次にオブジェクト・ライブラリからLabelを選んで、Viewに向かってControlキーを押しながらドラッグします。
図. Labelの配置作業。
Storyboard上にひとつのラベルが現れました。これはUILabelクラスのオブジェクトになります。デフォルトで「Label」という文字が小さく表示されています。
次にこの文字を色々変化させてみましょう。まずはハンドルがあるので引っ張ってみましょう。伸びたり縮んだりします。
図. Labelの大きさ変更。８ヶ所のハンドルを操作する。文字列の大きさは変わらない。
ここでは表示領域の大きさを変更しています。領域の変更なので、現在のところハンドルを引っ張っても文字の大きさは変わりません。
縮め過ぎて文字列が表示領域に入りきらなくなってしまった場合は、「…」という文字が表示されます。
図. 表示領域が小さ過ぎる場合。
次に設定を変えてみましょう。画面の右側、Attributes inspectorの部分を上から順に見て行きます。
図. LabelのAttributes inspector画面。今回は赤で囲まれている順に説明。
まずは「Text」プルダウンメニューです。デフォルトは「Plain」で、そのままの表示。「Attributed」を選ぶと、その下に新たに属性を指定できる画面が出てきますが、「Attributed」で増えた分については後述します。ここではまず「Plain」の時の設定値を説明します。
図. プルダウンメニューでPlainを選択。
「Text」の下段はラベルの文字列です。現在「Label」という文字列がデフォルトで入っています。一行しかありませんが、たくさん書くこともできます。
その下は「Color」です。文字列の色を指定します。
色の部分をクリックするとカラーパレットが開きます。上に５つのボタンが有り、パレットの種類が選べます。つまり色の選び方が５種類あるということです。とてもわかりやすいユーザインターフェイスなので、色々と試してみましょう。下部の「Opacity」は透明度です。
図. Color選択時に表示されるカラーパレット。左上から５種類のパレットを選択できる。
また、「Color」の右端、上下向き三角の部分をクリックすると、候補を絞った色の選択肢がでてきます。よく使う色ならばこちらからの方が選びやすいです。
次は「Font」です。フォントの設定をします。右端の上下スイッチでフォントサイズのみ増減できます。「T」のアイコンをクリックするとフォントの種類なども設定できるパレットが出てきます。
図. フォント選択画面。「Font」欄の右側の「T」アイコンをクリックする。
おおよそ操作方法はわかったと思います。あとは残りの項目もどんどん試してみましょう。説明だけあげておきます。
次の「Alignment」では、文字揃えの方法を選択します。それぞれのボタンの意味は、マウスポインタを近づけると表示されます。左から
- Align Left ・・・ 左揃え
- Align Center ・・・ 中央揃え
- Align Right ・・・ 右揃え
となります。
「Lines」は行数です。ラベルの大きさを縦方向に伸ばすと、文字数が多い場合に改行します。文字数が多すぎてこの行数に収まらない場合は、やはり「…」が出ます。なお、 「Lines」を「0」に設定すると、領域の大きさに表示できる最大行になります。
図. 複数行のラベル。行数を可変にする場合は「Lines」を「0」にする。
「Behavior」の「Enabled」は通常チェックをしておきます。チェックを外すとラベルの文字が薄くなります。グレイアウトなどともいいますね。これをStoryboardで設定することはあまりないと思います。プログラム実行中に一部の機能を効かせなくすることがありますね。例えばカメラのフラッシュがない機種でフラッシュを有効にするボタンを使えないようにする、それを示すためにボタンのラベル表示をグレイアウトすることがあります。そういった場合にはラベルオブジェクトのenabledプロパティをNOにすることによってグレイアウトすることができます。
次の「Highlighted」は、逆に通常はチェックを外しておきます。後述の「Highlighted」（ハイライトカラー）で設定したカラーを確認したい時にのみチェックします。確認したらすぐに戻しておきましょう。
「Baseline」は後述の「Autoshrink」でラベル領域の縮小時に文字の自動縮小を設定した場合、文字列の縦位置をどこに合わせるかを指定します。
- Align Baselines ・・・ 文字列のベースラインに合わせる。
- Align Centers ・・・ 文字列の中央に合わせる。
- None ・・・ 文字列の左上角に合わせる。
これは後述の「Autoshrink」で実際に自動縮小設定をして、やや大きめのフォントサイズの文字列を用意し、領域を縮小して確認することをおすすめします。
「Line Breaks」は領域を超えてはみ出た文字列の処理と、改行のし方を設定します。
- Clip ・・・ はみ出た文字列の後方をカット。
- Chracter Wrap ・・・ 文字列の途中で改行。
- Word Wrap ・・・ 半角文字列の場合、単語の切れ目で改行。
- Truncate Head ・・・ はみ出た文字列の最終表示行の先頭をカットし、「…」を表示。
- Truncate Middle ・・・ はみ出た文字列の最終表示行の中央をカットし、「…」を表示。
- Truncate Tail ・・・ はみ出た文字列の最終表示行の後方をカットし、「…」を表示。
ただし、「Character Wrap」は筆者の環境では機能しませんでした。改行ルールはすべて「Word Wrap」になってしまいます。原因は不明です。ネット上では「カスタムフォントの場合Character Wrapが効かない」という声も上がっているようですが、筆者の環境ではシステムフォントの場合も同様でした。
なお、「Word Wrap」は全角文字では効きません。すべて文字列の途中で改行されてしまいます。また半角であれば半角カナ文字でも「Word Wrap」は効きます。
「Autoshrink」は、はみ出た時のフォント縮小動作を設定します。ただし上の「Line Breaks」が「Character Wrap」または「Word Wrap」で、「Lines」が「1」以外、の時は機能しません（筆者の環境にて）。
- Fixed Font Size ・・・ フォントサイズを縮小せず固定。はみ出しっぱなし。
- Minimum Font Scale ・・・ 全表示できるように、フォントサイズを縮小。だたし指定倍率未満の縮小はしない。
- Minimum Font Size ・・・ 全表示できるように、フォントサイズを縮小。ただし指定サイズ以下の縮小はしない。
目一杯縮小してもはみ出てしまう場合は、「Line Breaks」の指定にしたがって表示されます。なお、この「Autoshrink」欄にある「Tighten Letter Spacing」項目はオフにしておきましょう。縮小時に文字間隔を詰める設定ですが、関連するメソッドがiOS7で非推奨になっているので、触れないほうが良さそうです。なぜXcode5のStoryboardに残っているのかは不明です。
「Highlighted」ではハイライトカラーを指定します。プログラム実行中に文字列をハイライト表示したい時に、ラベルオブジェクトのhighlightedプロパティをYESにすると、文字色がこのハイライトカラーになります。カラーパレットの使い方はもうわかりますね。
「Shadow」は影付き文字の設定です。まず影の色の設定ができます。「Shadow Offset」は文字から影までの距離で、「Horizontal」が水平方向、「Vertical」が垂直方向です。これらは試してみればすぐに効果がわかりますね。
ここから下、「View」欄が続くのですが、これはUILabelクラスがUIViewを継承しているため、UIViewオブジェクトの属性をここでも設定できるわけです。この欄についてはいずれUIView編の際に説明することにしましょう。
■ Attributed Stringについて
さてここで一番上に戻って、「Label」の「Text」プルダウンメニューを「Attributed」に設定してみましょう。すると表示が少しだけ変わります。
図. Attributed選択時の画面。文字揃えの項目が増えている。右端が拡張ボタン。
ここでは文字揃えの設定項目が増えていることがわかります。「Align Justfied」や「Align Natural」ボタンがありますが、実はこれらのボタンは機能しません。「Align Justified」は両端揃えを示していますが、これはUILabelでは不可能です（筆者の環境にて）。今後説明するUITextViewでは機能します。Storyboardでは得てしてこういったボタンもあったりするので注意しましょう。
そしてさらにここの右端の下向き三角をクリックすると、突然多くの設定項目が出てきます。
図. Attrituted Stringの属性設定画面。
なんとこれらの設定項目は、ほとんどUILabelでは機能しません。一部機能しますが、非常に操作性が悪く、おそらく初心者が操作すると画面がどんどん崩れ去る一方だと思います。実はこの画面ではNSAttributedStringクラスの属性を文字列に対して指定できるようになっているのですが、それらの属性はほとんどUILabelクラスでは意味を成しません。そもそもUILabelは長い文字列を表示するためのものではなく、シンプルな機能説明などに使われるものです。文章表現はUITextViewなどの仕事です。でもそうするとこの画面の位置づけが「？」ですね。
ただしこのNSAttributedStringクラスはユーザインターフェイス表現を拡張していく役割も担っているので、ここは今後のiOSとXcodeの進化に期待することにしましょう。実際にUIKitでのNSAttributedStringの適用は広がっていっているのです。というわけで、とりあえず今回はこの画面には触れないことにします。
ここまでお疲れさまでした。いろんな設定を試してみることで、UILabelの機能も理解できたことと思います。今後もこんな感じでいろんなUIKitパーツを使い倒していきましょう。機能の隅々まで知っていれば、UI構築の際に大いに役立つことでしょう。
