Do Swift UI Tutorials

[yuskey38]

TASK

• [ ] Do Swift UI Tutorials https://developer.apple.com/tutorials/swiftui/
• [ ] Understand this video series https://www.youtube.com/channel/UCmJi5RdDLgzvkl3Ly0DRMlQ

[yuskey38]

Swift UI Tutorials summary

• SwiftUI Essentials
  • [x] Creating and Combining Views 40 minutes
  • [x] Building Lists and Navigation 35 minutes
  • [x] Handling User Input 20 minutes
• Drawing and Animation
  • [ ] Drawing Paths and Shapes 25 minutes
  • [ ] Animating Views and Transitions 20 minutes
• App Design and Layout
  • [ ] Composing Complex Interfaces 20 minutes
  • [ ] Working with UI Controls 25 minutes
• Framework Integration
  • [ ] Interfacing with UIKit 25 minutes
  • [ ] Creating a watchOS App 25 minutes
  • [ ] Creating a macOS App 30 minutes

[yuskey38]

Creating and Combining Views (ビューの作成と結合)

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

• 1. コードで変更

     
     import SwiftUI

struct ContentView: View { var body: some View { Text("Yusuke Miyata") .font(.title) .fontWeight(.bold) .foregroundColor(.red)

}

}

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

- 2. inspectorで変更（オブジェクトをcommand + クリック）
![image](https://user-images.githubusercontent.com/31516515/87215214-32d7a180-c36f-11ea-9ae4-215701bb8760.png)

- 3. stackもできる

import SwiftUI

struct ContentView: View { var body: some View { VStack(alignment: .leading) { Text("Yusuke Miyata") .font(.title) .fontWeight(.bold) .foregroundColor(.red) HStack { Text("Swift engeneer") .font(.subheadline) Spacer() Text("from Japan") .font(.subheadline) } .padding() }

}

}

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

- 4. 画像も簡単

import SwiftUI

struct CustomImageView: View { var body: some View { Image("test_image") .resizable() .clipShape(Circle()) .overlay( Circle().stroke(Color.green, lineWidth: 10)) .scaledToFit() // .frame(width: UIScreen.main.bounds.width, alignment: .center) // .aspectRatio(2, contentMode: .fit) } }

struct CustomImageView_Previews: PreviewProvider { static var previews: some View { CustomImageView() } }

ContentView.swift

import SwiftUI

struct ContentView: View { var body: some View { VStack(alignment: .leading) { MapView() .edgesIgnoringSafeArea(.top) .frame(height: 300)

        CustomImageView()
            .offset(y: -130)
            .padding(.bottom, -130)

        Text("Yusuke Miyata")
            .font(.title)
            .fontWeight(.bold)
            .foregroundColor(.red)
        HStack {
            Text("Swift engeneer")
                .font(.subheadline)
            Spacer()
            Text("from Japan")
                .font(.subheadline)
        }
        .padding()

    Spacer()
    }
}

}

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

[yuskey38]

Building Lists and Navigation (リストとナビゲーションの作成)

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
            Text(landmark.name)
            Spacer()
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarkData[0])
    }
}

• 高さも変えれる

  
  import SwiftUI

struct LandmarkRow: View { var landmark: Landmark

var body: some View {
    HStack {
        landmark.image
            .resizable()
            .frame(width: 50, height: 50)
        Text(landmark.name)
        Spacer()
    }
}

}

struct LandmarkRow_Previews: PreviewProvider { static var previews: some View { Group { LandmarkRow(landmark: landmarkData[0]) LandmarkRow(landmark: landmarkData[1]) } .previewLayout(.fixed(width: 300, height: 70)) } }

- リストはこんな感じ

import SwiftUI

struct LandmarkList: View { var body: some View { List(landmarkData, id: .id) { landmark in LandmarkRow(landmark: landmark) } } }

struct LandmarkList_Previews: PreviewProvider { static var previews: some View { LandmarkList() } }

landmarkDataにIdentifierbleプロトコルを付けるとこれでいい

import SwiftUI

struct LandmarkList: View { var body: some View { List(landmarkData) { landmark in LandmarkRow(landmark: landmark) } } }

struct LandmarkList_Previews: PreviewProvider { static var previews: some View { LandmarkList() } }

ナビゲーションつける。セルタップすると遷移する

import SwiftUI

struct LandmarkList: View { var body: some View { NavigationView { List(landmarkData) { landmark in NavigationLink(destination: ContentView()) { LandmarkRow(landmark: landmark) } } .navigationBarTitle(Text("Landmarks")) } } }

