[Xcodeレシピ#01]１００均のカウンターアプリを作ろう

博物館や動物園の入り口とかで人の数を数えたり、野鳥を観察する人が鳥の数を数えるために手に持っているあのかちゃかちゃする道具、数取器カウンター。あんなの簡単にプログラミングで作れそうですね。では、作っていきましょう。

まずは、新規XcodeProjectを開きましょう(開き方)。次にコードを書いていきます。でもその前に、どんなものを作りたいかイメージしましょう。１００均で売っているカウンターをアプリ化するので、ボタンをタップしたら表示される数が一つ増える。逆に減るボタンとかつけるのもありかも。もちろん　0 にリセットするボタンもつけましょう。

まずは変数を決めましょう。今回は count という変数を struct ContentViewの下に追加。

struct ContentView: View {
    @State var count: Int = 0
    
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

そして Text("Hello, world!").padding() の部分を数字を表示するビューに変えます。"Hello, world!"を消して"\(count)"に変えましょう。\()は何かと言いますと、もしこれなしで書いたら "count"となって、ただcountと画面に表示されちゃいます。そうじゃなくてcountという名前の変数が持つ値を表示して欲しいから\()の()の中にcountとかいて　0 と表示してもらうわけです。ついでに、文字のサイズも大きくしましょう。
※　\()の　\　マークは⌥+ ¥ でいけます。

Text("\(count)").font(.largeTitle)
            .padding()

次に数を足すボタンを追加したいけど、Textの下そのままかくとビューが二つ以上になってしまいます。これはSwiftUIが画面に複数のボックス要素を作りそれを敷き詰めてデザインを作り上げる方式であり、TextビューとButtonビューが別のボックスとなってしまうので、スタックビューの中で書いて一つのビューの中に別のボックスがあるみたいな状況に持ってくわけです。そのために,
Text("\(count)").paddingをVStackの中に要素にしてしまいましょう。⌘を押しながらTextの部分をクリックするとポップアップメニューが出てくるのでそこで「Embed in VStack」を選択。

そして、Textの下に数を足すボタンを作りましょう。押すとcountが１上昇して、ボタンのビューは青いまるにプラスボタンにでもしましょうか。まあ、これを参考にお好みのボタンを作ってください。

 var body: some View {
        VStack {
            Text("\(count)").font(.largeTitle)
                .padding()
            Button(action:{
                count += 1
            }){
                Text("+").font(.largeTitle).foregroundColor(.white)
                    .background(Circle().frame(width: 80, height: 80, alignment: .center))
            }
        }
    }

シンプル

見栄えが悪いので数字を真ん中にして、ボタンを下中央に配置しましょう。その時に活躍するのがSpacer()。Text()の上と下にSpacer()を入れてあげましょう。Spacer()が押し合ってボタンが一番下、文字が真ん中あたりにくるようになりました。

var body: some View {
        VStack {
            Spacer()
            Text("\(count)").font(.largeTitle)
                .padding()
            Spacer()
            Button(action:{
                count += 1
            }){
                Text("+").font(.largeTitle).foregroundColor(.white)
                    .background(Circle().frame(width: 80, height: 80, alignment: .center))
            }
        }
    }

数字を中央に

次に、数を１少なくするボタンとリセットするボタンを作りましょう。ここで、SFシンボルというのを使います。詳しくはこちらのImageビューのセクションで。
ーボタンを押すとcountから１引いて、リセットボタンを押すとcountを0に設定するものを書いていきます。これらのボタンはそれぞれ＋ボタンの左と右に置きたいので+ボタンを一度ZStackで囲います。そこにHStackを+ボタンに重ねると+ボンタンは中央からずれないということです。

import SwiftUI

struct ContentView: View {
    @State var count: Int = 0
    
    var body: some View {
        VStack {
            Spacer()
            Text("\(count)").font(.largeTitle)
                .padding()
            Spacer()
            ZStack {
                HStack {
                    Spacer()
                    Button(action: {
                        count -= 1
                    }){
                        Text("-").font(.largeTitle).foregroundColor(.white)
                            .background(Circle().frame(width: 50, height: 50, alignment: .center))
                    }
                    Spacer()
                    Spacer()
                    Spacer()
                    Button(action: {
                        count = 0
                    }){
                        Image(systemName: "return.left").font(.largeTitle).foregroundColor(.white)
                            .background(Circle().foregroundColor(.red).frame(width: 50, height: 50, alignment: .center))
                    }
                }
                Button(action:{
                    count += 1
                }){
                    Text("+").font(.largeTitle).foregroundColor(.white)
                        .background(Circle().frame(width: 80, height: 80, alignment: .center))
                }
            }
        }
    }
}

一応、完成！

これで一応完成ですね！「Resume」ボタンを押してプレビューしてみましょう。＋ボタンを押せば表示される数字が増えて、ーボタンを押せば減る。
とても簡単な仕組みですがここにどんどん欲しい機能をつければ可能性は無限大です。

今回は１００均のカウンターをSwiftUIで作ってみました。