(3,4,5 일차) 14일 만에 IOS 앱 끝내기 챌린지 - UI 만들기

https://codewithchris.com/lesson3/

14 Day Beginner Challenge – Lesson 3 – How To Build User Interfaces

https://codewithchris.com/lesson4/

14 Day Beginner Challenge – Lesson 4 – SwiftUI Views and Containers

https://codewithchris.com/lesson5/

14 Day Beginner Challenge – Lesson 5 – War Card Game UI Construction

---

배치방법

여러 요소를 화면에 배치하고 싶을 경우, VStack / Hstack / Zstack을 사용하여 여러 요소를 묶어 나타낼 수 있다.

Stack 종류

- ZStack : 모든 요소들이 겹치게 나타나게 한다.

- HStack : Horizontal Stack, 수평으로 각 요소들을 나타낸다.

- VStack : Vertical Stack, 수직으로 각 요소들을 배치한다. 

 

Spacer() : 공간을 분배한다. 

 

.IgnoresSafeArea() : 기기에 따라 핸드폰 상단 하단에 빈 공간이 있을 수 있는데, 그 공란을 무시하고 전체 화면에 이미지 등을 배치하고 싶을 때 사용하는 modifier 옵션이다. 주로, 백그라운드 이미지에 사용하는 옵션이다.

---

[ContentView.swift]

//
//  ContentView.swift
//  war challenge
//
//  Created by jhmin on 2023/02/26.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background").ignoresSafeArea()
            VStack {
                Spacer()
                Image("logo")
                Spacer()
                
                HStack {
                    Spacer()
                    Image("card3")
                    Spacer()
                    Image("card4")
                    Spacer()
                }
                
                Spacer()
                Image("dealbutton")
                Spacer()
                
                HStack {
                    Spacer()
                    
                    VStack {
                        Text("Player")
                            .font(.headline)
                            .foregroundColor(Color.white)
                            .padding(.bottom, 10.0)
                        Text("0")
                            .font(.largeTitle)
                            .padding()
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                    }
                    Spacer()
                    
                    VStack {
                        Text("CPU")
                            .font(.headline)
                            .foregroundColor(Color.white)
                            .padding(.bottom, 10.0)
                        Text("0")
                            .font(.largeTitle)
                            .padding()
                            .fontWeight(.bold)
                            .foregroundColor(Color.white)
                    }
                    Spacer()
                }
                Spacer()
            }
        }
    }
}

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

 

 

필요한 이미지 파일은 여기서 다운로드 받으면 된다.

https://www.dropbox.com/sh/7aopencivoiegz4/AACy5lKSPRPTGAVHXaoeYk7ea?dl=0 

14 Day Beginner Challenge

다운로드 받은 이미지는 Assets에 복붙 해서 넣어주기