アプリのデザインとレイアウト

複雑なインターフェースの構成





訳注:以下、必要な場所においては Mac と iPhone 両方のセクションを提供しています。
Mac → セクション 4、iPhone → セクション 104 とします。







    CategoryHome.swift


  1. import SwiftUI
  2. struct CategoryHome: View {
  3. @EnvironmentObject var modelData: ModelData
  4. var body: some View {
  5. NavigationView {
  6. List {
  7. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
  8. CategoryRow(categoryName: key, items: modelData.categories[key]!)
  9. }
  10. }
  11. .navigationTitle("Featured")
  12. }
  13. }
  14. }
  15. struct CategoryHome_Previews: PreviewProvider {
  16. static var previews: some View {
  17. CategoryHome()
  18. .environmentObject(ModelData())
  19. }
  20. }


プレビュー その 1



    Landmark.swift


  1. import Foundation
  2. import SwiftUI
  3. import CoreLocation
  4. struct Landmark: Hashable, Codable, Identifiable {
  5. var id: Int
  6. var name: String
  7. var park: String
  8. var state: String
  9. var description: String
  10. var isFavorite: Bool
  11. var isFeatured: Bool
  12. var category: Category
  13. enum Category: String, CaseIterable, Codable {
  14. case lakes = "Lakes"
  15. case rivers = "Rivers"
  16. case mountains = "Mountains"
  17. }
  18. private var imageName: String
  19. var image: Image {
  20. Image(imageName)
  21. }
  22. private var coordinates: Coordinates
  23. var locationCoordinate: CLLocationCoordinate2D {
  24. CLLocationCoordinate2D(
  25. latitude: coordinates.latitude,
  26. longitude: coordinates.longitude)
  27. }
  28. struct Coordinates: Hashable, Codable {
  29. var latitude: Double
  30. var longitude: Double
  31. }
  32. }


    ModelData.swift


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



    CategoryHome.swift


  1. import SwiftUI
  2. struct CategoryHome: View {
  3. @EnvironmentObject var modelData: ModelData
  4. var body: some View {
  5. NavigationView {
  6. List {
  7. modelData.features[0].image
  8. .resizable()
  9. .scaledToFill()
  10. .frame(height: 200)
  11. .clipped()
  12. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
  13. CategoryRow(categoryName: key, items: modelData.categories[key]!)
  14. }
  15. }
  16. .navigationTitle("Featured")
  17. }
  18. }
  19. }
  20. struct CategoryHome_Previews: PreviewProvider {
  21. static var previews: some View {
  22. CategoryHome()
  23. .environmentObject(ModelData())
  24. }
  25. }


プレビュー その 2



CategoryHome.swift のリストを以下のように修正します。



    CategoryHome.swift


  1. .frame(height: 200)
  2. .clipped()
  3. .listRowInsets(EdgeInsets())
  4. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
  5. CategoryRow(categoryName: key, items: modelData.categories[key]!)
  6. }
  7. .listRowInsets(EdgeInsets())
  8. }
  9. .navigationTitle("Featured")


プレビュー その 3







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







目次
Xcode の新機能

フレームワーク

  • SwiftUI

  • ビューの作成と結合

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    ビルドリストとナビゲーション

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7

    セクション 8


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107

    セクション 108

    ユーザー入力の処理

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    パスとシェイプの描画

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

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

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    複雑なインターフェースの構成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UI コントロールを扱う

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    UIKit とのインターフェース

    セクション 1

    セクション 2

    セクション 3

    セクション 4


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    watchOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    macOS アプリの作成

    セクション 1

    セクション 2

    セクション 3

    セクション 4

    セクション 5

    セクション 6

    セクション 7


    セクション 101

    セクション 102

    セクション 103

    セクション 104

    セクション 105

    セクション 106

    セクション 107