ストーリボードを利用したUILabelの使い方

ストーリーボードを使ってUILabelの使い方について説明します。

iOS開発においてよく利用しますし、応用できるので手を動かしながら進めていきましょう!

環境

  • swift 4.1
  • Xcode 9.4.1
  • macOS 10.13.5 High Sierra
  • iOS 11.4

ラベルの配置

iOSプロジェクトは作成済みとしてここでは省略します。

プロジェクトの作成方法がわからない方はこちらのレッスンを先に学習ください。

ios-app-init iOSアプリプロジェクト作成手順

まずはUILabelの配置の仕方を見ていきましょう。

ストーリーボードにラベルを配置

Main.storyboardファイルを選択してください。

まずはUILabelをストーリーボード上に配置します。

  1. サイドメニューを開きます
  2. UIコンポーネントを選択します
  3. 検索タブに「label」と入力します
  4. 様々あったUIコンポーネントからUILabelのみ検索結果に表示されます。
search_uilabel

検索表示されたUILabelを画像のようにドラッグ&ドロップします。

今の段階では位置を気にする必要はないので適当な位置に配置してみましょう。

add_uilabel

ビルド

それではこの段階でビルドしてみましょう。

まだlabelと表示されるだけですが、シュミレータにこのように表示されていれば成功です!

build

文字列を変更してみる

ストーリーボードから変更する

先ほど配置したラベルをダブルクリックすると画像のように文字列を変更できるようになるかと思います。

fix_text

ここではHello, worldと入力してみましょう。

hello_world

ビルドすると画像のようになるはずです!

まずはストーリーボードから文字列を変更する方法がわかりました。

build

ViewControllerから変更する

次はViewControllerから文字列を変更してみたいと思います。

まずはMain.storyboardViewControllerファイルの2つを開く必要がありますので、Xcode上部にある分割ボタンを押します。

divider_button

すると左側にストーリーボード、右側にViewControllerファイルが表示されるかと思います。

divide_xcode

次はViewControllerにストーリーボード上にあるUILabelを定義していきます。

UILabelをキーボードのCtrlボタンを押しながら左クリックしたままマウスを動かすと、画像のようにUILabelから青い線が表示されるはずです。


そのままViewControllerに画像と同じような位置にマウスを持っていき、Ctrlボタンと左クリックを外しましょう。

add_outlet

すると画像のようなポップアップが表示されるはずです。

ここではViewControllerにどのように定義していくかを記述します。

ここで指定する項目については説明すると長くなるので割愛しますが、
CollectionがOutlet、Nameがlabel、StorageがWeakとなっていることが確認できたら問題ありません!

set_names

その後、Connectボタンを押すと以下のようなコードが生成されるはずです。

@IBOutlet weak var label: UILabel!

先ほどNameに「label」と入力したのはViewController内で変数として扱うための作業です(なので実はlabel以外でも問題ありませんでした)。

ストーリーボードで配置したUILabelに対してViewController内で操作したい時にはこのlabelに対して行なっていきます。


それではlabelの文字列を変更していきましょう。

ViewControllerにある viewDidLoad() 内で以下のように記述してみてください。

override func viewDidLoad() {
  super.viewDidLoad()
  label.text = "Hello, iOS!"
}
preview

それではビルドしてみましょう。画像のような結果になっているかと思います。

build

見た目を変更

次は見た目を変更していきましょう。

先ほどの label.text = "Hello, iOS!" は消しておきました。

ViewControllerで文字列操作を消したのでUILabelには「Hello, world」と表示されるはずですね。

preview

見た目を変更するのにストーリーボードだけを使用するのでViewControllerは閉じておきましょう。

さらに見た目を変更するために画像のサイドメニューを開いておきます。

show_sidemenu

文字色の変更

文字色はColorという項目を選択すると色を選択するためのポップアップが表示されます。

ここから好きな色を選択しましょう。今回はMagentaを選択しました。

show_color_popup

フォントの変更

フォントはFontという項目を選択するとフォント選択するためのポップアップが表示されます。

ここから好きなフォントを選択してください。今回はSystem Italicを選択しました。

show_font_popup
select_font
font

文字サイズ

文字サイズはFont項目の隣にあるバーから変更することができます。
今回は30にしました。

fix_font_size

おわりに

今回はUILabelの基本的な使い方について説明しました。

UILabelについてはよく使いますし、他にも応用できるので理解しましょう!