Landmarks PJT - 보기 생성 및 결합
섹션 1. 새 프로젝트 생성 및 캔버스 탐색
SwiftUI 인터페이스와 Swift 언어를 통해 Landmarks 프로젝트를 만든다.
Landmarks 프로젝트를 처음 생성하면 **LandmarksApp.swift** 와
Content
View.swift 파일이 생성되는 것을 알 수 있다.
**LandmarksApp.swift**
import SwiftUI // SwiftUI 인터페이스를 사용하겠다.
@main // 랜드마크라는 앱을 실행시키면 시작되는 프로그램의 진입점이다.
struct LandmarksApp: App // 랜드마크앱은 App의 앱구조를 가진다.
{
var body: some Scene // 몸체는 몇개의 씬으로 구성되는데
{
WindowGroup // 그룹내의 뷰 코드를 실행하게 된다.
{
ContentView() // 컨텐츠 뷰 코드를 실행해라.
}
}
}
**ContentView.swift**
import SwiftUI // SwiftUI 인터페이스를 사용하겠다.
struct ContentView: View // 윈도우 그룹에서 띄울 컨텐츠
{
var body: some View // 컨텐츠의 몸체
{
Text("Hello, world!") // 헬로우 월드를 띄워라
.padding() // 패딩 좌우간격을 줘라
}
}
struct ContentView_Previews: PreviewProvider // 미리보기를 사용
{
static var previews: some View // 프리뷰의 몸체
{
ContentView() // 미리보기에 띄울 컨텐츠
}
}미리보기 화면이 아래와 같이 나온다.
섹션 2. 텍스트 사용자 정의
미리보기 화면에서 커맨드 키를 누르고 Helloworld를 클릭하면 아래와 같은 화면이 나오는데 Show SwiftUI Inspector를 클릭한다.
화면에 표시할 텍스트를 바꿀 수 있고, 폰트관련 설정, 패딩, 외곽선등을 설정할 수 있다.
해당 창에서 설정을 수정하면 자동으로 코드에 반영된다.
역으로 코드상에서도 동일하게 수정하면 코드에 반영이 된다.
실행 결과는 아래와 같다.
**ContentView.swift**
import SwiftUI // SwiftUI 인터페이스를 사용하겠다.
struct ContentView: View // 윈도우 그룹에서 띄울 컨텐츠
{
var body: some View // 컨텐츠의 몸체
{
Text("Turtle Rock") // 헬로우 월드를 띄워라
**.font(.title) // 폰트는 타이틀 폰트를 사용해라
.foregroundColor(Color.green) // 폰트 색상은 그린
.multilineTextAlignment(.center) // 가운데 정렬
.padding() // 패딩 좌우간격을 줘라**
}
}
struct ContentView_Previews: PreviewProvider // 미리보기를 사용
{
static var previews: some View // 프리뷰의 몸체
{
ContentView() // 미리보기에 띄울 컨텐츠
}
}섹션3. 스택으로 보기 결합하기
한 묶음의 텍스트를 세로 방향으로 쌓고 싶을 때 : VStack
**ContentView.swift**
import SwiftUI // SwiftUI 인터페이스를 사용하겠다.
struct ContentView: View // 윈도우 그룹에서 띄울 컨텐츠
{
var body: some View // 컨텐츠의 몸체
{
**VStack** // 텍스트를 세로방향으로 쌓는다.
{
Text("Turtle Rock") // 보여줄 텍스트 : 터틀락
.font(.title) // 타이틀 폰트를 사용한다.
Text("Joshua Tree National Park") // 보여줄 텍스트
.font(.subheadline) // 폰트
Text("California") // 보여줄 텍스트
.font(.subheadline) // 폰트
}
}
}
struct ContentView_Previews: PreviewProvider // 미리보기를 사용
{
static var previews: some View // 프리뷰의 몸체
{
ContentView() // 미리보기에 띄울 컨텐츠
}
}
한 묶음의 텍스트를 가로 방향으로 쌓고 싶을 때 : HStack
**ContentView.swift**
import SwiftUI // SwiftUI 인터페이스를 사용하겠다.
struct ContentView: View // 윈도우 그룹에서 띄울 컨텐츠
{
var body: some View // 컨텐츠의 몸체
{
**HStack** // 텍스트를 세로방향으로 쌓는다.
{
Text("Turtle Rock") // 보여줄 텍스트 : 터틀락
.font(.title) // 타이틀 폰트를 사용한다.
Text("Joshua Tree National Park") // 보여줄 텍스트
.font(.subheadline) // 폰트
Text("California") // 보여줄 텍스트
.font(.subheadline) // 폰트
}
}
}
struct ContentView_Previews: PreviewProvider // 미리보기를 사용
{
static var previews: some View // 프리뷰의 몸체
{
ContentView() // 미리보기에 띄울 컨텐츠
}
}
VStack 과 HStack 을 모두 사용하여 이쁘게 만들어 보자.
import SwiftUI // SwiftUI 인터페이스를 사용하겠다.
struct ContentView: View // 윈도우 그룹에서 띄울 컨텐츠
{
var body: some View // 컨텐츠의 몸체
{
VStack(alignment: .leading) // 텍스트를 세로방향으로 쌓는다.(좌로 정렬)
{
Text("Turtle Rock") // 보여줄 텍스트 : 터틀락
.font(.title) // 타이틀 폰트를 사용한다.
HStack
{
Text("Joshua Tree National Park") // 보여줄 텍스트
.font(.subheadline) // 폰트
Spacer() // 공원과 주 사이에 공간을 채워넣음
Text("California") // 보여줄 텍스트
.font(.subheadline) // 폰트
}
}
.padding() // 공원과 주를 분리할 때 너무 화면 끝으로 가버려서 약간의 공간을 줌
}
}
struct ContentView_Previews: PreviewProvider // 미리보기를 사용
{
static var previews: some View // 프리뷰의 몸체
{
ContentView() // 미리보기에 띄울 컨텐츠
}
}
섹션4. 사용자 정의 이미지 보기 생성
Assets에 이미지를 드래그앤 드랍으로 추가한다.
CircleImage.swift 라는 새로운 SwiftUI를 만든다.
이미지를 불러오고 원형으로 자르고 각종 이펙트를 넣는다.
import SwiftUI
struct CircleImage: View
{
var body: some View
{
Image("turtlerock") // 터틀락 이미지를 불러온다.
.clipShape(Circle()) // 이미지를 원형으로 자른다.
.overlay // 이미지에 덮어씌운다.
{
Circle() // 원을 덮어씌운다.
.stroke(.gray, lineWidth: 4)
// 속이 빈 원을 만드는데, 선 색깔과 두께를 설정한다.
// 흰색 테두리를 설정하려면 아래 코드 사용
// .stroke(.white, lineWidth: 4)
}
.shadow(radius: 7)
}
}
struct CircleImage_Previews: PreviewProvider
{
static var previews: some View
{
CircleImage()
}
}
섹션5. 다른 프레임 워크에서 SwiftUI 보기 사용
아까 만들었던 원에 지도를 배치하려면 SwiftUI로 MapView.swift 파일을 생성하고 아래 코드의 주석을 참조한다.
**MapView.swift**
import SwiftUI
import MapKit // 맵 킷을 불러온다.
struct MapView: View
{
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 37.5030042, longitude: 127.0507571),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
// **@State**는 해당 View 외부로는 사용할 수가 없고 private 형태로 내부에서만 사용
//
// **region**은 지도에 대한 정보를 저장하는 private 상태변수
//
// **MKCoordinateRegion**은 Map에서 보여줄 원하는 좌표를 담을 매개변수,
// struct로 특정 경도와 위도를 중심으로 둘러싼 사각형 모양의 지역범위를 표시
//
// **CLLocationCoordinate2D**은 지정된 위치와 관련된 위도 및 경도 데이터
//
// **MKCoordinateSpan**은 척도를 나타냄
//
var body: some View
{
Map(coordinateRegion: $region)
// 앞서 선언한 상태변수 region을 **바인딩**(참조)으로 Map에 넣는다.
}
}
struct MapView_Previews: PreviewProvider {
static var previews: some View {
MapView()
}
}섹션6. 상세도 작성
지금까지 작성한 컨텐츠들을 보기좋게 아래와 같이 배치
**Contentview.swift**
import SwiftUIimport SwiftUI // SwiftUI 인터페이스를 사용하겠다.
struct ContentView: View // 윈도우 그룹에서 띄울 컨텐츠
{
var body: some View // 컨텐츠의 몸체
{
VStack// 텍스트를 세로방향으로 쌓는다.(좌로 정렬)
{
MapView()
.ignoresSafeArea( edges : .top )
.frame(height:300)
CircleImage()
.offset(y:-130)
.padding(.bottom,-130)
VStack (alignment: .leading)
{
Text("Turtle Rock") // 보여줄 텍스트 : 터틀락
.font(.title) // 타이틀 폰트를 사용한다.
HStack
{
Text("Joshua Tree National Park") // 보여줄 텍스트
Spacer() // 공원과 주 사이에 공간을 채워넣음
Text("California") // 보여줄 텍스트
}
.font(.subheadline) // HStack으로 묶여있는 애들을 서브라인 폰트로 설정한다.
.foregroundColor(.secondary) // 글자색을 옅은 회색으로 설정한다.
Divider() // 구분선을 추가한다.
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
}
.padding() // 보기좋게 하기 위해 VStack 으로 쌓은 놈들에 패딩을 준다.
Spacer() // 지금까지 작성한 컨텐츠를 최상단으로 끌어올린다.
}
}
}
struct ContentView_Previews: PreviewProvider // 미리보기를 사용
{
static var previews: some View // 프리뷰의 몸체
{
ContentView() // 미리보기에 띄울 컨텐츠
}
}