프로젝트 생성
"Xcode" -> "Create New Project" -> "iOS" -> "App"
프로덕트 이름 짓고
"interface" -> "SwiftUI"
"Language" -> "Swift"
미리보기
ContentView.swift 파일을 누르면 앱 화면 미리보기가 나온다.
canvas로 자동적으로 미리보기가 된다. (Editor -> Canvas)
코드
-
@main속성
앱의 시작 포인트를 나타낸다. -
View파일
SwiftUI 에서view파일은 구조를 나타내고 미리보기를 보여준다.
구조는 뷰 프로토콜을 준수하고, 콘텐츠와 레이아웃을 설명한다. -
Body속성
View 파일 안의 body 속성 안을 수정하면 바로 프리뷰에 변경사항이 적용된다.
Body 속성은 하나의 view만 반환한다. stack을 사용해서 여러개의 임베드된 뷰를 반환할 수 있다. (상하 좌우 또는 앞뒤로 이어진 그룹의 형식으로)
Canvas Display
View 파일을 선택하면 자동으로 우측에 뜨는 창이다. 여러 모드가 있다.
-
Live mode
View 파일의 코드와 바로 상호작용 할 수 있는 창이다. 보통 코딩할때 이 창을 띄워놓는다. -
Selectable mode
이 모드를 고르면 수정을 할 수 있다.
Command-Control-click으로 화면의 요소를 누르고, "Show SwiftUI Inspector" 을 눌러서
요소를 수정할 수 있다. 클릭한 요소에 맞게 커스터마이징 할 수 있는 여러 속성들을 볼 수있다.또는, 코드에서의
Text같은 요소를Control-click으로 동일한 "Show SwiftUI Inspector" 을 열 수 있다.
-
위젯의 다양한 표현 종류들을 보여준다. 이것을 참고하여 모든 경우에 잘 작동하는지 확인해야 한다.
(다크모드, 홈화면, 잠금화면, 크기별, 워치 화면 등)Text 속성
-
font(.title)
제목1 속성 부여 -
font(.subheadline)
서브헤드라인 속성 부여 -
fontWeight(.bold)
볼드 속성 부여 -
foregroundStyle(.색깔)
색깔 지정
.foregroundStyle(.secondary)로 제목 아래에 사용하는 회색으로 할 수 있다. -
색깔.opacity(0.6)
색깔의 투명도 60%로 조절 -
minimumScaleFactor(0.6)
속한 프레임의 크기에 맞게 글자 크기를 조절한다. -
font(.system(size: 80, weight: .heavy))
사이즈 80, 두께 heavy 한번에 조절Stack 으로 View 합치기
-
VStack
요소를Control-click하고 "Embed in VStack" 을 누른다.
수직으로 요소들을 쌓을 수 있다.
-
HStack
요소를 수평으로 배치할 수 있다. -
요소 정렬
(alignment: .leading) -
Spacer()
스택에 맞는 방향으로 가장 크게 빈칸을 만들어준다. -
.padding()
요소에 패딩 지정.
.padding(.botton, -130)
이런 식으로 한쪽 방향의 패딩만 지정할 수 도 있다. -
View 추가
Xcode의 우측 상단 "+" 를 눌러서 여러가지의 View를 드래그 하여 추가할 수 있다.
import 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()
}
}
#Preview {
ContentView()
}이미지
- 이미지를 프로젝트 파일에서 찾고 asset catalog's editor에 드래그 한다.
- File > New > File 에서 "SwiftUI View" 를 클릭하고, 이름을 지정하고 생성한다.
- View 안에
Image("turtlerock")같은 식으로 가져온 사진의 이름을 작성한다.
.clipShape(Circle())
이미지를 원으로 만들어준다..overlay { Circle.stroke(.gray, lineWidth: 4) }
이미지에 회색 테두리를 생성한다..shadow(radius: 7)
이미지에 7포인트 짜리 그림자를 생성한다.frame(width: 100, height:300)
크기를 지정한다.offset(y: -130)
y 방향으로 130만큼 이동한다.
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay {
Circle().stroke(.white, lineWidth: 4)
}
.shadow(radius: 7)
}
}
#Preview {
CircleImage()
}다른 프레임워크 불러오기
- import 부분에 MapKit을 불러온다
import MapKit - private 속성의 맵 지역 정보를 만든다.
private var region: MKCoordinateRegion {
MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
}- View에 Map을 추가한다.
Map(initialPosition: .region(region)) - 맵이 보인다.
live preview에서Option-click-drag로 주변을 돌아볼 수 있다.
import SwiftUI
import MapKit
struct MapView: View {
var body: some View {
Map(initialPosition: .region(region))
}
private var region: MKCoordinateRegion {
MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
}
}
#Preview {
MapView()
}다른 뷰 불러오기
다른 뷰 파일에서 작성한 구조체의 이름을 불러오면 된다.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
MapView()
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Hello, Learners!")
.foregroundColor(.black)
.font(.largeTitle)
HStack {
Text("애플 디벨로퍼 아카데미에 오신것을 환영합니다.")
.font(.subheadline)
Spacer()
Text("@POSTECH")
}
.font(.subheadline)
.foregroundStyle(.secondary)
Divider()
Text("About Apple Developer Academy")
.font(.title2)
Text("애플 아카데미에 대해 더 알아보세요")
}
.padding()
Spacer()
}
}
}
#Preview {
ContentView()
}해당 게시글은 애플 공식 SwiftUI 튜토리얼 문서를 보고 작성한 내용입니다.
