見出し画像

【Xcode】超初心者のためのSwiftUIチュートリアル15


Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第15回。前回に引き続き「Composing Complex Interfaces(複雑なインターフェースの作成)」を進めていきます(前回の記事はこちら)。

横スクロールでアイテムを一覧表示するホーム画面を作りますが、前回は横スクロールする行をランドマークのカテゴリーごとに作るところまで進みました。今回はそれぞれのランドマークの画像を一覧表示し、画像をタップすると詳細画面に遷移するところまで作っていきます。

Appleの公式チュートリアルはこちらを参照してください。日本語で閲覧したい場合は、自動翻訳機能のあるGoogleChromeなどのブラウザを使用するといいでしょう。

1.セクション4/ランドマーク一覧のビューを作成する

まずはそれぞれのランドマークの名前とイメージ画像を横並びに一覧表示するためのベースを作っていきます。CategoryRow.swift開いて、下線と囲みの部分を追記してください。

スクリーンショット 2020-04-29 18.04.18

CategoryItem(landmark: landmark)
struct CategoryItem: View {
   var landmark: Landmark
   var body: some View {
       VStack(alignment: .leading) {
           landmark.image
               .resizable() //画像をリサイズする
               .frame(width: 155, height: 155) //画像サイズ
               .cornerRadius(5) //画像の角の丸み
           Text(landmark.name) //ランドマーク名
               .font(.caption)
       }
       .padding(.leading, 15) //各ランドマーク画像の間隔
   }
}

これで各ランドマークのイメージ画像と名前が一覧表示されるようになります。表示されている画面がどのコードによって生成されているかは、下の図を見て確認してください。

スクリーンショット 2020-04-29 18.06.21

これができたらCategoryHome.swiftを開きプレビューで確認しましょう。リストの各行にCategoryRowの要素が反映されて、こんな感じになっているはずです。

スクリーンショット 2020-04-30 1.38.00


2.ホーム画面のトップにFeaturedの画像を表示する

そのまま続けてCategoryHomeを編集しましょう。ホーム画面の一番上にランドマークのひとつを大きな画像で表示します。下の四角で囲んだ部分を追記しましょう。

スクリーンショット 2020-04-30 1.54.04

import SwiftUI

struct CategoryHome: View {
   
   var categories: [String: [Landmark]] {
       Dictionary(
           grouping: landmarkData,
           by: { $0.category.rawValue}
       )
   }
   
   var featured: [Landmark] {
       landmarkData.filter { $0.isFeatured } 
   }
   
   var body: some View {
       
       NavigationView {
           List {
               FeaturedLandmarks(landmarks: featured)
                   .scaledToFill()
                   .frame(height: 200)
                   .clipped()
               
               ForEach(categories.keys.sorted(), id: \.self) { key in
                   CategoryRow(categoryName: key, items: self.categories[key]!)
               }
           }
           .navigationBarTitle("Featured")
       }
   }
}

//「Featured」で表示される画像の設定
struct FeaturedLandmarks: View {
   var landmarks: [Landmark]
   var body: some View {
       landmarks[0].image.resizable()//表示されるランドマークの配列を指定
   }
}

プレビューでこうなったらOKです。

スクリーンショット 2020-05-01 14.09.06

さらに端の余白(エッジインセット)をゼロにするコードを追加すると、デバイスの画面いっぱいに画像が表示されるようになります。下の2カ所に追記してください。

スクリーンショット 2020-05-01 14.10.47

これでFeaturedの画像とリストの余白が消えて、画面の左右いっぱいに表示されるようになります。並べて見比べると違いがわかりますね。

画像7


3.セクション5/ホーム画面にリンクを追加する

ここまでの作業で、3種類に分類されたランドマークがすべてホーム画面に表示されるようになりました。次は、詳細ビュー・ユーザープロファイル・お気に入りリストへのリンクをホーム画面に追加していきます。

3-1.CategoryRowでナビゲーションリンクを設定する

再びCategoryRowに戻りましょう。ScrollViewの中にナビゲーションリンクを設定します。チュートリアルに従って下のように書き加えてください。

スクリーンショット 2020-05-01 14.56.02

