슈뢰딩거의 고등어
(3,4,5 일차) 14일 만에 IOS 앱 끝내기 챌린지 - UI 만들기 본문
https://codewithchris.com/lesson3/
14 Day Beginner Challenge – Lesson 3 – How To Build User Interfaces
14 Day Beginner Challenge Lesson 3 - How To Build User Interfaces https://youtu.be/K6FXSVc-axM if you enjoyed this lesson, please consider supporting me by subscribing. Thanks! ❤️ In this lesson, I’ll show you how to use Xcode to build user interface
codewithchris.com
https://codewithchris.com/lesson4/
14 Day Beginner Challenge – Lesson 4 – SwiftUI Views and Containers
14 Day Beginner Challenge Lesson 4 - SwiftUI Views and Containers https://youtu.be/wEF9AXy8-Sc if you enjoyed this lesson, please consider supporting me by subscribing. Thanks! ❤️ In this lesson, you’ll learn how to use a variety of essential user in
codewithchris.com
https://codewithchris.com/lesson5/
14 Day Beginner Challenge – Lesson 5 – War Card Game UI Construction
14 Day Beginner Challenge Lesson 5 - War Card Game UI Constructionhttps://youtu.be/GqWgsWS4aL4 if you enjoyed this lesson, please consider supporting me by subscribing. Thanks! ❤️In this lesson, we’ll walk through building the War Card Game user inte
codewithchris.com
배치방법
여러 요소를 화면에 배치하고 싶을 경우, VStack / Hstack / Zstack을 사용하여 여러 요소를 묶어 나타낼 수 있다.
- 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
Dropbox를 통해 공유함
www.dropbox.com
다운로드 받은 이미지는 Assets에 복붙 해서 넣어주기
'14일만에 IOS 앱 끝내기 챌린지' 카테고리의 다른 글
(11일차, 12일차) 14일 만에 IOS 앱 끝내기 챌린지 : State Properties, If 조건문 (0) | 2023.03.04 |
---|---|
(10일차) 14일 만에 IOS 앱 끝내기 챌린지 : SwiftUI 버튼 (0) | 2023.03.04 |
(8일차, 9일차) 14일 만에 IOS 앱 끝내기 챌린지 - Swift 프로그래밍 : 구조체, 객체 (0) | 2023.03.01 |
(6일차, 7일차) 14일 만에 IOS 앱 끝내기 챌린지 - Swift 프로그래밍 : 변수/상수, 함수 (1) | 2023.02.26 |
(1, 2일차) 14일 만에 IOS 앱 끝내기 챌린지 - 설치 및 세팅 (0) | 2023.02.25 |