はじめに
この記事はSwiftUI入門 1.カウンターアプリをつくろうの続きになります。まだ読んでいないという人は先にこっちを読むのをおすすめします。
それでは今回もがんばっていきましょう！
環境
- Mac mini 2020
- チップ: Apple M1
- メモリ: 16GB
- OS: macOS Sequoia
- ツール: Xcode v16.2
つくるもの
- Resetボタンで数字を0にする
- 数字が3の倍数のときは数字を赤色にする
GitHubのリポジトリ
TODO
- Resetボタンを設置する
- Resetボタンを押すと数字を0にする
- 3の倍数のとき数字を赤にする
開発
それではTODOに沿って開発をしていきましょう！！
Resetボタンを設置する
上の画像のように配置します。
このとき、ResetボタンとTapボタンをHStackで並べると綺麗に並ぶと思います。
ソースコードはこうなります。
import SwiftUI
struct ContentView: View {
@State var count: Int = 0
var body: some View {
VStack {
Text(String(count))
.font(.largeTitle)
.fontWeight(.regular)
HStack {
Button("Reset") {
}
Button("Tap") {
count += 1
}
}
}
.padding()
}
}
#Preview {
ContentView()
}
これでResetボタンを設置できましたね！
では、次にResetボタンの処理を書きましょう。
Resetボタンを押すと数字を0にする
Resetボタンを押すと数字を0にする機能を実装していきます。
数字は変数countで管理しているため、これを0にすればよさそうですね。
Button("Reset") {
count = 0
}
こうすればよさそうです。
import SwiftUI
struct ContentView: View {
@State var count: Int = 0
var body: some View {
VStack {
Text(String(count))
.font(.largeTitle)
.fontWeight(.regular)
HStack {
Button("Reset") {
count = 0
}
Button("Tap") {
count += 1
}
}
}
.padding()
}
}
#Preview {
ContentView()
}
3の倍数のとき数字を赤にする
まず、数字が3の倍数であるかを調べるには
if (count % 3 == 0) {
}
でよさそうですね。
次は色を変更する方法について考えてみましょう。
Textの文字の色は
.foregroundColor(_ color: Color?)
を使えばよさそうです。
つまり、今回の場合テキストを赤にするなら
Text(String(count))
.foregroundColor(.red)
にすればよさそうですね。
そして、色を変数で管理するようにし3の倍数のときに赤にしてそれ以外は黒にするようなプログラムを書けばいいわけです。
それでは書いてみましょう。
struct ContentView: View {
@State var count: Int = 0
@State var textColor: Color = .black
var body: some View {
VStack {
Text(String(count))
.font(.largeTitle)
.fontWeight(.regular)
.foregroundColor(textColor)
HStack {
Button("Reset") {
count = 0
textColor = .black
}
Button("Tap") {
count += 1
if (count % 3 == 0) {
textColor = .red
} else {
textColor = .black
}
}
}
}
.padding()
}
}
#Preview {
ContentView()
}
少し細かく説明しますね。
@State var textColor: Color = .black
でColor型の変数を宣言し、.blackで初期化しておきます。この型は名前の通り色を管理するenumです。
@Stateをつけているのは、前回同様UIに変更を自動で反映させるためです。
次に
Button("Tap") {
count += 1
if (count % 3 == 0) {
textColor = .red
} else {
textColor = .black
}
}
これがメインとなるコードですね。
ここではcountが3の倍数であるときにtextColorを.red、それ以外のときは.blackにしています。これにより、3の倍数のときは赤、それ以外のときは黒にすることができます。
import SwiftUI
struct ContentView: View {
@State var count: Int = 0
@State var textColor: Color = .black
var body: some View {
VStack {
Text(String(count))
.font(.largeTitle)
.fontWeight(.regular)
.foregroundColor(textColor)
HStack {
Button("Reset") {
count = 0
}
Button("Tap") {
count += 1
if (count % 3 == 0) {
textColor = .red
} else {
textColor = .black
}
}
}
}
.padding()
}
}
#Preview {
ContentView()
}
次は最後の仕上げです。
このまま実行してみてください。
なにかおかしい点があると思います。
3の倍数になると、数字が赤色になりますよね。その状態でResetボタンを押してください。
そうすると、0なのに赤色になってしまいました！
なぜなら、Resetボタンを押すときの処理の中には数字の色を変更するプログラムを記述していないからです。
では、Resetボタンを押したときの処理の中で、Textを.blackにするソースコードを書いてみましょう。
Button("Reset") {
count = 0
textColor = .black
}
こうすることでResetボタンを押すたびにTextを黒にできますね。
これで全ての機能を実装できました！
さいごに
これで全てのTODOを終わらせることができました！！
ソースコードはこちらです。
import SwiftUI
struct ContentView: View {
@State var count: Int = 0
@State var textColor: Color = .black
var body: some View {
VStack {
Text(String(count))
.font(.largeTitle)
.fontWeight(.regular)
.foregroundColor(textColor)
HStack {
Button("Reset") {
count = 0
textColor = .black
}
Button("Tap") {
count += 1
if (count % 3 == 0) {
textColor = .red
} else {
textColor = .black
}
}
}
}
.padding()
}
}
#Preview {
ContentView()
}
というわけで、これで完成です
今回は前回に比べて結構簡単だったと思います。
そして、私は今回のようにちょっとした機能のならとても少ないコードで実装できることがSwiftUIのよいところだと思いました。SwiftUIって結構便利なんですねー
それでは、これからも頑張っていきましょう！！
お疲れ様でした！
次回: [SwiftUI入門] 3.タスクキルしても情報を保存するようにしよう！
前回: SwiftUI入門 1.カウンターアプリをつくろう