프로젝트 생성

1. xcode 실행
2. Create a new Xocode project 클릭
3. 상단 탭에서 ios 선택
4. App 선택 후 Next
5. 프로덕트 이름과 organization identifier 설정
6. interfaxe는 SwiftUI 선택, Language 는 Swift 선택

미리보기

ContentView.swift 파일을 눌러보면 Preview 가 생김
Preview가 보이지 않는다면,
Xcode의 상단 맥 메뉴바에서 Editor -> Canvas 를 클릭해서 활성화

Inspector

미리보기에서 커멘드키를 누른상태에서 클릭하게 되면 인스팩터가 팝오버되거나 옆에 뜸, 인스팩터를 통해 간단하게 설정을 바꿔줄수 있음

커맨트키를 누른상태에서 클릭해도 표시되지 않는다면 미리보기 하단에 selectable(마우스표시)로 선택되어 있는지 확인

align

• 인스펙터에서 Embed in VStack or Embed in HStack 을 눌러서 정렬 가능
• Spacer()를 사용하여 사이에 공간을 둘 수 있음

struct ContentView: View {
    var body: some View {
        VStack { // 이런식으로 V or H Stack이라고 적고 중괄호로 감싸도 됨
            Text("Turtle Rock")
                .font(.title)
            Spacer()
            Text("Joshua Tree National Park")
        }
    }
}

이미지 import

1. 좌측 네이게이터에서 Assets 클릭
2. 표시되는 화면에서 좌측에 보면 파일들이 있는 곳으로 이미지 드래그 앤 드랍
3. 사용하고 싶은 페이지에 Image()라는 이니셜라이저를 사용하고, 파일명 입력

View 추가

1. xcode 상단 맥 메뉴바에서 File -> New -> File 클릭
2. SwiftUI View 클릭
3. swift라는 확장자에 View 이름 작성해서 Create (ex, CircleImage.swift)

border 지정

• .ClipShape(Circle()) 은 border-radius 를 지정하는 느낌
• .overlay { Circle().stroke(.gray, lineWidth: 4} } border 지정 하는 방법, .gray는 색상이고, lienWidth는 보더 두께
• shadow(radius:7)은 그림자 지정

다른 라이브러리 사용하기

지도 라이브러리 사용

import SwiftUI
import MapKit // 상단에 사용할 라이브러리를 import

struct MapView: View {
    @State private var region = MKCoordinateRegion( // 지도에 대한 위치 정보를 가지고 있을 변수 생성
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Map(coordinateRegion: $region) // 지도에 지역 바인딩
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

이렇게 만들고 나서, 다른 파일에서 MapView() 로 부르면 사용 가능

SafeArea 적용 안되게 하기

ios 는 노치 부분 때문에 SafeArea라는 구역이 있음
SafeArea 는 노치를 제외한 실질적으로 보이는 View 구역인데,
지도를 구현하면서, 가장자리 부분을 보지는 않기 때문에 노치 부분을 채워주고 싶음

SafeArea 피해가기
.ignoresSafeArea 적용

// ex)
MapView()
	.ignoresSafeArea(edges: .top)

반복되는 스타일 간소화하기

HStack { // font 똑같은게 반복됨
	Text("Joshua Tree National Park")
    	 .font(.subheadline)
	Spacer()
	Text("California")
    	 .font(.subheadline)
}

// 수정
HStack {
	Text("Joshua Tree National Park")	
	Spacer()
	Text("California")
}
	.font(.subheadline)