[UIKit][UILabel] 背景色、枠線、角丸の設定をするには?

はじめに

今回は UILabel に背景色や枠線、角丸の設定をする方法について説明します。

環境

Xcode: 10.2

Swift: 5.0

背景色の設定

背景色の設定は backgroundColor プロパティを使用します。

backgroundColor プロパティには UIColorクラスの値を設定します。

例えば、Cyan を設定したい場合は以下のようにします。

self.myLabel.backgroundColor = UIColor.cyan // 背景色

枠線の設定

枠線を作成するには layer.borderWidth プロパティに枠線の太さを設定し、色を設定するには layer.borderColor プロパティを使用します。

layer.borderColor プロパティには cgColor 値を設定する必要があります。

例えば、枠線の幅を2、色を red にしたい場合は以下のようにします。

self.myLabel.layer.borderWidth = 2.0    // 枠線の幅
self.myLabel.layer.borderColor = UIColor.red.cgColor    // 枠線の色

角丸の設定

角丸にするには、layer.cornerRadius プロパティに角の半径を指定します。また clipsToBound プロパティに true を指定しないと角丸にならないので注意が必要です。

以下は、角の半径を 20 に設定する例です。

self.myLabel.layer.cornerRadius = 20.0      // 角の半径
self.myLabel.clipsToBounds = true           // この設定を入れないと角丸にならない

実行例

上記のコードの実行例を以下に示します。

実行例

[UIKit][UILabel] テキストを表示するには?

はじめに

今回はUILabelを使用してテキストを表示する方法について説明します。

テキストを操作するにはTextプロパティの設定で行うことができますが、Attributes Inspector のTextプロパティには「Plain」と「Attributed」の2種類から選択することができますので併せて説明をします。

環境

Xcode: 10.2

Swift: 5.0

目次

  1. Plain によるテキスト設定
  2. Attributed によるテキスト設定

Plainによるテキスト設定

Main.storyboard で UILabel を配置して Attributes Inspector のTextプロパティで[Plain]を選択し、下の欄に任意のテキストを入力すると表示する文字列が設定されます。

PlainでのTextプロパティ設定

Attributedによるテキスト設定

Textプロパティで[Attributed]を選択すると、設定可能な項目が以下のようになり、アライメント設定(左寄せや右寄せなど)、フォント、表示行数などを変更できるようになります。

Attributed 選択時の「設定

テキストの位置を設定する

テキストの位置設定は textAlignment プロパティで設定します。

説明
Left左寄せ
Center中央寄せ
Right右寄せ
Justified両端揃え
Natural自然

textAlignment プロパティ

コードで記述する場合は以下のよう textAlignment プロパティに NSTextAlignment 列挙体の値を設定します。

labelTitle.textAlignment = NSTextAlignment.left
labelTitle.textAlignment = NSTextAlignment.center
labelTitle.textAlignment = NSTextAlignment.right
labelTitle.textAlignment = NSTextAlignment.justifi
labelTitle.textAlignment = NSTextAlignment.natural

フォントを設定する

フォントを設定するには、fontプロパティを使用します。Attributes Inspectorでフォントを選択することができます。

コードでカスタムフォントを設定する場合は以下のようにします。

labelTitle.font = UIFont(name:"Helvetica", size: 20.0)

コードでシステムフォントを設定する場合は以下のようにします。

labelTitle.font = UIFont.systemFont(ofSize: 20.0)