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

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

Swift 5.1
Xcode 11.3.1

Xcodeで Hello World

 
Xcodeで開発をするために

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

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

 

プロジェクト作成

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

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

 
「iOS」タブの「Single View Application」を選んで「Next」
 

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

 

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

 
これで、保存先を決めればプロジェクトのできあがりです。
 
できあがったプロジェクトで、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は上のアイコンをクリックして検索窓からタイプすると探す手間が省けます。
このアイコンは◎から+に変わりました。
 

 

コード記述

ラベルを表示する設定をします
 
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

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


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


シェアする

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

フォローする