シンプルなWatchOSアプリを作る

WatchOS用のミニアプリを作る、そのアプリでリューズの回転の使い方も解説します今回はゼロから新しいアプリを作りたいと思います。

これから作るアプリのスクリーンショット

SwiftUIで実装しています。WatchOSでは、iOSなどと比較し使用できるフレームワークやOSSに成約があるため注意が必要です。

このアプリは、ユーザーが今日食べるべき果物を提案し、もしそれが気に入らない場合は、ボタンをクリックすることで果物を変更するできます。また、回転するCrownでフルーツの文字サイズを変更できます。

設計

最初に、いくつかの果物を含む配列を定義する必要があります。

@State var fruits = ["🍎 Apple", "🍒 Cherries", "🍓 Strawberry", "🥭 Mango"]

今のところはこれで十分です。(@State アノテーションを追加することを忘れないでください。これは、この変数が後で変更される可能性があることを意味します)

フルーツを表示してランダムに変化させる

では、今日の果物を表示し、毎ターンランダムに果物が手に入るようにしましょう。

var body: some View {
        VStack{
            Text(fruits[0])
                .font(.system(size: 20))
        }
        .padding()
        .onAppear{
            fruits.shuffle()
        }
}

VerticalStackを作成し、それをText要素に入れ、その中にfruits配列の最初の要素を入れています。そして、UIが表示されるたびに配列をシャッフルしています。

ボタンとフッターテキストの追加

同じように、新しい果物をランダムに生成するためのボタンを追加して、デザインを少し美しくしてみましょう。

var body: some View {
        VStack{
            Text(fruits[0])
                .font(.system(size: 20))
            Spacer()
            Button("Random"){
                fruits.shuffle()
            }
            Spacer()
            Divider()
            Spacer()
            Text("Rotate the digital crown to change text size")
                .font(.footnote)
                .multilineTextAlignment(.center)
        }
        .padding()
        .onAppear{
            fruits.shuffle()
        }
    }

私たちのデザインは完成しました。あとは、約束した機能を確実に実現していきます。

機能性

リューズを回転させるトリガーとなるシンプルなシステムを追加する必要があります。これは、私たちが決めた範囲での回転量を指します。

@State var scrollAmount = 10.0

この変数はアプリ内のテキストのサイズを意味します。

Text(fruits[0]).font(.system(size: scrollAmount))

.focusable() と .digitalCrownRotation($scrollAmount) のコードを VStack に追加します。 (フォーカス可能であることは重要です。これなしではコードは機能しません)

VStack{
    // Our design
}
.focusable()
.digitalCrownRotation($scrollAmount)

これでリューズの回転量の値が分かりました。しかし、範囲の最小値、最大値、増加量がないという問題がまだあります。関数に次のようなパラメータを渡します。

VStack{
    // Our design
}
.focusable()
.digitalCrownRotation($scrollAmount, from: 10, through: 20, by:1, isContinuous: false)

最小値、最大値、増加量を決定しました。 WatchOSアプリではテキストが小さすぎたり大きすぎたりするのは適切ではないため、これは重要です。それらを制限する必要があります。

最終的なコード

すべてのソースコードは下記をご覧ください。

import SwiftUI

struct ContentView: View {
    @State var fruits = ["🍎 Apple", "🍒 Cherries", "🍓 Strawberry", "🥭 Mango"]
    @State var scrollAmount = 14.0
    var body: some View {
        VStack{
            Text(fruits[0])
                .font(.system(size: scrollAmount))
            Spacer()
            Button("Random"){
                fruits.shuffle()
            }
            Spacer()
            Divider()
            Spacer()
            Text("Rotate the digital crown to change text size")
                .font(.footnote)
                .multilineTextAlignment(.center)
        }
        .padding()
        .focusable()
        .digitalCrownRotation($scrollAmount, from: 10, through: 20, by:1, isContinuous: false)
        .onAppear{
            fruits.shuffle()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}