iPhoneアプリ開発の基本 Hello world!を表示させよう

HelloWorld.md—/Users/matsunaga/Desktop/file/Xcode/HelloWorld

こんにちは。ぽにです。

今日はiOSアプリ(iPhoneアプリ、iPadアプリ)で アプリ作成の基本でもある Hello world を表示させるアプリの作成方法を紹介します。 さらにちょっとおまけで、ボタンを押したら Hello world の文字が変わる機能も追加します。

Xcode から新しいプロジェクトを立ち上げて、
Main.storyboard を開きます。
HelloWorld01.png

Label の配置

右下の検索で label を検索します。
表示された Label のパーツを Controller にドラッグ&ドロップします。
HelloWorld02.png

Button の配置

Label と同じく、
右下の検索で button を検索します。
表示された Button のパーツを Controller にドラッグ&ドロップします。
HelloWorld03.png

Label の配置場所を決定

Label を選択状態にして、右下の Align マークをクリックします。
Horizontally in ContainerVertically in Container にチェックをつけ、
Add 2 Constraints をクリックします。
この設定により Label が中心より水平方向(Horizontally)、垂直方向(Vertically)にどれだけ移動した場所に配置するかを設定できます。
設定を実行するために右下の Resolve Auto Layout Issues マークをクリックします。
HelloWorld04.png

Update Frames をクリックすることで設定を実行します。
HelloWorld05.png

配置場所が設定されたことで Label が中心に来ました。
何も設定されていない Button は左上に来ています。
HelloWorld06.png

Button の配置場所を決定

Label と同じく、
Label を選択状態にして、右下の Align マークをクリックします。
Horizontally in ContainerVertically in Container にチェックをつけ、
Vertically in Container の値を 100 にします。
Add 2 Constraints をクリックします。
右下の Resolve Auto Layout Issues マークをクリックして、Update Frames をクリックします。
HelloWorld08.png

Button が Label の下に配置されました。
HelloWorld09.png

名称の変更

Button の名称を変更します。
Button を選択して右上の Title の下に Click を入力します。
Button をダブルクリックして直接入力することもできます。
HelloWorld10.png

Button と同じく、 Label の名称を変更します。
Label を選択して右上の Title の下に Hello world! を入力します。
Label をダブルクリックして直接入力することもできます。
HelloWorld11.png

もともとの Label の幅より文字の方が長いため、見切れてしまってますね。
右下の Resolve Auto Layout Issues マークをクリックして、Update Frames をクリックします。
HelloWorld12.png

Hello world! が表示される幅に自動で調整してくれました。
HelloWorld13.png

ボタン処理を追加

ここからはカッコよく2画面を使っていきます。
方法は、右上の Show the Assistant editor をクリックします。
ViewController.swift のソースが右側に表示されました。
ここに Label の定義を追加します。
control を押しながら Label を選択して矢印のように引っ張ります。
HelloWorld14.png

ポップアップが表示されるので、Label の名前を入力して Connect をクリックします。
ここでは label1 とします。
HelloWorld15.png

Label の定義が追加されました。 Label と同じく、
control を押しながら Button を選択して矢印のように引っ張ります。
HelloWorld16.png

Label と同じくポップアップが表示されるので、
ConnectionAction に変更して、
Button の名前を入力して Connect をクリックします。
ここでは button1 とします。
HelloWorld17.png

Button の定義が追加されました。
HelloWorld18.png

ボタンを押した時の処理を書いていきます。
今回はボタンを押したら、Label が「こんにちは」と表示されるようにします。
そのために label1.text = "こんにちは" と入力します。
HelloWorld19.png

アプリを起動して、Click をクリックすると Label と Button が表示されます。
HelloWorld20.png

Button をクリックすると、
「Hello world!」が「こんにちは」に変わりましたね。
HelloWorld21.png

この記事へのコメント


この記事へのトラックバック