SwiftUIで新型コロナウイルスの感染状況追跡アプリを作る

Swift

Aug 1

SwiftUIでiOSアプリを作るチュートリアル

今回はXcodeの新しいSwiftUIというビルダーを使って、新型コロナウイルスの感染状況を追跡できるアプリを作っていきました。

SwiftUIとは？

SwiftUIはApple社がWWDC 2019で発表した新しいUI(ユーザーインターフェイス)ビルダーです。UIKitと違い、SwiftUIに対し、UIがこういう風に見えたら良いなと伝え、SwiftUIは実際にどういう風にそれを叶えるかを自動で計算して作成します。(Imperative UI –> Declarative UI)

つまりUIKitより簡単にUIを作成することができ、しかもSwiftUIはクロスプラットフォームUIレイヤーとしてUIを作ることができるので、iOS、macOS、tvOS、さらにはwatchOSすらもSwiftUIでUIを作ることができます。

新型コロナウイルス感染状況追跡アプリ

感染状況を追跡するのは普通は簡単なことではありません。毎日各オフィシャルデータを確認しなきゃ行けないからです。なので今回はCovid19Japan.comのデータを使わせて頂きました。Covide19Japan.comはデータをJSONデータとして公開されていたので、SwiftのJSONDecoderを使って、データをパースしていきました。

今回のポイント

今回のアプリのポイントはどうやってSwiftUIで横スクロールの棒グラフを作るかですね。

まぁ横スクロールはScrollView(.horizontal)で対処するとして、どうやって棒グラフの中の棒を作るかですよね。作り方を下記します。

VStack {
    HStack {
        Spacer()
    }
    .frame(width: 8, height: 300)
    .background(Color.red)
}

VStackの中にframeがついたHStackを入れるという、なかなかすぐには思いつかないようなシンタックスですが、言われてみれば「あー、そういうやり方があるのか」という感じになると思います。

他のコードは基本的に単純だと思います。

他にナビゲーションバーをどうやってつけるのかですが、下のようにNavigationViewをつけることができます。

NavigationView {
    
    //ここに他のViewを入れます。
//    SomeView {
//
//    }
    
    .navigationBarTitle("COVID-19", displayMode: .inline)
    .navigationBarItems(leading: Button(action: {
        print("前の情報を表示します・")
    }, label: {
        Text("前")
    }), trailing: Button(action: {
        print("次の情報を表示します・")
    }, label: {
        Text("次")
    }))
}
.navigationViewStyle(StackNavigationViewStyle())

ナビゲーションビュー自体はNavigationView、そしてタイトルは.navigationBarTitle(“タイトル名”)、ナビゲーションボタンは.navigationBarItems()で中にボタンを入れるという感じですね。

このナビゲーションは多くのアプリに使うことができると思いますので、必ず覚えておいてください。

以上、簡単な文面での解説でした。

動画で分かりにくいことあればぜひコメント欄で教えてください！

日本語XcodeSwiftSwiftUIiOS