Apple公式のSwiftUIチュートリアルを、プログラミング超初心者向けに優しく解説するシリーズ第16回。今回からWorking with UI Controls（UIコントロールの操作）に入ります（前回の記事はこちら）。

ここではランドマークアプリのユーザープロファイルの画面を作成して、ユーザーがプロファイルの中身を編集できるように設定していきます。

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

1.セクション1/追加ファイルの確認と新規ファイルの作成

いつもの通り、プロジェクトファイルをダウンロード・解凍しましょう。

ダウンロードしたフォルダWorking with UI Controlsの「StartingPoint」からプロジェクトファイルを開き、中のファイルを確認しましょう。
前回までCategoryHome.swiftだったファイルはHome.swiftに名前が変更されました。さらに「Models」フォルダにはProfile.swiftが新たに追加。ここにはユーザープロファイルのサンプルデータが入っています。

このProfile.swiftのデータを使ってユーザープロファイルを作成していきます。まず新しいファイルを作りましょう。これはユーザープロファイルのビューファイルになります。手順はいつもの通りです。

SwiftUI Viewを選びNextをクリック。

ファイル名はProfileHost.swiftにします。Groupで「Landmarks」フォルダを選択したら「Create」をクリックします。

作成したファイルは「Models」フォルダの上に表示されるので、自分でわかりやすいところに移動して整理しておきましょう。

このProfileHost.swiftを開き、中身を書き換えます。

プレビューではProfile.swiftの値が代入されて、以下のように表示されます。

2.Home.swiftでプロファイル表示の内容を置き換える

Home.swiftを開きます。ユーザープロファイルに関する部分を、先ほど作成したProfileHostに置き換えていきましょう。

まずはUserDataを下のように追加します。

@EnvironmentObject var userData: UserData

さらに表示されるプロファイルの中身Text("User Profile")をProfileHostに置き換えていきます。図のように書き換えてください。これでボタンをタップするとProfileHostで作ったビューを表示するようになりました。

ProfileHost()
    .environmentObject(self.userData)

3.ProfileSummary.swiftビューファイルを作成する

Home.swiftの書き換えが終わったら、新しいビューファイルをもうひとつ作ります。ProfileHost.swiftを作ったのと同じ手順でProfileSummary.swiftを作成してください。

そして中を次のように書いていきましょう。

import SwiftUI

struct ProfileSummary: View {
   
   var profile: Profile
   
   static let goalFormat:DateFormatter = {
       let formatter = DateFormatter()
       formatter.dateStyle = .long
       formatter.timeStyle = .none
       return formatter
   }()
   
   
   var body: some View {
       List {
           Text(profile.username)
           .bold()
               .font(.title)
           
           Text("Notifications: \(self.profile.prefersNotifications ? "On": "Off" )")
           
           Text("Seasonal Photos: \(self.profile.seasonalPhoto.rawValue)")
           
           Text("Goal Date: \(self.profile.goalDate, formatter: Self.goalFormat)")
       }
   }
}

これでProfileSummary.swiftは、Profile.swiftの中にあるdefaultの値を読み込んでプレビューに表示されます。GoalDateは設定されていないので、その時の日付が表示されます。

今度はプロファイルのメインビュー（親ビュー）であるProfileHost.swiftを書き換えていきましょう。

VStack(alignment: .leading, spacing: 20) {
           ProfileSummary(profile: draftProfile)
       }
       .padding()

これでProfileHostのプレビューを更新すると、ProfileSummaryの内容が表示されます。

4.HikeBadgeのシンボルをProfileHostに表示する

今度は前に「Drawing Paths and Shapes（パスとシェイプの描画）」（10〜11回）で作成したBadge.swiftのシンボル画像を流用してProfileHostに表示しましょう。

4-1.新しいビューファイルを作る

HikeBadge.swiftという名前で新しいビューファイルを作りましょう。
できたらファイルを開いて、次のように書いていきます。

import SwiftUI

struct HikeBadge: View {
   var name: String
   var body: some View {
       VStack(alignment: .center) {
           Badge()
               .frame(width: 300, height: 300)//元イメージの原寸大フレームで描画（レンダリング）
               .scaleEffect(1.0 / 3.0)        //イメージを3分の1に縮小
               .frame(width:100, height: 100) //フレームを3分の1サイズに指定
           Text(name)
               .font(.caption)
           .accessibility(label: Text("Badge for \(name)."))
       }
   }
}

struct HikeBadge_Previews: PreviewProvider {
   static var previews: some View {
       HikeBadge(name: "Preview Testing")
   }
}

これでHikeBadgeのプレビューにBadge.swiftの3分の1に縮小されたイメージ画像が表示されます。バッジの意味を表すテキストも一緒に表示できるようにします。

Badge表示の修飾子で.frameを2回使っていますが、これには理由があります。

他のビューファイルで作成したイメージを流用するときには、
（１）イメージを元のビューファイルと同じ大きさのフレームで表示（レンダリング）
（２）原寸で表示したイメージを使いたい大きさに縮小
（３）フレームの大きさをイメージに合わせて縮小
という手順で、.frameでのサイズ指定を2回行います。そうすることで元のイメージ通りの形に、きめ細かな画像で表示できるのです。

Badge()を最初から3分の1サイズでレンダリングすると、形の崩れたキメの粗い画像になります。下のように画像を拡大して比較するとわかりやすいでしょう。

4-2.Badge画像をProfileSummaryに追加する

バッジの縮小イメージを作成したら、これをProfileSummaryに表示しましょう。下の部分を書き加えてください。

Vstackに3つの色違いのバッジを表示します。HikeBadgeを元画像にして、色の変更に.hueRotation()と.grayscale()という修飾子を使っています。

hueRotationとは「色相回転」のことです。Xcodeの色相環図をもとにざっくりと説明すると、基準になる任意の色を0°として、角度（degree）指定で色を変更します。例えば基準0が下の図のようにオレンジっぽい色だとすると、.hueRotation(45)で黄緑っぽい色に、.hueRotation(90)にすると青に近い緑になります。120や180にすると、もっと青みがかった色になります。

grayscaleグレースケールは色の鮮やかさを変更します。数値が0に近いほど元の色に近くなり、1に近づくほど白黒へと変化します。
どちらも自分でカッコの中の数値を変更して、どのようにビューが変化するか実際に確認すると理解しやすいでしょう。

このようにして3つの色違いのBadge画像を作成して横並びに表示します。

5.HikeViewのグラフ画像をProfileSummaryに追加する

ProfileSummaryにBadgeのイメージを表示できたので、今度はその下にグラフ画像HikeViewを表示するコードを加えます。

//グラフを表示
VStack(alignment: .leading) {
    Text("Recent Hikes")
        .font(.headline)
               
     HikeView(hike: hikeData[0])
}

これでHikeViewの画像が呼び出され、グラフの画面が追加されます。現段階でのライブプレビューはこんな感じです。

うまくいったでしょうか。次回はセクション2「Add an Edit Mode（編集モードを追加する）」に入ります。

関連記事は下のマガジンをご覧ください。