2015年8月25日火曜日

【Xcode / Swift入門】簡単な電卓(四則演算)アプリを作ってみよう

本稿では、ラベル、テキストフィールド、ボタン、PickerViewを作ってシンプルな電卓(四則演算)を作成していきます。
※ラベル、テキストフィールド、ボタンについては、前回の記事を参照ください。

PickerViewとは、複数の値からユーザに一つ選択させたいときに使うユーザインターフェースです。よくアラームの時間などを設定するときに使う下図のようなものです。





今回作成するアプリでは、2つのテキストフィールドに記載された数字を、”+、ー、×、÷”を表示したPickerViewで選択し、計算ボタンを押すことにより、計算結果をラベルに表示するというアプリにしたいと思います。また、テキストフィールドで使用できるキーボードの文字は、数字のみというユーザに親切な処理まで入れたいと思います。


プロジェクトおよびアプリ画面の作成


プロジェクトを作成します。今回は、"Simple Calculator"という名前でプロジェクトを作ってみたいと思います(名前は何でも良いです)。

Xcodeを開いて、
Create a new Xcode project → Single View Application → product name を”Simple Calculator”としてCreateボタン
を押します。

プロジェクトが作成されたら、Main.storyboardを開いて”見た目(アプリ画面)”の作成を行います。ラベル、テキストフィールド、ボタン、PickerViewを使って下図のような画面を作成します。





PickerViewを使う場合は、ユーティリティエリアの下部にて"Picker"と検索し、抽出されたPicker Viewをドラッグ&ドロップします。
※Main.storyboardの設定方法がわからない場合は、【1-3. Interface Builderを使ってみよう】を参照ください。

また、今回はテキストフィールドをクリックした際に立ち上がるキーボードを、数字のみにする設定もします。テキストフィールドをクリックし、ユーティリティエリアの↓マークのようなものを選択します。下の方に、Keyboard Typeという欄があるので、そこでNumberPadを選択します。



PickerViewの設定

テキストフィールド、ラベル、PickerViewについては、変数の設定し、ボタンについては、Actionの設定をします。



※本設定がわからない場合は、【1-4. ボタンやテキストのコーディング】を参照してください。

次に、PickerViewの設定をしていきます。PickerViewを使用するにあたっては、下記の6つの処理が必要になります。

1、ViewControllerとPickerViewの括り付け
2、PickerView使用宣言
3、PickerViewに表示する値の設定
4、PickerViewの列数設定
5、PickerViewの行数設定
6、PickerViewへの文字の表示

上記一つ一つは難しい処理ではありませんので、下記を参照し作成していってください。

1、ViewControllerとPickerViewの括り付け
  ViewController上でPickerViewを使用する設定をします。この設定がない場合、エラーが出力されずにPickerViewが正常に動かない(PickerViewが表示されない)状況に陥ります。この設定は、Main.storyboad上にて実施します。
PickerViewを選択し、controlを押しながらViewControllerの上部の黄色2重四角にドラッグ&ドロップします。



すると、下図のように"dataSource""delegate"が出てきますので、両方選択します。



この設定は忘れずに実施しましょう。

2、PickerView使用宣言
  これはViewController.swiftにて宣言します。先頭に記載があるClass ViewControllerの最後に"UIPickerViewDelegate"を追加します。

   

    Class ViewController: UIViewController, UIPickerViewDelegate {




3、PickerViewへ表示する値の設定
  PickerViewの値は、配列(配列については、【2-4. 配列(Array)とディクショナリーについて】にて説明します。)として定義します。今回は、”+、ー、×、÷”をPickerViewに表示するため、コンポーネントを定義した箇所に下記のように設定します。 


4、PickerViewの列数設定  
  下記の関数をclass ViewController内に記載します。” override funcdidReceiveMemoryWarning() { ”
の下あたりに追加すると良いです。

 //pickerに表示する列数を返す(実装必須)
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        
        return 1  //1列表示
 
    }

return で返す値がそのまま列数になります。つまり、上記は1列表示するという意味になります。

5、PickerViewの行数設定
  下記の関数をclass ViewController内に記載します。上記4にて定義したPickerViewの列数の後に記載すると良いです。
    
 //pickerに表示する行数を返す(実装必須)
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        
        return arithmetic.count;  // 選択肢の数
    }
 
