XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】
XcodeでiPhoneアプリに【UIパーツを追加する方法】を初心者向けに解説した記事です。主なUIパーツ8つも合わせて紹介しています。ボタンやラベルなどのパーツの種類と、実装方法を合わせて学びたい方は読んでみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
XcodeではUIKitを使って、iPhoneアプリにUIパーツを追加することができます。UIパーツを使えば、ボタンやラベルなどを表示でき、アプリのUIデザインも簡単になります。
本記事では、UIパーツの一部を紹介し、Xcode上での追加方法について解説していきます。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
目次
下記のような流れで説明していきます。
UIKitとは
UIKitとは、iOSアプリケーションの核となるフレームワークです。UIKitには画面の部品、加速度情報やフォント管理等、30を超えるクラスから構成されています。
Storyboardを選択すると画面右下のペインには、各種オブジェクトのリストが表示されます。これらはStoryboardのViewController上のViewや、Viewの上にある部品の上に載せて利用します。
UIKitのうち、この画像のように黄色い円形の背景を持つものはViewControllerですので、新しい画面をStoryboardに追加する時に使います。
一方こちらはクラスオブジェクトの部品です。
UIパーツの一部を紹介
Xcodeが提供するUIパーツは多数ありますが、よく使うものを中心にご紹介します。
リンクの先には詳細の設定方法の記事もあるので、合わせて参考にしてみてください。
Button（ボタン）
各種操作を指示するために使わることが多いボタンです。ボタンの文言や色も変えることができます。
Date Picker
日付や時間を選択するためのホイールです。表示するのを日付だけや時間だけにすることもできます。乗り換え案内アプリなどで見かけることも多いのではないでしょうか。
Label（ラベル）
画面上に静的な文字列を表示するのに利用するラベルです。文言は簡単に変更可能です。
Slider
ある一定範囲（設定可能）の数値を変化させるのに利用するUIパーツです。
Switch
ONとOFFの二つの状態を持ちます。設定画面等で利用することが多いです。
Text Field
読んで字のごとく、文字を入力するためのパーツです。
Image View
画像を表示するためのパーツです。このサンプルのように画像ファイルを表示させたりして使います。気を付けなくてはならないのは、これが他の部品とは違い、Viewであるということです。
Web View
WEBページを表示するためのパーツです。標準ではURLを入力するフィールドはありませんので、別途TextFieldで作成する必要があります。
UIパーツの追加方法
最後に、UIパーツの追加方法をご紹介します。今回はLabelを使います。
画面右下にある「Label」をStoryboardのViewの上にドラッグ&ドロップするだけで配置できます。
また、パーツの外観等は画面右側のペインで設定します。
なお、これらのパーツをプログラムから扱うためにはIBOutletを作らなくてはなりません。具体的には部品からヘッダーファイルに右クリックでドラッグして名前を付けることになります。
ボタンのようにタップされたことを検知するにはIBActionを作成しますが、操作方法はIBOutletの作り方と同じで、表示されるポップアップで種類をActionに変更するだけです。
いかがでしたか？
Xcodeの使い方の基礎がまだわからないという方は、ストーリーボードの使い方もご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
