XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】

XcodeでiPhoneアプリに【UIパーツを追加する方法】を初心者向けに解説した記事です。主なUIパーツ8つも合わせて紹介しています。ボタンやラベルなどのパーツの種類と、実装方法を合わせて学びたい方は読んでみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が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に追加する時に使います。

XcodeScreenSnapz001

 

一方こちらはクラスオブジェクトの部品です。

XcodeScreenSnapz002

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UIパーツの一部を紹介

Xcodeが提供するUIパーツは多数ありますが、よく使うものを中心にご紹介します。

リンクの先には詳細の設定方法の記事もあるので、合わせて参考にしてみてください。

 

Button(ボタン)

XcodeScreenSnapz003

各種操作を指示するために使わることが多いボタンです。ボタンの文言や色も変えることができます。

XcodeでUIButtonを追加する方法

 

 

Date Picker

iOSシミュレータScreenSnapz001

日付や時間を選択するためのホイールです。表示するのを日付だけや時間だけにすることもできます。乗り換え案内アプリなどで見かけることも多いのではないでしょうか。

XcodeでUIDatePickerを追加する方法 

 

 

Label(ラベル)

XcodeScreenSnapz004

画面上に静的な文字列を表示するのに利用するラベルです。文言は簡単に変更可能です。

XcodeでUILabelを追加する方法

 

 

Slider

XcodeScreenSnapz005

ある一定範囲(設定可能)の数値を変化させるのに利用するUIパーツです。

XcodeでUISliderを追加する方法

 

 

Switch

XcodeScreenSnapz006

ONとOFFの二つの状態を持ちます。設定画面等で利用することが多いです。

XcodeでUISwitchを追加する方法

 

 

Text Field

XcodeScreenSnapz007

読んで字のごとく、文字を入力するためのパーツです。

XcodeでUITextFieldを追加する方法

 

 

Image View

XcodeScreenSnapz008

画像を表示するためのパーツです。このサンプルのように画像ファイルを表示させたりして使います。気を付けなくてはならないのは、これが他の部品とは違い、Viewであるということです。

XcodeでUIImageViewを追加する方法

 

 

Web View

Web View

WEBページを表示するためのパーツです。標準ではURLを入力するフィールドはありませんので、別途TextFieldで作成する必要があります。

XcodeでUIWebViewを追加する方法

 

 

UIパーツの追加方法

最後に、UIパーツの追加方法をご紹介します。今回はLabelを使います。

画面右下にある「Label」をStoryboardのViewの上にドラッグ&ドロップするだけで配置できます。
XcodeScreenSnapz009

 

また、パーツの外観等は画面右側のペインで設定します。

XcodeScreenSnapz010

 

なお、これらのパーツをプログラムから扱うためにはIBOutletを作らなくてはなりません。具体的には部品からヘッダーファイルに右クリックでドラッグして名前を付けることになります。

XcodeScreenSnapz011

ボタンのようにタップされたことを検知するにはIBActionを作成しますが、操作方法はIBOutletの作り方と同じで、表示されるポップアップで種類をActionに変更するだけです。

 

いかがでしたか?

Xcodeの使い方の基礎がまだわからないという方は、ストーリーボードの使い方もご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。