【Swift5】UILabelを使ってテキストを表示させる – 基礎編 Part1

今回はUILabelを用いて画面にテキストを表示させる方法を解説します。

プロジェクトの作成方法は別記事で解説していますので、以下を参照してください。

(記事のリンク)

今回の目的

StoryboardのViewControllerにUILabelを配置して、画面上にテキストを表示させます。

また、UILabelのテキストをコードで変更してみます。



以下の記事では、応用としてボタンをタップするたびにテキストが変わるプログラムを書いています。

(応用の記事のリンク)

ストーリーボード

まずはStoryboardを使ってViewControllerにUILabelを配置しましょう。

右上のライブラリボタンをクリックし、UILabelをViewCotrollerにドラッグ&ドロップします。



白のドットをドラッグすることでUILabelの大きさを変えることができます。

Storyboardだけで設定する場合

ユーティリティエリアのインスペクタバーから属性インスペクタをクリックします。

ユーティリティエリアのテキストを変更すると、配置したUILabelに反映されます。

デフォルトでは「Label」になっています。

MEMO

右側のエリアが表示されない時…



コード

今度はStoryboardで配置したUILabelをコードで編集してみます。

部品(UILabel)とコードを紐付ける

まず、上記の手順でStoryboardにUILabelを配置します。

次に、右上のエディタ設定ボタンの真ん中をクリックし、エディタエリアにアシスタントエリアを表示します(エディタエリアが2分割される)。

左側のエディタエリアをStoryboard、右側のエディタエリアをViewController.swiftにします。

左側のエディタエリアは、ナビゲーターエリアで選んだファイルが表示されます。今回はMain.storyboardを表示します。

右側のエディタエリアは、AutomaticからViewController.swiftを選択します(画像参照)。



今度は、部品(UILabel)とコードを紐付けます。

Storyboard上のUILabelを右クリックしながら右側のViewController.swiftにドラッグ&ドロップします。

するとポップアップが表示されるので、UILabelの名前を入力します。今回は「testLabel」にします。

ConnectionをOutletに設定してConnectをクリックします。

これでStoryboardの部品とコードが紐付けられました。

以下のようなコードが追加されていると思います。

コードを書く

ViewDidLoad()に以下のコードを書きます。

UILabelの名前に.textを付けるとテキストを編集することができます。

コード全体

実行結果

まとめ

UILabelを使って画面にテキストを表示させることができました。

コード(.text)で簡単にUILabelにアクセスして、テキストを編集することができます。

これで好きな時に任意のテキストを表示することができますね。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。