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

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

Xcode 13.4.1

Xcodeで Hello World

 
Xcodeで開発をするために

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

という前提です。iOS アプリ開発環境

  • プロジェクトを作成
  • UIを設定
  • コードを記述
  • simulatorで実行
     
 

プロジェクト作成

 
Xcodeをスタートさせて Welcome to Xcode の
「Create a new Xcode project」から新規のプロジェクトを作成します。
 

 
あるいは、Xcodeの開発画面であれば「File」「New」「Project」から
 

 
「iOS」タブの「App」を選んで「Next」
 

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

 

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

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

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

 

ストーリーボードの設定

 
Xcode に下のファイルが作成されています

  • AppDelegate(AppDelegate.swift)
  • ViewController(ViewController.swift)
  • Main(Main.storyboard)

ができていますのでMain(ストーリーボード)を選択します。
 

 
Label を ストーリボードに配置しますが、Label のUIは上部に「+」のアイコンをクリックすると一覧が出てきます。
 

Labelをドラッグして画面に配置します。

 

コード記述

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

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

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

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

 

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

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

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

 

テキストが小さいのでFontを大きくしてAlignmentを中央配置
 

 
実行すると、Hello World が表示されました。
 

 
 
関連ページ:

 
Reference:
UILabel – UIKit | Apple Developer Documentation



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

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


TECH ACADEMY
iPhoneアプリコース


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


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




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


シェアする

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

フォローする