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

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

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

こんにちは、Swift Coderのケイゴです。

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

Advertisements

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を作ることができます。

Advertisements

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

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

Advertisements

今回のポイント

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

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

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

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

    

Advertisements

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

他にナビゲーションバーをどうやってつけるのかですが、下のように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()で中にボタンを入れるという感じですね。

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

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

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s