【Swift】iPhone搭載の電卓アプリをStoryBoard無しで作成!

SwiftのXcodeでiPhoneにも入っている電卓(計算機)アプリを全く同じというわけではありませんが、UI画面をドラック&ドロップで簡単に作成できるStoryBoardを使用せず、以下のように作成してみました。

完成品

もし、Swiftで計算機を作成している方や何を作るかで悩んでいる方はこの記事を見て参考にしてみてください。

そして、この作成したアプリは、iPhoneiPadなどにビルドして実際に使用することの確認もできます。

今回はSwiftでiPhoneに搭載されている電卓アプリをStoryBoardを使わずに作成する方法を以下の手順で作成してみます。

⚫︎ 電卓の完成のイメージ
⚫︎ 電卓に必要な部品を設置する
⚫︎ それぞれのボタンのアクションを設定する
⚫︎ 実際に動かしてみる

iPhone搭載の電卓アプリをStoryBoard無しで作成するには

iPhone搭載の電卓アプリをStoryBoard無しで作成するには「Xcode」を使用して作成する必要があります。

しかし、XcodeはMacのPCでしか使用することができませんので注意してください。

また、Xcodeのインストール方法や使い方についてはこちらをご参考ください。

電卓の完成のイメージ

電卓の完成のイメージは以下のようになります。

完成のイメージ

これとほぼ同じように作成していきます。

電卓に必要な部品を設置する

完成のイメージができましたら、Xcodeで下記のようにボタンやラベルなどの部品を設置していきましょう。

実装結果

ボタンやラベルの部品の設置が完了しました。
しかし、ボタンを押しても何も動きません。

それぞれのボタンのアクションを設定する

部品を設置できましたら、次はそれぞれのボタンのアクションを設定します。
各ボタンのアクションのコードをそれぞれ紹介していきます。

0〜9の数字のボタンのアクションを設定する

0〜9の数字のボタンのアクションは以下のように設定します。

⚫︎ ラベルに数字を出力する
⚫︎ 符号が入力されている場合はラベルを上書きする

それぞれのアクションのコードは下記のように記述します。
部品で作成したコードに追加して記述してください。

実装結果

0〜9の数字のボタンを押すと画面に入力した数字が表示されるようになっています。

符号のボタンのアクションを設定する

符号のボタンのアクションは以下のように設定します。

⚫︎ ボタンの押下後は背景色を白に変える
⚫︎ 別の符号ボタンを押すと上書きする

実装結果

符号のボタンを押すと、色が変わり他のボタンを押すと符号が上書きされて色が変わっています。

+/-のボタンのアクションを設定する

+/-のボタンのアクションは以下のように設定します。

⚫︎ 「-」と「+」を切り替えて出力する
(on状態では先頭に「-」、off状態では先頭の「-」を削除)

実装結果

+/-のボタンを押すと、先頭に「-」がつきもう一度押すと「-」が削除されています。

小数点のボタンのアクションを設定する

小数点のボタンのアクションは以下のように設定します。

⚫︎ 小数点をラベルに出力する
(小数点は一つのみ)
⚫︎ ラベルの値が「0」の場合にボタンを押下すると「0.」となる

実装結果

小数点のボタンを押すと、先頭に「-」がつきもう一度押すと「-」が削除されています。

%のボタンのアクションを設定する

%のボタンのアクションは以下のように設定します。

⚫︎ 数値をパーセントに直した値をラベルに出力する
(何回でも可能)

実装結果

パーセントのボタンを押すと、百分率の計算が行われています。

=のボタンのアクションを設定する場合

=のボタンのアクションは以下のように設定します。

⚫︎ 計算された結果をラベルに出力する

実装結果

=のボタンを押すと、計算された結果がラベルに表示されています。

ACのボタンのアクションを設定する

ACのボタンのアクションは以下のように設定します。

⚫︎ 設定されている値やアクションを全てクリア(初期化)する

実装結果

ACのボタンを押すと、全ての値やアクションが削除され、リセットされています。

実際に動かしてみる

コードが書けましたら、実際に動かしてみましょう。

実装結果

それぞれのボタンのアクションが正確で計算もきちんとされているので、これで完成です。

まとめ

今回は、SwiftでiPhone搭載の計算機を作成してみました。
iPhoneの電卓のコードはどのようになっているのかわかりませんが、近いところまで作成できたと思います。

また、ボタンを配列にし、filterを使って条件に引っかかるボタンだけ色に変えるというやり方は短いコードで実現できるのでとても便利だと思いました。

しかし、部品の配置するコードはもう少しきれいにかけるのではないかと思いますので、その辺りは改善していきたいです。

Writer

ST

株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報