ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

Xcode9 で計算機アプリ 開発

ここ最近iphoneアプリ 開発の勉強を始めました。教本の写経から一歩進んで、自分のアプリ を作成してみたいと思います。

四則演算の計算機アプリを作成するのですが、10+20=30とか25X30=750とか120÷3=40のように、値と値、演算子、結果が表示される普通の計算機とは違う仕様とします。f:id:php-7com:20180820003447p:plain

普通の計算機って、いつも思うのですが、計算結果しか表示されないので、本当にこの値とこの値を使ったのかな?とか時々考えてしまうことがありましたので。

f:id:php-7com:20180819062328p:plain

まずは、Single View App、Product Name はCalc1とします。

 

1.ViewController.swiftに値と演算子ともう一つの値と計算結果を表示するラベル部分を打ち込んでいきます。

//

//  ViewController.swift

//  Calc1

//

import UIKit

 

class ViewController: UIViewController {

    

    //例えば足し算の場合、足される数値と足す数値が表示されるラベル

    let numLabel_1 = UILabel()

    let numLabel_2 = UILabel()

    //演算子が表示されるラベル

    let enzanLabel = UILabel()

    //計算結果を表示するラベル

    let resultLabel = UILabel()

    //画面の横幅を取得する

    let screenHaba = Double(UIScreen.main.bounds.size.width)

   

    override func viewDidLoad() {

        super.viewDidLoad()

        //ラベルのフレームを設定する

        numLabel_1.frame = CGRect(x: 10, y: 30, width: screenHaba-20, height: 35)

        enzanLabel.frame = CGRect(x: 10, y: 70, width: 160, height: 35)

        numLabel_2.frame = CGRect(x: 10, y: 110, width: screenHaba-20, height: 35)

        resultLabel.frame = CGRect(x: 60, y: 150, width: screenHaba-70, height: 35)

        //ラベルの背景色を設定する

        numLabel_1.backgroundColor = UIColor.lightGray

        enzanLabel.backgroundColor = UIColor.yellow

        numLabel_2.backgroundColor = UIColor.lightGray

        resultLabel.backgroundColor = UIColor.cyan

        //計算結果ラベルをViewControllerクラスのViewに設置する

        self.view.addSubview(numLabel_1)

        self.view.addSubview(enzanLabel)

        self.view.addSubview(numLabel_2)

        self.view.addSubview(resultLabel)

    }

 

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

}

ここで一旦シミュレーターで確認します。下のようになることを確認します。

一番上のグレーラベルが例えば10、黄色ラベルが+とか、下から二ツ目のグレーラベルが例えば20、ブルーラベルが計算結果である=30を表示することになります。

f:id:php-7com:20180819062849p:plain

 2.次に0〜9までの数値、演算子、Cボタンを配置していきます。

ViewController.swift 内の

    //画面の横幅を取得する

    let screenHaba = Double(UIScreen.main.bounds.size.width)

の下に以下を追加

    //0-9までの数値、演算子を配置するので、縦横の数を格納する

    //横のボタン数

    let horizontalNum = 4

    //縦のボタン数

    let verticalNum = 4

    //画面の高さを取得する

    let screenTakasa = Double(UIScreen.main.bounds.size.height)

    //ボタンとボタンの間の余白

    let buttonYohaku = 10

    //ボタンの横幅、高さ用の変数

    var buttonHaba: Double!

    var buttonTakasa: Double!

viewDidLoad()内に以下を追加します

        //ボタンの幅、高さの計算

        buttonHaba = ( screenHaba - Double(buttonYohaku * ( horizontalNum + 1 ))) / Double(horizontalNum)

        buttonTakasa = ( screenTakasa - 190 - Double(buttonYohaku * ( verticalNum + 1 ))) / Double(verticalNum)

        //print(buttonHaba)

        //print(buttonTakasa)

        //ボタンを配置する

        for j in 0..<verticalNum {

            for i in 0..<horizontalNum {

                let button = UIButton()

                button.frame = CGRect(x: 10 + Double(i) * Double( buttonHaba + Double(buttonYohaku) ), y: 200 + Double(j) * Double( buttonTakasa + Double(buttonYohaku) ), width: buttonHaba, height: buttonTakasa)

                button.backgroundColor = UIColor.green

                button.titleLabel?.font = UIFont.systemFont(ofSize: 25)

                //1〜9 までの数値ボタン

                if( j < 3 ){

                    if( i < 3 ){

                        button.setTitle(String(  ( 6 - 3 * j ) + (i + 1) ), for: .normal)

                    }

                }else{

                //最下行の0 C ÷ ボタン

                    switch i {

                    case 0: button.setTitle("0", for: .normal)

                    case 1: button.setTitle("C", for: .normal)

                    case 2: button.setTitle("÷", for: .normal)

                    default: break

                    }

                }

                //最右列の演算子ボタン

                if ( i == 3 ){

                    switch j {

                        case 0: button.setTitle("×", for: .normal)

                        case 1: button.setTitle("-", for: .normal)

                        case 2: button.setTitle("+", for: .normal)

                        case 3: button.setTitle("=", for: .normal)

                        default: break

                    }

                }

                self.view.addSubview(button)

            }

        }

