[SwiftUI] SwiftUI 기초 -공식 튜토리얼(1)

🧸 시작 

애플 디벨로퍼 공식 홈페이지에 있는 튜토리얼을 진행할 것이다.

 

✔️  뷰 생성 및 결합

랜드마크의 세부 정보를 표시하는 뷰를 빌드하는 것으로 시작한다.

뷰를 배치하기 위해서 스택을 사용하여 이미지 및 텍스트 뷰를 구성한다. 지도를 추가하기 위해서 MapKit도 추가한다.

 

 

🧸 새 프로젝트 만들기 및 캔버스 탐색

SwiftUI 로 앱 만들기

파일 만들기 

Interface -> SwiftUI 로 변경하고 Next

 

🧸 Inspector 로 수정하기

command + 클릭해서 Show SwiftUI Inspector... 를 클릭하면

해당 화면이 나오게 되는 데 여기에서 간편하게 변경할 수 있다.

아니면 스토리보드에서 사용하듯이 오른쪽 인스펙터화면을 늘려주면 

간편하게 속성을 변경할 수 있다.

오른쪽에 보이는 인스펙터는 마우스 커서가 있는 부분의 속성을 보여준다.

인스펙터에서 변경해줄 경우 코드로 바로바로 변경해서 반영해줘서 간편하게 사용할 수 있다.

오른쪽의 인스펙터에서 변경한 내용이다. 마우스로 클릭 한 번으로 왼쪽의 코드가 변경된 것을 볼 수 있다.

 

 

🧸 Stack 사용하여 뷰 결합하기

stack 에는 3가지 종류가 있다.

HStack : 수평으로 쌓기

VStack : 수직으로 쌓기

ZStack : z값, 위로 쌓기

Command + 클릭하면 Embed 를 할 수 있다.

임베드를 시키면 자동으로 스택에 넣어진다.

VStack() {
    Text("안녕하세요~")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.orange)
        .padding(.top)
}

 

두가지의 텍스트를 VStack 에 넣고 alignment를 .leading 으로 설정해주었다.

VStack(alignment: .leading) {
    Text("안녕하세요~")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.orange)
        .padding(.top)

    Text("스유를 처음 배우는 중이에요")
        .font(.subheadline)
        .fontWeight(.semibold)
        .foregroundColor(Color.purple)

}

300

위의 코드 결과이다. alignment 는 스택의 정렬을 왼쪽으로 할 지, 중앙으로 할 지, 오른쪽으로 할 지 정하는 것이다. 

이건 스택을 클릭하고 인스펙터에서 수정할 수 있다. 물론 직접 코드를 작성할 수도 있다.

 

이번에는 HStack을 설정하여 수평으로 뷰를 쌓는 방법을 사용한다.

VStack(alignment: .leading) {
    Text("안녕하세요~")
        .font(.largeTitle)
        .fontWeight(.bold)
        .foregroundColor(Color.orange)
        .padding(.top)

    HStack {
        Text("스유를 처음 배우는 중이에요")
            .font(.subheadline)
            .fontWeight(.semibold)
        .foregroundColor(Color.purple)

        Text("화이팅!")
            .font(.subheadline)
            .fontWeight(.semibold)
    }
}
.padding()

VStack 안에 HStack 이 쌓여있는 모습이다.

이렇게 2가지의 텍스트가 수평으로 쌓여있는 모습이다.

2가지 텍스트 사이의 간격을 줄 수 있는 데 Spacer()를 사용한다.

HStack {
    Text("스유를 처음 배우는 중이에요")
        .font(.subheadline)
        .fontWeight(.semibold)
    .foregroundColor(Color.purple)

    Spacer()

    Text("화이팅!")
        .font(.subheadline)
        .fontWeight(.semibold)
}

스택안에 텍스트사이에 Spacer()를 추가하면 자동으로 사이의 간격이 추가된다.

Spacer는 콘텐츠에 의해서만 크기가 정의되는 대신 포함하는 뷰가 부모 뷰의 모든 공간을 사용하도록 확장하게 된다.

 

 