//詳細画面へのナビゲーションリンクの設定
NavigationLink(
    destination: LandmarkDetail(
        landmark: landmark
    )
) {
    CategoryItem(landmark: landmark)
}

コードの改行を省略して、下のように横長に書いてもOKです。このほうが初心者には中身が理解しやすいかもしれません。

スクリーンショット 2020-05-01 15.07.57

プレビュー画面はこうなります。

スクリーンショット 2020-05-01 15.23.54

3-2.イメージ画像と文字の表示を指定し直す

画像が表示されず文字色も薄くなるので、CategoryItemの部分にイメージ画像生成と、ランドマーク名の文字色指定のコードをそれぞれ書き加えましょう。

スクリーンショット 2020-05-01 15.32.23

これでイメージ画像とランドマーク名が元通りに表示されます。

スクリーンショット 2020-05-03 21.04.14


4.ユーザープロファイルとリストへのリンクを作成する

各ランドマークのリンクを作成できたので、ユーザープロファイルのアイコンと、アイコンをタップするとプロファイルを表示する動きを作ります。

4-1.ユーザープロファイルへのリンクボタン作成

ユーザープロファイルへのリンクを作成します。ユーザープロファイルのボタン画像やリンク機能はあらかじめXcode内に準備されていて、簡単なコードで呼び出せます(公式ページの説明はこちら)。

まずは下の赤線部分を書き加えましょう。

スクリーンショット 2020-05-01 16.13.56

@State var showingProfile = false
.sheet(isPresented: $showingProfile) { //ユーザープロファイルシートを設定
               Text("User Profile")
           }

次にボタンを作ります。下の赤線部分を追加しましょう。

スクリーンショット 2020-05-01 16.57.56

//ユーザープロファイルへのリンクボタンの設定
var profileButton: some View {
    Button(action: { self.showingProfile.toggle()}) {
        Image(systemName: "person.crop.circle")
             .imageScale(.large)
             .accessibility(label: Text("User Profile"))
             .padding()
    }
}
.navigationBarItems(trailing: profileButton)//ナビゲーションバーにプロフィールボタンを追加

これでユーザープロファイルへのリンクアイコンができました。ライブプレビューにして、アイコンをクリックします。

スクリーンショット 2020-05-03 21.38.05

これだけでユーザープロファイル用の画面が表示されます。簡単ですよね。

スクリーンショット 2020-05-03 21.38.19

しかしユーザープロファイル画面からホーム画面に戻るリンクは設定されていません。ユーザープロファイル画面を下にスライドするとホーム画面に戻ります。

Xcode内に用意されているアイコン
AppleはiOS13以降、Xcodeで作成するアプリ内で利用できるアイコン「シンボル」を提供しています。どんなシンボルがあるのか手っ取り早く見るには、XcodeをswiftUIではなくStoryboardで立ち上げ、ライブラリー(「+」アイコンをクリック)を開くと確認できます。

スクリーンショット 2020-05-03 23.40.18

4-2.ランドマークリストへのリンクを作成

ユーザープロファイルのリンクボタンができたら、次はLandmarkListへのリンクをホーム画面の下部に作成します。
まずCategoryHomeで、下の囲み部分をナビゲーションビューのリスト下部に追加しましょう。

スクリーンショット 2020-05-03 15.02.18

これでホーム画面の末尾にリンク用のテキストが表示されました。リンクさせるためにはLandmarkList.swiftを書き換える必要があります。開いて下のように書き換えましょう。

スクリーンショット 2020-05-03 22.06.03

これでホーム画面にすべてのランドマークの詳細画面とユーザープロファイル、ランドマークリストへのリンクができました。

画像19

次はWorking with UI Controls(UIコントロールの操作)に入ります。

関連記事は下のマガジンで読めます。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!
8
40代にしてプログラミングの勉強を始めました。swiftやmicro:bitについてあれこれ書いていきます。時々3Dプリンターについてもメモします。

こちらでもピックアップされています

超初心者のためのSwiftUIチュートリアルまとめ
超初心者のためのSwiftUIチュートリアルまとめ
  • 17本

Apple公式のswiftUIチュートリアルを、プログラミングを始めたばかりの超初心者でもわかるように解説した記事のまとめ。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。