return にて返す値がそのまま行数になります。PickerViewの行数は、基本的には、選択肢の数になると思います。配列にて指定した文字数(選択肢の数)は、”配列で定義した変数名.count”で取得できます。

6、PickerViewへの文字の表示
  3にて指定した値をPickerViewに表示する関数を定義します。下記の関数をclass ViewController内に記載します。上記5にて定義したPickerViewの行数定義関数の後に記載すると良いです。
    
  //PickerViewへの文字列の表示
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
        
        return arithmetic[row]  
    }

定義した配列の変数にrowを入れることにより、文字列の表示が可能になります。

上記4、5、6を追記すると以下のようになります。




ここまできたら一旦iPhoneシミュレータを起動してみます。下記のように表示され、PickerViewが表示していれば成功です。



コーディング

では、コーディングをしていきます。今回は、計算ボタンが押された際、PickerViewの選択された値をもとに計算し、結果を表示するというコードを書き込んでいきます。

記載する場所は、ボタンが押されたときなので、先ほどボタンのActionとして定義した@IBAction func calculate(sender: AnyObject) {}内に記載していきます。

まず、左側のテキストフィールドの文字列と右側のテキストフィールドの文字列を数字として取得し、変数に代入します。
    
  var GetHidariNum : Int = hidari.text.toInt()!
  var GetMigiNum: Int = migi.text.toInt()!

#Swift2.0を使用する場合は、
 let GetHidariNum : Int = Int(hidari.text!)!
   let GetMigiNum: Int = Int(migi.text!)!
 としてください。Swift2.0よりtoInt()は使用できなくなっています。

※変数の定義方法や"!"の意味は本記事の【第2章 Swiftのことを知ろう】にて説明します。

次に、PickerViewにて選択された値が、"+"の場合は取得した値を足し算し、"-"の場合は取得した値を引き算し、"×"の場合は取得した値を掛け算し、"÷"の場合は取得した値を割り算するように記載していきます。

今回使用する関数は、PickerView変数.selectedRowInComponent(0)です。これは、PickerViewの1列目(”0”として指定しています)で選択されている値のインデック番号(通し番号)を取得する関数になります。つまり、"+"の場合は"0"、"-"の場合は"1"、"×"の場合は"2"、"÷"の場合は"3"を取得します。
あとは、取得してきた値に対し、If文もしくはSwitch 文などを用いて条件分岐してあげれば完成です。今回は、Switch文を使って下記のように記載しました。
※If文もしくはSwitch 文は本記事の【第2章 Swiftのことを知ろう】にて説明します。
    
  //1列目の選択されている値のインデックス番号を取得する
        switch fourArithmetic.selectedRowInComponent(0) {
        case 0:
            result.text = String(GetHidariNum + GetMigiNum)
        case 1:
            result.text = String(GetHidariNum - GetMigiNum)
        case 2:
            result.text = String(GetHidariNum * GetMigiNum)
        case 3:
            result.text = String(GetHidariNum / GetMigiNum)
        default:
            break
            
        }

ここまで来たら再度iPhoneシミュレータを起動してみます。テキストフィールドに数字を入力し、 PickerViewで値を選択し、計算ボタンを押して計算結果が表示されれば成功です。




今回作成したViewController.swiftはこちらからダウンロード可能です。

次回は、アプリの画面を自動で調整してくれるAutoLayout機能について説明します。




2 件のコメント:

  1. とても参考になります。ありがとうございます。

    質問があるんですけれど、【PickerViewの設定】のところの【3、PickerViewへ表示する値の設定】で÷演算子のキーボード入力の仕方がわからないんですけど
    教えていただけますか?

    Xcodeの使い方とかとは違うんで、恐縮なんですけど。

    返信削除
  2. すいません、自己解決しました。先回質問したところでエラーがでていたのですが、どうやらダブルコーテーションを全角で入力していたためでした。失礼しました。

    返信削除