🧸 사용자 지정 이미지 뷰 만들기

 먼저 이미지를 Assets 폴더에 추가해준다.

SwiftUI View 파일을 만든다.

파일명 : CircleImage

 

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
    }
}

Image를 사용하여 표시할 이미지의 이름을 전달한다.

위의 Assets 폴더에 추가한 이미지 파일을 사용한다.

그리고 clipShape을 이용하여 이미지를 잘라서 보여준다.

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
    }
}

자르기 전	자른 후

 

그 후 원형이미지에 테두리와 그림자를 추가한다.

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay {
                Circle().stroke(.white, lineWidth: 4)
            }
            .shadow(radius: 7)
    }
}

 

 

🧸 MapKit를 사용하여 지도 사용하기

MapView라는 파일명으로 SwiftUI 파일 만들기

import SwiftUI
import MapKit

struct MapView: View {
    
    @State
    private var region = MKCoordinateRegion(
        //서울시청 위도 경도
        center: CLLocationCoordinate2D(latitude: 37.566352778, longitude: 126.977952778),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
    
    var body: some View {
        Map(coordinateRegion: $region)
    }
}

MapKit를 추가해주고 @State로 지도에 대한 지역정보를 자기는 변수를 선언한다.

@State는 하나 이상의 뷰에서 수정할 수 있는 데이터를 설정할 수 있는 상태를 말한다.

State는 뷰에서 변경되는 것을 감지하기 위해서 사용되는 것 같다. 이 부분은 따로 정리가 필요한 거 같다. 일단 쉽게 이렇게 까지만 이해하고 다음으로 넘어간다...

그리고 맵에 나의 지역을 참조하여 지역값을 업데이트한다.

 

 

🧸 상세보기 구성하기

위의 이미지가 최종 한 화면에서 보여져야할 화면이다.

처음에 만들었던 텍스트와 원이미지와 지도이미지를 한번에 합치는 작업을 해야한다.

ContentView로 가서 만들었던 뷰들을 추가해준다.

기존의 코드에서 Text의 내용만 변경해주었다.

struct ContentView: View {
    var body: some View {
        VStack {
            
            //지도뷰 추가
            MapView()
                .frame(height: 300)
            
            //원이미지 추가
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(Color.orange)
                    .padding(.top)
                
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                        .fontWeight(.semibold)
                        .foregroundColor(Color.purple)
                    
                    Spacer()

                    Text("California")
                        .font(.subheadline)
                        .fontWeight(.semibold)
                }
            }
        }
        .padding()
    }
}

offset을 이용하여 상대위치를 변경한다. y축으로 -130만큼 이동하게 한다. 위로 130만큼 올라간다.

padding을 아래쪽으로 -130줘서 아래 텍스트가 올라오게 한다.

이제 속성을 조금씩 수정해서 최종 화면과 같이 만든다.

struct ContentView: View {
    var body: some View {
        VStack {
            
            //지도뷰 추가
            MapView()
                //safeArea 위쪽 부분 무시하고 채우기
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
            
            //원이미지 추가
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.largeTitle)
                
                HStack {
                    Text("Joshua Tree National Park")
                    
                    Spacer()

                    Text("California")
                }
                //부제목의 텍스트 크기와 색상 설정하기
                .font(.subheadline)
                .foregroundColor(.secondary)
                
                //구분선넣기
                Divider()
                
                Text("어바웃 터틀 락")
                    .font(.title2)
                Text("터틀 락에 대한 설명입니다.")
            }
            .padding()
            
            //밑의 공간을 확보해서 위의 내용 제일 위로 올리기
            Spacer()
        }
    }
}

 

 

 

✔️  완성

 

 

 

 

🧸 다음 글

[SwiftUI] SwiftUI 기초 -공식 튜토리얼(2)

 

 

 

 

 

 

 

 

 

 

[예제 소스코드 깃허브 링크]

https://github.com/HANLeeeee/SwiftUITest/tree/main/SwiftUITest

GitHub - HANLeeeee/SwiftUITest

[참고자료]

Apple_Developer_Tutorials_SwiftUI

Creating and Combining Views | Apple Developer Documentation