Help us understand the problem. What is going on with this article?

公式チュートリアルで学ぶ SwiftUI

More than 1 year has passed since last update.

※本記事は、一般に公開されている情報を元に作成しています。記事中の画像はApple Developerサイトのものを引用しております

これは何

WWDC 2019 で SwiftUI が発表されましたね!さっそく公式のチュートリアルも公開されているので、動かしながら SwiftUI を理解していきます。

実行環境

  • macOS Mojave 10.14.5(18F132)
  • Xcode 11 beta

サンプルプロジェクトをビルドしてみる。

次のサンプルをダウンロードします。

Handling User Input — SwiftUI Tutorials | Apple Developer Documentation

CompleteStartingPoint の2つのフォルダがありますが、今回は後者のフォルダにある xcodeproj をXcode 11で開きます。

そのまま実行すると次の画面が表示されるはずです。

image.png

ソースコードを読んでみる

チュートリアルのソースコードを読んでいきましょう。

リストに表示する行を作る部分

LandmarkRow.swift を開いてください。これがリストを構成するひとつひとつの「行」にあたります。

image.png

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image(forSize: 50)
            Text(landmark.name)
            Spacer()

            if landmark.isFavorite {
                Image(systemName: "star.fill")
                    .imageScale(.medium)
                    .foregroundColor(.yellow)
            }
        }
    }
}

LandmarkRow は View プロトコルを継承しています。このプロトコルには body というプロパティが定義されており、この中に表示するコンテンツを定義していきます。(つまり、body という名前を変更するとエラーになります)

HStack は View を水平に並べていくためのものです。このブロック内で表示したい画像やtextなどを並べていきます。Spacer() でスペースを開けることも可能です。

また、この例では Landmark モデルの isFavorite プロパティによって表示/非表示を出し分けています。

リストを表示する部分

次に LandmarkList.swift を開いてください。

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
            .navigationBarTitle(Text("Landmarks"), displayMode: .large)
        }
    }
}

同じように body に表示するコンテンツを定義していきます。

NavigationView は名前の通りナビゲーション構造を実装するためのものです。

List の中では、1行に表示するコンテンツを並べていきます。この例では先ほど作成した LandmarkRow を1行あたり1つずつ表示しています。

ナビゲーションバーに表示するタイトルは navigationBarTitle でセットできます。

ちなみに、この LandmarkList を SceneDelegate でセットしているため、起動直後にこの画面が表示されるものと思われます。

画面遷移

LandmarkList.swift をちょっと修正して、行をタップしたら次の画面に遷移するようにしてみましょう。

import SwiftUI

struct LandmarkList: View {
    @State var showFavoritesOnly = false

    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
            .navigationBarTitle(Text("Landmarks"))
        )
    }
}

LandmarkRow を NavigationButton(destination: LandmarkDetail(landmark: landmark)) { で包んでいるのがポイントです。こうすることで、各行をタップすると destination に指定した view に画面遷移するようになります。また、その際に渡すデータもセットしています。

所感

SwiftUI は宣言的にUIが書けるのが楽しいですね。UITableView のように cellForRowAtIndexPathdidSelectRowAtIndexPath を定義する必要がないのはだいぶ楽です。個人的には Android の Groupie に使い方が似ているなーと感じました。

今回は単純にデータを画面に出すところまで解説しましたが、チュートリアルではトグルスイッチを使ったフィルタリングなども実装していますので、興味のある方は実際に動かしてみることをおすすめします!

リンク

koogawa
ドラムも叩けるプログラマです。iPhoneアプリ、Androidアプリ、mixiアプリを仕事/趣味で作ってます。主な作品 → http://bit.ly/koogawa
http://d.hatena.ne.jp/koogawa/
alu-inc
アルは、マンガファンがもっとマンガを楽しめるサービスを作るために立ち上げられた、テクノロジー企業です。
https://alu.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした