はじめに
今回はSwiftUIを使って、AppleWatchアプリのヘルスケアやワークアウトでよく見るリングゲージを作ってみたいと思います。
Apple Watchでよく見るバッチ？というか、円形のグラフ？というか、円状でリングを閉じていくあのグラフです。
Digital Crownでパラメータを取得して簡単な棒ゲージを作りつつ、リングゲージを動かせるデモを作っていきたいと思います。
Swift UI
Swift UIを使って、DigitalCrownから値を取得して、棒ゲージとリングゲージを書いていきたいと思います。
それでは、早速、プロジェクトを新規作成して、ContentView.swiftの中に書いていきます。
DigitalCrownの値を取得
公式チュートリアルによると、「.digitalCrownRotation($変数名, from: 0, through: 100)」というモディファイアで取得できるようです。
ドルマークをつけた変数名に、0から100までとして値を渡してくださいという命令になっています。
「.focusable(true)」にしないとDigitalCrownの値がうまく取得できなかったのでお忘れなく！
Text関数のモディファイアとして記述してみました。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { @State var sSomeValue = 0.0 var body: some View { VStack{ Text("Value:: \(sSomeValue)") .digitalCrownRotation($sSomeValue,from: 0,through: 100) .focusable(true) } } } |
ライブビューモードでは見れないので、
シミュレータを起動して確認みました。
以下のように値が表示されると思います。
DigitalCrownをマウスホイールでくるくる回してみると、値が変化するのが確認できると思います。
棒ゲージを作る
次に棒ゲージを書いてみます。
白い棒ゲージを下に描画し、赤い棒ゲージ上に描画することで最大値と現在地を視覚的に表現できるようなUIデザインを作ってみます。
赤い棒ゲージの方に、DigitalCrownの値を渡してアニメーションさせてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
struct ContentView: View { @State var sSomeValue = 0.0 var body: some View { VStack{ Text("Value:: \(sSomeValue)") ZStack{ Capsule() .frame(width: 100, height: 10) .foregroundColor(.white) // red var Capsule() .position(x: 50, y:5) .frame(width: CGFloat(sSomeValue), height: 10) .foregroundColor(.red) .focusable(true) .digitalCrownRotation($sSomeValue,from: 0,through: 100) } } } } |
リングを作る
次にリングを作成してみます。
「Circle()」関数に「.trim(from: 0, to: 1) 」モディファイアを設定することで、
リングの欠け具合を変更することができます。
DigitalCrownの値をCGFloat形としてキャストして、渡してあげることで、リングを作ることができます。
また、リングが欠けていく開始地点を「.rotationEffect」モディファイアで調整しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import SwiftUI struct ContentView: View { @State var sSomeValue = 0.0 var body: some View { VStack{ Text("Value:: \(sSomeValue)") ZStack{ Capsule() .frame(width: 100, height: 10) .foregroundColor(.white) // red var Capsule() .position(x: 50, y:5) .frame(width: CGFloat(sSomeValue), height: 10) .foregroundColor(.red) .focusable(true) .digitalCrownRotation($sSomeValue,from: 0,through: 100) } ZStack{ Text("\(Int(sSomeValue))") Circle() .stroke(Color.white, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round)) .rotationEffect(.degrees(240)) .frame(width: 80, height:80) Circle() .trim(from: CGFloat(sSomeValue / 100.0), to: 1) .stroke(Color.red,style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round)) .rotationEffect(.degrees(240)) .rotation3DEffect(Angle(degrees: 100), axis: (x: 0, y: 0, z: 0)) .frame(width: 80, height: 80) } } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } |
DigitalCrownを回すとこんな風にグラフを調整できるようになりました。
※シミュレータ上ではDigitalCrownはマウスホイールで操作することができます。
まとめ
今回は、SwiftUI で棒ゲージとリングゲージを作ってみました。
棒ゲージはCapsule関数を細長くして作ることができました。
リングゲージはCircle関数に「.trim」モディファイアを設定して作ることができました。
Swift UIの誕生でUIデザイナーとプログラマーの壁がグッと縮まったような気がしますね！