目指せ!iPhoneアプリ開発エキスパート

第3回 アプリ開発の第一歩

この記事を読むのに必要な時間:およそ 3 分

セグメンテッドコントロール

セグメンテッドコントロールは,複数の選択肢からいずれか1つを選択させるためのボタンです。親しみづらい名前なので,選択するためのボタンという意味で「セレクトボタン」などと言ったりもします。ここでは,割引率を選択させるために使います。

ライブラリパネルから「Segmented Control」を選び,Viewに配置します。

キライブラリからセグメンテッドコントロールを選択

ライブラリからセグメンテッドコントロールを選択

配置が完了したら,選択肢を設定しましょう。まずは選択肢の数です。設定はもちろんインスペクタから行います。セグメンテッドコントロールが選択された状態で,インスペクタの「Segments」を変更して選択肢の数を変更します。横にある上下矢印のボタンで選択肢の数を増減できます。あまり選択肢が多いと操作しづらくなるので,ここでは4つとしておきましょう。

選択肢の数を4つに設定

選択肢の数を4つに設定

次にそれぞれの選択肢に名前をつけます。設定したい部分をダブルクリックして入力しましょう。ここでは,割引でよく使う20%から50%までを入力します。

選択肢に名前を付けた状態

選択肢に名前を付けた状態

ビルドと実行

これで最低限のパーツの配置が完了しました。ここで1つ気を付けておきたいことがあります。それは,すべてのパーツを画面の上半分に配置しておく,ということです。こうしておく理由は,実際にアプリを実行した後でわかります。

ではアプリをビルドして実行してみましょう。Xcodeに戻り「ビルドして進行」をクリックしてください。ここで「ビルド前に保存しますか?」というウィンドウが表示されたら「すべてを保存」をクリックします。

編集したファイルの保存をうながすウィンドウ

編集したファイルの保存をうながすウィンドウ

ビルドが完了すると,iPhoneシミュレータが起動してアプリが実行され,先ほどパーツを配置した画面がiPhoneの画面を模したシミュレータ上に表示されます。iPhoneシミュレータの画面上では,マウスを使って実際にクリック(タッチ)して操作することができます。指でMacの画面をタッチしても当然ながら反応しませんので気をつけてくださいね。マウスを使って,タッチしている気分になりながらiPhone シミュレータ上をクリックしてください。

セグメンテッドコントロールをクリックして,20%以外の選択肢が選べることを確認しましょう。次に,テキストフィールドをクリックして,キーボードを表示してみます。

テキストフィールドをクリックするとキーボードが表示される

テキストフィールドをクリックするとキーボードが表示される

インスペクタで設定したとおり,数字だけのキーボードが表示されました。ところが,このキーボードが表示されると画面の下半分を覆ってしまいます。先ほど画面の上半分にパーツを配置しておいたのはこのためです。

下半分に配置してしまうと,キーボードが表示されると同時にパーツが隠れてしまいます。最初のうちはキーボードで入力する際に必要なパーツを画面の上半分に配置しておくことをお勧めします。キーボードのパネルをクリックして,数字が入力できることを確認しておきましょう。

入力した価格と選択した割引率から金額を計算して表示

入力した価格と選択した割引率から金額を計算して表示

今回はパーツを配置して画面を作るところまでを勉強しました。次回は,入力した価格と選択した割引率から,実際に割引した金額を表示するところまでを学びます。

たとえば15,000円の20%割引の場合,15,000円×(1-0.2)=12,000円となります。このような計算をプログラムとして書いて実行し,結果を表示します。もちろんiPhoneアプリのプログラミング言語であるObjective-Cも登場します。ここからがiPhoneアプリ開発の核となる部分ですので,あせらずゆっくり勉強していきましょう。

著者プロフィール

皮(かわ)

1980年宮崎県生まれ。納豆好き。

アイフォーンの皮:http://mixi.jp/view_community.pl?id=3531790