Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する

Labelコントロールを配置して画面に文字列を表示するアプリケーションを作成します。

XcodeでiOSの[Single View Application]を作成します。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像1

左側のツリービューから[Main.storyboard]をクリックして選択します。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像2

左側のツリービューにファイル一覧が表示されない場合は、ツールバーの一番左の[フォルダ]アイコンをクリックします。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像3

storyboardファイルを選択すると、デザイナ画面に切り替わります。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像4

ウィンドウの右下のエリアがオブジェクトライブラリ(コントロール)ウィンドウです。スクロールすると[Label]があります。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像5

[LabelをUIデザイナにドラッグ&ドロップします。UIデザイナにLabelが配置されます。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像6

UIデザイナのLabelをダブルクリックします。ラベルの文字列が編集状態になります。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像7

文字列を編集します。今回は"Hello iOS Application World!"に変更します。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像8

プロジェクトを実行します。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像9

プロジェクトの実行はツールバーの三角形のアイコンのボタンをクリックします。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像10

ビルドが完了すると、[Build Succeeded]のポップアップが表示されます。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像11

シミュレーターが起動し、アプリケーションの実行結果が表示されます。Labelの文字列が画面に表示されています。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像12

位置の変更

デバッグを停止します。ツールバーの四角のアイコン(停止ボタンアイコン)のボタンクリックするとデバッグを終了できます。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像13

[Main.storyboard]を開きUIデザイナを開きます。先ほど配置したLabelをドラッグして移動します。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像14

再度プロジェクトを実行します。シミュレーターに実行結果が表示されます。ラベルの位置が変化しています。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像15

補足:オブジェクトライブラリが表示されない場合

UIデザイナを表示した際に、オブジェクトライブラリのウィンドウが表示されないことがあります。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像16

UIデザイナのウィンドウでオブジェクトライブラリが表示されない場合は[View]メニューの[Utillities]の[Show Object Library]メニューをクリックします。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像17

オブジェクトライブラリのウィンドウが表示され、コントロールの配置ができるようになります。
Labelコントロールの利用 - Labelコントロールを配置して画面に文字列を表示する:画像18

AuthorPortraitAlt
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
作成日: 2016-02-13
Copyright © 1995–2025 iPentec all rights reserverd.