AppleWatchアプリを作ってみる（１）ボタンをタップするとテキストが変化

2021年10月4日2021年10月6日

AppleWatchアプリを作りたくてMacBookAirを買ってしまってからはや１週間。まだデフォルトアプリしか作っていません。

WindowsユーザーがMacBookAirを購入してみた（２）XcodeインストールとiOSとwatchOSのアップデートに合計10時間かけてAppleWatch実機で”HelloWorld”

そこで、１個くらい超簡単なアプリを作ってみることにしました。SwiftUIによるAppleWatchアプリの作成は、おそらく、iOSアプリ作成と多くの違いはないと思われますので、以下の本を参考にしました。2021年時点で、たぶん、この本がiOSアプリ入門本として一番わかり易いと思います。

Contents

1. ソースコード
2. AppleWatchアプリを作ってみる　目次
3. 開発環境
4. 新規watchOSアプリの作成
5. View > Show LibraryでButtonを追加
6. VStackを用いてテキストとボタンを縦に並べる
7. ボタンを押すとテキスト表示が変更されるようにする
8. Buttonの色を変える
9. 実機での確認
10. ソースコード

ソースコード

https://github.com/adash333/AppleWatchButton

AppleWatchアプリを作ってみる　目次

開発環境

MacBookAir (M1, 2020)
macOS Big Sur 11.6
git version 2.30.1 (Apple Git-130) (最初から入っていたもの)
xcode-select version 2384.
Homebrew 3.2.13
VisualStudioCode 1.60.2

iPhone12mini, iOS 15.0
AppleWatch Series 6, watchOS 8.0

新規watchOSアプリの作成

Xcodeを起動し、「Create a new Xcode project」をクリックします。

watchOS > Watch App > Next　の順にクリックします

プロジェクト名を入力して、Next　をクリックします。

保存場所を選択する画面が出てくるので、

Users > {ユーザ名} > src　フォルダを選択（src フォルダを、Documentsと同じ階層に新規作成しておきます）して、Create　をクリックします。

場所は、デスクトップでもかまいませんが、あとでデスクトップにたくさんフォルダができるのは見栄えが悪いので、このようにしました。

以下のような画面になるので、とりあえず、Resume　を押して、Previewを表示します。

以下のように、Preview画面が表示されます。

View > Show LibraryでButtonを追加

ボタンを追加します。

下図のように、13行目の最後でreturnを押して改行し、ボタンを挿入したい部分のコードの部分に、カーソルをあわせます。

View > Show Library　の順にクリックして、

Viewsのウィンドウが出てくるので、Buttonをクリックします。

すると、ボタンのコードがContentView.swiftの14行目に挿入され、Preview画面にも、Buttonが表示されます。

VStackを用いてテキストとボタンを縦に並べる

https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views

VStackで、テキストやボタンを縦に並べることができます。

VStack(alignment: .center) {
    Text("Hello, world!")
        .padding()
    Text("Apple Watch")
        .padding()
}

今回は、以下のようにします。

        VStack() {
            Text("Hello, World!")
                .padding()
            Button(action: {}) {
                Text("Button")
            }

すると、一つの画面に、テキストとボタンが縦に並びました。

参考：https://swiftui.i-app-tec.com/ios/vstack.html
[SwiftUI] VStackの配置、余白、背景色等の設定　 2021/3/9

ボタンを押すとテキスト表示が変更されるようにする

“state”というものを利用するそうです。

https://developer.apple.com/documentation/swiftui/managing-user-interface-state

具体的には、以下のようにコードを変更します。

struct ContentView: View {
    
    @State var outputText = "Hello, World2!"
    
    var body: some View {
        VStack() {
            Text(outputText)
                .padding()
            Button(action: {
                outputText = "Hi Swift!"
                
                print("デバッグテスト")
                print(outputText)
            }) {
                /*@START_MENU_TOKEN@*/Text("切り替えボタン")/*@END_MENU_TOKEN@*/
            }
        }
    }
}

上記コードを変更した後、Preview画面の右上の”Resume”をクリックすると、しばらくすると、以下のような画面になります。

Preview画面で実行（三角のボタン）をクリックした後、画面内の「切り替えボタン」を押すと、上のテキストが、ちゃんと”Hi Swift!”に変わるのが確認できます。

Buttonの色を変える

Canvasエリアでボタンをクリックした状態で、Inspectorsエリアの下の方の、”Add Modifier”の中にtint と入れて、tintを選択し、blueを選択します。（または、その左側のEditor Areaにコードを以下のように書き込みます。）

            .tint(.blue)
            .buttonStyle(.bordered)

最終的なContentView.swiftは以下のようになります。

import SwiftUI

struct ContentView: View {
    
    @State var outputText = "Hello, World2!"
    
    var body: some View {
        VStack() {
            Text(outputText)
                .padding()
            Button(action: {
                outputText = "Hi Swift!"
                
                print("デバッグテスト")
                print(outputText)
            }) {
                /*@START_MENU_TOKEN@*/Text("切り替えボタン")/*@END_MENU_TOKEN@*/
            }
            .tint(.blue)
            .buttonStyle(.bordered)
        }
        
    }
}

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

参考：[SwiftUI] Button を簡単に作成する(2021/3/9)
https://stackoverflow.com/questions/58928774/button-border-with-corner-radius-in-swift-ui