[Udemy iOS & Swift Bootcamp] SwiftUI Layout Design - Spacers, Subviews (SwiftUI 로 기능이 있는 앱 만들기)

기존에 만들었던 Dice 앱을 SwiftUI 를 활용해서 다시 만들어보자.

 

1. 이미지 Asset 추가

https://drive.google.com/uc?export=download&id=1IubA1ewlMRNRh9JKDAT4DY4fMbZONX9j 

image asset을 다운받아서 Assets 파일에 import 해준다.

각 단말기에 맞게 알아서 맞춰 들어가 있는 image 들...

 

 

2. 배경 이미지 추가하기

1) ContentView 의 초기 모습에 배경 image 코드 추가하기.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

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

ContentView 의 default 모습

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        ZStack {
            Image("background")
                .resizable()
                .edgesIgnoringSafeArea(.all)
        }

    }
}

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

ZStack 과 Image를 추가한 모습

 

2) 추가 UI 배치하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .edgesIgnoringSafeArea(.all)
            VStack{
                Image("diceeLogo")
                Spacer()
                HStack{
                    DiceView(n: 1)
                    DiceView(n: 1)
                }
                .padding(.horizontal)
                Spacer()
                Button(action:{

                }){
                    Text("Roll")
                        .font(.system(size: 50))
                        .fontWeight(.heavy)
                        .foregroundColor(.white)
                        .padding(.horizontal)
                }
                .background(Color.red)
            }
        }

    }
}

struct DiceView: View{
    let n: Int
    var body: some View{
        Image("dice\(n)")
            .resizable()
            .aspectRatio(1, contentMode: .fit)
    }
}

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

 

3) 버튼에 기능 추가

import SwiftUI

struct ContentView: View {
    
    @State var leftDiceNumber = 1
    @State var rightDiceNumber = 1
    
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .edgesIgnoringSafeArea(.all)
            VStack{
                Image("diceeLogo")
                Spacer()
                HStack{
                    DiceView(n: leftDiceNumber)
                    DiceView(n: rightDiceNumber)
                }
                .padding(.horizontal)
                Spacer()
                Button(action:{
                    self.leftDiceNumber = Int.random(in: 1...6)
                    self.rightDiceNumber = Int.random(in: 1...6)
                }){
                    Text("Roll")
                        .font(.system(size: 50))
                        .fontWeight(.heavy)
                        .foregroundColor(.white)
                        .padding(.horizontal)
                }
                .background(Color.red)
            }
        }

    }
}

struct DiceView: View{
    let n: Int
    var body: some View{
        Image("dice\(n)")
            .resizable()
            .aspectRatio(1, contentMode: .fit)
    }
}

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

---

cf) @State 속성 알아보기

변수값을 업데이트할 때마다 변수값, ContentView 를 업데이트한다.

 

https://developer.apple.com/documentation/swiftui/state

State | Apple Developer Documentation