XCode 12.4 日本語化計画：Swift Tutorials

SwiftUI Essentials (SwiftUI の本質)

ビューと移行のアニメーション

SwiftUI を使用すると、効果がどこに起こるかに関係なく、ビューまたはビューの状態への変更を個別にアニメーション化できます。SwiftUI は、これらの組み合わされた、重複する、中断可能なアニメーションのすべての複雑さを処理します。

このチュートリアルでは、ランドマークアプリの使用中にユーザーが行なうハイキングを追跡するためのグラフを含むビューをアニメーション化します。Animation(_:) 修飾子を使用すると、ビューをアニメーション化するのがいかに簡単であるかがわかります。

スタータープロジェクトをダウンロードしてこのチュートリアルに従うか、完成したプロジェクトを開いて自分でコードを調べてください。

20min 予想される時間

プロジェクト ファイル

Xcode 12

セクション 101

アプリにハイキングデータを追加




アニメーションを追加する前に、アニメーション化するものが必要です。このセクションでは、ハイキングデータをインポートしてモデル化し、そのデータをグラフに静的に表示するためのビルド済みのビューをいくつか追加します。










ステップ 1

ダウンロードしたファイルの Resources フォルダからプロジェクトの Resources グループに hikeData.json ファイルをドラッグします。[Finish(完了)] をクリックする前に、必ず [Copy items if needed(必要に応じてアイテムをコピー)] を選択してください。












ステップ 2

メニュー項目の [File(ファイル)] > [New(新規)] > [File(ファイル)] を使用して、プロジェクトの Model グループに Hike.swift という新しい Swift ファイルを作成します。




---




Landmark 構造体と同様に、Hike 構造体は Codable に準拠しており、対応するデータファイル内のキーと一致するプロパティがあります。





    Hike.swift



1. import Foundation
3. struct Hike: Codable, Hashable, Identifiable {
4. var id: Int
5. var name: String
6. var distance: Double
7. var difficulty: Int
8. var observations: [Observation]
10. static var formatter = LengthFormatter()
12. var distanceText: String {
13. return Hike.formatter
14. .string(fromValue: distance, unit: .kilometer)
15. }
17. struct Observation: Codable, Hashable {
18. var distanceFromStart: Double
20. var elevation: Range<Double>
21. var pace: Range<Double>
22. var heartRate: Range<Double>
23. }
24. }




ステップ 3

hikes 配列をあなたのモデルオブジェクトにロードしましょう。




---




hikeData を最初にロードした後で変更することは決してないため、@Published 属性でマークする必要はありません。





    ModelData.swift



1. import Foundation
2. import Combine
4. final class ModelData: ObservableObject {
5. @Published var landmarks: [Landmark] = load("landmarkData.json")
var hikes: [Hike] = load("hikeData.json")
6. }
8. func load<T: Decodable>(_ filename: String) -> T {
9. let data: Data
11. guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
12. else {
13. fatalError("Couldn't find \(filename) in main bundle.")
14. }
16. do {
17. data = try Data(contentsOf: file)
18. } catch {
19. fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
20. }
22. do {
23. let decoder = JSONDecoder()
24. return try decoder.decode(T.self, from: data)
25. } catch {
26. fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
27. }
28. }





ステップ 4

ダウンロードしたファイルの Resources フォルダからプロジェクトの Views グループに Hikes フォルダをドラッグします。[Finish(完了)] をクリックする前に、必ず [Copy items if needed(必要に応じてアイテムをコピー)] と [Create groups(グループを作成)] を選択してください。











新しいビューをよく理解してください。これらは連携して、モデルにロードされたハイクデータを表示します。





ステップ 5

HikeView.swift で、ライブプレビューをオンにして、グラフの表示と非表示を試してみてください。




---




各ステップの結果を試すことができるように、このチュートリアル全体でライブプレビューを使用してください。








セクション 1	セクション 2	セクション 3
セクション 4	セクション 5
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105