[iPhone] UILabel を設定してテキストを表示する

Swift を使って簡単なラベルを表示させてみたいと思います。下のような「Hello World」のテストラベルを表示させる設定です。
 

Swift 4.2
Xcode 10.0

Xcodeで Hello World

 
Xcodeで開発をするために

  • Xcodeをインストールが終わっている
  • 開発者登録が終わっている(無料で始める場合は後でXcodeから設定します)

という前提です。iOS アプリ開発環境
プロジェクトを作成して、UIを設定したりコードを記述したりして最終的にsimulatorで実行させてみましょう。
 

 

プロジェクト作成

 
Xcodeをスタートさせて Welcome to Xcode の
「Create a new Xcode project」から
 

 
あるいは、Xcodeの開発画面であれば「File」「New」「Project」から新規プロジェクトを作成します。
 

 
「Single View Application」を選んで「Next」
 

 
プロジェクト名を決めLanguageなどを設定していきます。
 

 

Product Name TestLabel などのプロジェクト名
Team Xcodeで生成できます。
これが設定されていないとエラーになります。
Organization Name 任意の名前
Organization Identifier これにより、下の Bundle Identifier が決まるため公開を前提にする場合は注意して選びますが、公開しない場合は適当で大丈夫です。
Language 開発言語は「Swift」かObjective-Cを選びます。

 
これで、保存先を決めればプロジェクトのできあがりです。
 
できあがったプロジェクトで、Team がNoneだとStatusがエラーとなります。
登録したApple ID名をTeamに入れます。

プルダウンで候補が出てきます。(Apple IDの登録が必要です)あるいは、実機でアプリを確認するからAccountを設定して証明書を作成してください。
 

 

ストーリーボードの設定

 
Xcode に下のように、
ViewController.swift
Main.storyboard
ができていますのでMain.storyboardを選択します。
 
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-14-16-48-42

 
ターゲットのスクリーンは何でもいいのですが、iPhone XRにしてサイズを50%としてみました。
 

UILabel を ViewController Scene に置きます。UILabelは上のアイコンをクリックして検索窓からタイプすると探す手間が省けます。
このアイコンはXcode10から変わりました、以前は右端のUnitility Areaにあったのですが…
 

 

コード記述

ラベルを表示する設定をします
 
ViewController.swift

 
さて、ここで @IBOutlet というものが出てきましたが

  • IBとは「Interface Builder」の略でレイアウトを作成するインターフェースで具体的にはstoryboardのことを指しています。
  • Outletとは、そうそう郊外にある工場からの直販店…ではなくこの場合は「引出し口」という意味あいになります。

つまりこれはViewControllerクラスにstoryboardからのUILabelの引出し口を設定していることになります。
 
「var」は変数です、変更される予定の場合に使います。Swiftの変数・定数・型の設定
 
「!」はオプショナル型といいます。これについてはとても数行では済まないので、 Optional – Swift Standard Library | Apple Developer Documentationなどで勉強できているとして進めます。
 
よってこの1行は、storyboardから関連づけられるUILabel型の変数「label」をオプショナル型として宣言する。という意味になります。ついでにこの関連づけも明示的にする必要があります。
 
次のコードはlabelのtextというプロパティに文字列のHello Worldを設定していることを示しています。

 

ストーリーボードとの関連づけ

 
先ほどのlabelをstoryboardで設定したUILabelと関連づけます。
 

 
このあたりは動画で見てもらう方がわかりやすいでしょう。またこの関連づけの方法は他にもありますが1例です。
 

 
ついでですが、テキストが小さいのでフォントを大きくして見また。
 

 
実行すると、
 

 
 
関連ページ:

 
Reference:
UILabel – UIKit | Apple Developer Documentation

誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:




ページのトップへ戻る

シェアする

  • このエントリーをはてなブックマークに追加

フォローする