XcodeでUILabelを追加する方法【初心者向け】

Xcodeで【UILabel(ラベル)を追加する方法】を初心者向けに解説した記事です。iPhoneアプリ開発には、UIパーツを使うと便利です。UILabelは文字列の変更、色の変更、背景色の変更が簡単にできるので方法を紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

iPhoneアプリの開発に便利な、UIパーツの追加方法を紹介する記事です。

今回は、XcodeUILabel(ラベル)を追加する方法をご紹介します。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UILabelとは

UILabel(ラベル)は、アプリの画面に編集できない文字列を表示するのに使います。例えば、項目ラベル等の決め打ちの文字列や、アプリから出力する文字列の表示に使います。

 

 

UILabelを追加する

追加するには、StoryboardのViewにラベルをドラッグ&ドロップします。

label

XcodeScreenSnapz001
このように表示されました。

今回は例として、横幅が広いラベルにしています。

XcodeScreenSnapz002

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UILabelの各種パラメータ

UILabelは各種パラメータによって編集が可能ですので、パラメータの一部を紹介します。

今回紹介するものは、全てインスペクターから変更可能です。

XcodeScreenSnapz003

 

表示文字列

インスペクターのTextの欄の「Label」と書いてある文字列を修正することによって、表示文字列を変更することができます。

Labelを「This is aLabel」に変更するとこのように表示されます。

XcodeScreenSnapz004

 

文字列の色

同じように、インスペクターのColorの項目で文字色を変えることができます。この際、カラーピッカー使うこともできます。

XcodeScreenSnapz005

 

文字揃え

インスペクターのAlignmentで変更可能です。

この例では中央揃えにしています。

XcodeScreenSnapz007

 

背景色

インスペクターのBackgroundから変更可能です。

XcodeScreenSnapz009

 

表示行数

インスペクターのLinesを調整して、表示可能な行数を変更することができます。ただし、その場合はラベルの縦幅も伸ばす必要があります。

なお、Linesを0にすると表示できる範囲全てを表示します。何行になるかわからない場合は0に設定しておくと良いでしょう。

XcodeScreenSnapz012

 

 

アプリから文字列を設定する

最後に、アプリから文字列を設定する方法を紹介します。

Storyboardのラベルからヘッダーファイルへ右ドラッグをしてIBOutletを作成してください。

XcodeScreenSnapz014
XcodeScreenSnapz015

こうすると下記のコードが生成されます。

@property (weak, nonatomic) IBOutlet UILabel *lblDisplay;

 

例えば、起動時に文字列を設定したい場合は、viewDidLoadに以下のコードを書きます。

_lblDisplay.text = @”Hello World!”;

これで、ラベルのtextプロパティに文字列を設定できました。

Hello World

 

今回の記事は以上です。

Xcodeをさらに使いこなしたい場合は、XcodeでUIDatePickerを追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。