【Xcode】超初心者のためのSwiftUIチュートリアル16
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回使っていますが、これには理由があります。
他のビューファイルで作成したイメージを流用するときには、
(1)イメージを元のビューファイルと同じ大きさのフレームで表示(レンダリング)
(2)原寸で表示したイメージを使いたい大きさに縮小
(3)フレームの大きさをイメージに合わせて縮小
という手順で、.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(編集モードを追加する)」に入ります。
関連記事は下のマガジンをご覧ください。
この記事が気に入ったらサポートをしてみませんか?