struct LandmarkList_Previews: PreviewProvider { static var previews: some View { LandmarkList() } }

![image](https://user-images.githubusercontent.com/31516515/87227537-acef4100-c3d6-11ea-9e0b-099cc0332c4c.png)
- previewでマルチデバイス表示

import SwiftUI

struct LandmarkList: View { var body: some View { NavigationView { List(landmarkData) { landmark in NavigationLink(destination: ContentView(landmark: landmark)){ LandmarkRow(landmark: landmark) } } .navigationBarTitle(Text("Landmarks")) } } }

struct LandmarkList_Previews: PreviewProvider { static var previews: some View { ForEach(["iPhone SE", "iPhone XS Max"], id: .self) { deviceName in LandmarkList() .previewDevice(PreviewDevice(rawValue: deviceName)) .previewDisplayName(deviceName)

    }
}

}

![image](https://user-images.githubusercontent.com/31516515/87238102-3172ab80-c439-11ea-9de2-571f36efe72b.png)

[yuskey38]

Handling User Input

• isFavoriteがtrueのデータにお気に入りアイコンをつける

  
  import SwiftUI

struct LandmarkRow: View { var landmark: Landmark

var body: some View {
    HStack {
        landmark.image
            .resizable()
            .frame(width: 50, height: 50)
        Text(landmark.name)
        Spacer()

        if landmark.isFavorite {
            Image(systemName: "star.fill")
                .imageScale(.medium)
                .foregroundColor(.yellow)
        }
    }
}

}

struct LandmarkRow_Previews: PreviewProvider { static var previews: some View { Group { LandmarkRow(landmark: landmarkData[0]) LandmarkRow(landmark: landmarkData[1]) } .previewLayout(.fixed(width: 300, height: 70)) } }

![image](https://user-images.githubusercontent.com/31516515/87238728-363b5d80-c441-11ea-8704-186bb47472f5.png)
- フィルター

import SwiftUI

struct LandmarkList: View { @State var showFavoritesOnly = true

var body: some View {
    NavigationView {
        List {
            Toggle(isOn: $showFavoritesOnly) {
                Text("Favorites only")
            }

            ForEach(landmarkData) { landmark in
                if !self.showFavoritesOnly || landmark.isFavorite {
                    NavigationLink(destination: ContentView(landmark: landmark)) {
                        LandmarkRow(landmark: landmark)
                    }
                }
            }
        }
        .navigationBarTitle(Text("Landmarks"))
    }
}

}

struct LandmarkList_Previews: PreviewProvider { static var previews: some View { ForEach(["iPhone SE", "iPhone XS Max"], id: .self) { deviceName in LandmarkList() .previewDevice(PreviewDevice(rawValue: deviceName)) .previewDisplayName(deviceName)

    }
}

}

- ボタンでお気に入りオンオフ

import SwiftUI

struct ContentView: View { @EnvironmentObject var userData: UserData

var landmark: Landmark

var landmarkIndex: Int {
    userData.landmarks.firstIndex(where: { $0.id == landmark.id })!
}

var body: some View {
    VStack(alignment: .center) {
        MapView(coordinate: landmark.locationCoordinate)
            .edgesIgnoringSafeArea(.top)
            .frame(height: 300)

        CircleImage(image: landmark.image)
            .offset(y: -130)
            .padding(.bottom, -130)

        VStack(alignment: .leading) {
            HStack {
                Text(landmark.name)
                    .font(.title)

                Button(action: {
                    self.userData.landmarks[self.landmarkIndex].isFavorite.toggle()
                }) {
                    if self.userData.landmarks[self.landmarkIndex].isFavorite {
                        Image(systemName: "star.fill")
                            .foregroundColor(Color.yellow)
                    } else {
                        Image(systemName: "star")
                            .foregroundColor(Color.gray)
                    }
                }
            }

            HStack(alignment: .top) {
                Text(landmark.park)
                    .font(.subheadline)
                Spacer()
                Text(landmark.state)
                    .font(.subheadline)
            }
        }
        .padding()
        Spacer()
    }
    .navigationBarTitle(Text(landmark.name), displayMode: .inline)
}

}

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView(landmark: landmarkData[0]) .environmentObject(UserData()) } }

[yuskey38]

Drawing Paths and Shapes

むずかしそうなのでコードコピーしてスキップ

[yuskey38]

Animating Views and Transitions