[ Swift UI 강좌 ] 5. 스위프트 iOS - 날씨정보 뷰 만들기

오늘은 지난 시간에 이어서 스위프트 UI를 이용해 간단한 화면 구성을 해보겠습니다. Swift 나 오토레이아웃(AutoLayout) 으로 디자인하는 것보다 훨씬 간단합니다. 만약 오토레이아웃을 사용해본 적이 있다면 스택 뷰(StackView)를 사용해 봤을 텐데요. 스택뷰만 잘 이해하고 있다면 조금 쉬울 수 있습니다. Swift UI의 장점은 아무래도 코드를 재사용하기 쉽다는 것과 Github를 이용해서 다른 사람과 서로 충돌 없이 작업할 수 있어서 좋을 것 같습니다. 그럼 간단하게 지금까지 배운 지식으로 날씨 정보 뷰를 만들어 보겠습니다.

 

프로젝트 생성

 

▼ 1. Weather 라는 iOS SingleView Project를 만들겠습니다. 언어는 Swift로 설정합니다.

1. iOS Single View 프로젝트

---

 

▼ 2. 기존 코드 위에 새로 Weather라는 구조체를 하나 만듭니다. Struct 안에 Forecate와 hourlyForecast라는 배열을 포함합니다. 뒤에서 데이터로 사용할 부분입니다.

struct Weather {
    struct Forecast {
        let hour: String
        let conditions: Image
        let temperature: String
    }
    
    let hourlyForecast = [
        Forecast(hour: "8AM", conditions: Image(systemName: "sun.max.fill"), temperature: "63°"),
        Forecast(hour: "9AM", conditions: Image(systemName: "cloud.sun.fill"), temperature: "63°"),
        Forecast(hour: "10AM", conditions: Image(systemName: "sun.max.fill"), temperature: "64°"),
        Forecast(hour: "11AM", conditions: Image(systemName: "cloud.fill"), temperature: "61°"),
        Forecast(hour: "12PM", conditions: Image(systemName: "cloud.rain.fill"), temperature: "62°")
    ]
}

2. Swift UI 데이터 구성

---

 

 

▼ 3. body 내용을 지우고 다음 코드를 추가합니다. HStack 안에 VStack이 두 개 들어갑니다. 중간의 Spacer는 간격을 벌려주는 역할을 합니다. 각각의 VStack은 텍스트, 이미지를 포함합니다.

HStack(alignment: .lastTextBaseline) {
    VStack(alignment: .leading) {
        Text("서울")
            .font(.title3)
        Text("63°")
            .font(.largeTitle)
    }
    
    Spacer()
    
    VStack {
        Image(systemName: "sun.max.fill")
            .renderingMode(.original)
        Text("맑음")
        Text("H:68° L:42°")
    }
}

3. body 수정

---

 

Forecast, Panel 뷰 생성

 

▼ 4. Forecast 라는 구조체를 하나 만듭니다. View를 상속받고 있습니다. body 안에 VStack으로 구성되어 있고 Weather.Forecate 데이터를 하나 선언합니다.

struct Forecast: View {
    let data: Weather.Forecast
    
    var body: some View {
        VStack {
            Text(data.hour)
            
            data.conditions
                .renderingMode(.original)
                .frame(height: 50)
            
            Text(data.temperature)
        }
    }
}

4. Forecate 뷰 생성

---

 

▼ 5. 이제 조금 전에 만들었던 패널을 분리해서 Struct로 만들어 보겠습니다.

struct Panel: View {
    var body: some View {
        HStack(alignment: .lastTextBaseline) {
            VStack(alignment: .leading) {
                Text("서울")
                    .font(.title3)
                Text("63°")
                    .font(.largeTitle)
            }
            
            Spacer()
            
            VStack {
                Image(systemName: "sun.max.fill")
                    .renderingMode(.original)
                Text("맑음")
                Text("H:68° L:42°")
            }
        }
    }
}

5. Panel 뷰 분리 및 생성

---

 

▼ 6. Panel, 그리고 Forecate 뷰를 다시 재활용해서 ContentView에 추가해보겠습니다. ContentView의 body 부분을 모두 지우고 다음 코드를 추가합니다.

struct ContentView: View {
    let weather = Weather()
    
    var body: some View {
        VStack(alignment: .leading, spacing: 20.0) {
            Panel()
            Divider()
            HStack {
                ForEach(weather.hourlyForecast, id: \.hour) { forecast in
                    Spacer()
                    Forecast(data: forecast)
                    Spacer()
                }
            }
        }
        .padding()
        .foregroundColor(.white)
        .background(Color(.lightGray))
        
        
            
    }
}

6. Panel, Forecast 뷰 추가

---

▼ 7. Panel과 Forecast 뷰의 사이에 Line을 하나 추가해보겠습니다. Divider를 중간에 포함시킵니다.

Divider()

7. Divider 추가

---

 

 

▼ 8. 하단 Forecast 뷰의 여백을 추가해보겠습니다. Spacer()라는 함수를 통해서 간격을 벌려줍니다. ForEach 루프를 돌면서 양옆에 Spacer()를 추가하게 됩니다.

Spacer()

8. Spacer 추가

---