一旦シミュレータで確認します。結構、感動しますね!

 f:id:php-7com:20180819090856p:plain

3.ボタンがタップされた時の処理を書いていきます

まず、viewDidLoad()内self.view.addSubview(button)の下に

以下を追加します

                

  //buttonnをコードだけで実装しているため@IBActionが使えないが、addTragetでボタンがタップされた時の処理を記述する

  button.addTarget(self, action: #selector(ViewController.buttonTouch(sender: )), for: .touchUpInside)

override func didReceiveMemoryWarning() {の上に以下を追加します

    //ボタンプッシュした時のイベント

    @objc func buttonTouch(sender:UIButton) {

        let buttonTitle : String = sender.currentTitle!

        print("\(buttonTitle)がタップ")

    }

シミュレーターで確認します

 f:id:php-7com:20180819104007j:plain

デバッグエリアにタップされたボタンのタイトルが表示されます。

  

ここからがそこそこ難しいです。

数値ボタンが押されたときに、

演算子ラベルが空白の場合、上部のグレーラベルに、

演算子ラベルが空白で無い場合、下部のグレーラベルに

数字が表示されるようにします。

演算子ボタンが押されたときに、

演算子演算子ラベルに表示されるようにします。

イコールボタンが押されたときに、

計算し、黄色ラベルに計算結果が表示されるようにします。

Cボタンが押されたときには、全てのラベルを空白にします。

 

0〜9までの数値ボタンをタップしたときに、ラベルに表示されるようにしていきますが、ラベルの初期化が必要でした。ラベルの背景色の設定の下に以下を追加します。

 

        //初期値設定

        numLabel_1.text = ""

        enzanLabel.text = ""

        numLabel_2.text = ""

        resultLabel.text = ""

ボタンを押した時の処理としてbuttonTouch関数を以下の様に書きます。

    //ボタンプッシュした時のイベント

    @objc func buttonTouch(sender:UIButton) {

        let buttonTitle : String = sender.currentTitle!

        //print("\(buttonTitle)がタップ")

        switch buttonTitle {

        //数値ボタンがタップされたとき

        case "0","1","2","3","4","5","6","7","8","9":

            if (resultLabel.text == ""){

                if (enzanLabel.text == ""){

                    numLabel_1.text = numLabel_1.text! + buttonTitle

                } else {

                    numLabel_2.text = numLabel_2.text! + buttonTitle

                }

            }

        //演算子ボタンがタップされたとき

        case "×","-","+","÷":

            if (enzanLabel.text == ""){

                enzanLabel.text = buttonTitle

            }

        //イコールボタンがタップされたとき

        case "=":

            if let numLabel_1text = Float(numLabel_1.text!) {

                if let numLabel_2text = Float(numLabel_2.text!){

                    switch enzanLabel.text {

                    case "+":

                        resultLabel.text = "=" + String(numLabel_1text + numLabel_2text)

                    case "-":

                        resultLabel.text = "=" + String(numLabel_1text - numLabel_2text)

                    case "×":

                        resultLabel.text = "=" + String(numLabel_1text * numLabel_2text)

                    case "÷":

                        resultLabel.text = "=" + String(numLabel_1text / numLabel_2text)

                    default: break

                    }

                }

            }

        //Cボタンがタップされたとき

        case "C":

            numLabel_1.text = ""

            enzanLabel.text = ""

            numLabel_2.text = ""

            resultLabel.text = ""

        default:

            break

        }

    }

4.動作確認

シミュレータを起動して、確認します

足し算

f:id:php-7com:20180820003447p:plain

引き算

f:id:php-7com:20180820003451p:plain

掛け算

f:id:php-7com:20180820003455p:plain

割り算

f:id:php-7com:20180820003459p:plain

うーん!初のオリジナルアプリはやはり、

感激です!