【Xcode/Swift】電卓アプリを作ってみよう

今回は簡単な電卓アプリを作ってみます。

申し訳ありませんが超手抜き記事です、質問があればTwitterで受け付けております。

◉今回の完成図

ひとくちメモ

今回作成する電卓アプリに以下の機能は含んでいません、予めご了承ください。

小数の計算
計算結果の小数点以下四捨五入処理(割り算)

Contents 非表示

開発環境
Storyboardで見た目を作る
コードの記述 & ビルド
まとめ

開発環境

今回は以下の環境で実装しています

Mac OS ver	12.4
Swift ver	5.6
Xcode ver	13.3

Storyboardで見た目を作る

以下を参考にStoryboardにパーツを配置してください。

ひとくちメモ

今回はButtonのタグを活用するので各ボタンにタグ番号を割り振ってください。

Button(0) = タグ番号(1)

Button(1) = タグ番号(2)

・

Button(9) = タグ番号(10)

Button(C) = タグ番号(11)

Button(÷) = タグ番号(12)

・

Button(=) = タグ番号(16)

タグの付け方

コードの記述 & ビルド

各パーツをコードに紐づけていきましょう。

ラベル = Label
数字(0 ~ 9) = showNumber
記号(C ~ =) = calcAction

コード全体(丸コピでOK)

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var label: UILabel!
    
    private var numberOnScreen: Int = 0
    private var previousNumber: Int = 0
    private var performingMath = false
    private var operation = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupView()
    }
    
    private func setupView() {
        label.text = ""
    }
    
    //各ボタンが押された時の処理
    @IBAction func showNumber(_ sender: UIButton) {
        if performingMath == true {
            label.text = String(sender.tag - 1)
            numberOnScreen = Int(label.text!)!
            performingMath = false
        }else {
            label.text = label.text! + String(sender.tag - 1)
            numberOnScreen = Int(label.text!)!
        }
        
    }
    
    //各計算ボタンが押された時の処理
    @IBAction func calcAction(_ sender: UIButton) {
        if label.text != "" && sender.tag != 11 && sender.tag != 16 {
            previousNumber = Int(label.text!)!
            //labelに表示する文字を決める
            switch(sender.tag) {
            case 12:
                label.text = "÷"
            case 13:
                label.text = "×"
            case 14:
                label.text = "ー"
            case 15:
                label.text = "＋"
            default:
                break
            }
            operation = sender.tag
            performingMath = true
        }else if sender.tag == 16 {
            //計算ボタン(=)が押された時の処理
            switch(operation) {
            case 12:
                label.text = String(previousNumber / numberOnScreen)
            case 13:
                label.text = String(previousNumber * numberOnScreen)
            case 14:
                label.text = String(previousNumber - numberOnScreen)
            case 15:
                label.text = String(previousNumber + numberOnScreen)
            default:
                break
            }
        }else if sender.tag == 11 {
            //(C)が押されたら全てを初期値に戻す
            label.text = ""
            previousNumber = 0
            numberOnScreen = 0
            operation = 0
        }
    }
    
}

全体イメージ