[ SwiftUI_Tutorials ] Creating and combining views

안녕하세요 공공돌🧸 입니다.

해당 글은 AppleDeveloper의 SwiftUI Tutorials를 진행하면서 남기는 글 입니다.

---

1. Creating and combining views

Section 1

Create a new project and explore the canvas

새 프로젝트를 만들고 캔버스를 탐색하세요.

---

Section 2

Customize the text view

텍스트 뷰를 사용자 정의하세요.

 

Step 1

캔버스 모드 변경

기본적으로 캔버스는 라이브 모드에서 미리보기를 표시하여 상호 작용할 수 있지만, 편집을 활성화하려면 선택 가능한 모드를 사용할 수 있습니다

 

라이브 모드 단축키

• Command + Option + Enter

해당 단축키를 사용하여 편리하게 캔버스 모드를 변경할 수 있습니다.

---

 

Step 2

Show SwiftUI Inspector

Popover에는 조사하는 뷰의 유형에 따라 사용자 정의할 수 있는 다양한 속성이 표시됩니다.

 

Popover 단축키

• Command + Click

---

 

Step 3,4

Change the Text,Font

inspector( 인스펙터 )를 통해 Text와 Font를 변경할 수 있습니다.

---

 

Step 5

foregroundColor()

텍스트의 색상을 변경하는데 사용됩니다.
괄호 안에는 SwiftUI에서 사용 가능한 색상을 지정하는데 사용되는 인자 ( argument )가 들어갑니다

 

Text("Hello, World!")
    .foregroundColor(.blue)
    
//.foregroundColor(Color(red: 0.5, green: 0.0, blue: 0.5))
    .foregroundColor(Color(0.5, 0.0, 0.5))
    
//.foregroundColor(Color(UIColor.systemGreen))
    .foregroundColor(UIColor.systemGreen)

---

 

Step 6

코드 편집기에서 Popover 열기

Step 3,4와 동일한 단축키로 코드 편집기에서 해당 코드를 선택하여 Popover를 열 수 있습니다.

---

Section 3

Combine views using stacks 

스택을 사용하여 뷰 결합

 

 

Step 1

Popover에서 Embed in VStack 클릭

---

 

Step 2

라이브러리를 열어 뷰를 드래그

 

라이브러리 단축키

• Command + Shift + L

---

 

Step 5

VStack 활용

수직으로 요소를 쌓는 데 사용됩니다.

 

주요 매개변수

• spacing: VStack 내부 요소들 간의 간격을 지정합니다. 기본값은 nil이며, nil로 설정하면 SwiftUI가 적절한 간격을 자동으로 할당합니다.
• alignment: VStack 내부 요소들의 정렬 방식을 지정합니다. .leading, .center, .trailing 등의 값이 올 수 있습니다.
• content: VStack 내부에 포함될 SwiftUI 뷰들을 지정합니다.
• @ViewBuilder content: 복잡한 뷰 계층구조를 지원하기 위해 사용됩니다.

---

 

Step 8

Spacer 활용

Left"와 Right 텍스트 사이의 공간을 채우는 역할입니다.

---

 

Step 9

padding 활용

기본적인 여백의 크기 지정과 상하좌우 여백을 지정하는데 사용합니다.

 

주요 매개변수

• EdgeInset 매개변수
  • top 상단
  • leading 왼쪽
  • bottom 하단
  • trailing 오른쪽

---

Section 4

Create a custom image view

사용자 정의 이미지 뷰 생성

 

 

Step 4

이미지에 원형 클리핑 모양 적용

Circle 타입은 마스크로 사용하거나 원에 스크로크 또는 채우기를 적용하여 뷰로 사용할 수 있는 형태입니다.

 

클리핑 모양을 정의하는데 사용되는 SwiftUI Shape 유형

• Rectangle(): 직사각형 모양으로 클리핑됩니다.
• RoundedRectangle(cornerRadius: CGFloat): 둥근 모서리를 가진 직사각형 모양으로 클리핑됩니다.
• Circle(): 원 모양으로 클리핑됩니다.
• Ellipse(): 타원 모양으로 클리핑됩니다.
• 사용자 정의 Shape 유형: 사용자가 직접 정의한 SwiftUI의 Shape 프로토콜을 준수하는 사용자 정의 모양입니다.

---

 

Step 5

이미지 테두리 설정

다른 회색 스크로크가 있는 원을 만들고, 그것을 오버레이로 추가하여 이미지에 테두리를 줍니다.

 

overlay란?

SwiftUI에서 사용되는 뷰 수정자 중 하나로, 해당 뷰의 위에 다른 뷰를 추가하여 표시할 수 있도록 합니다.
이렇게 함으로써 뷰에 쉽게 추가적인 콘텐츠를 삽입할 수 있습니다

 

overlay 수정자

• 테두리 추가: stroke, border, 또는 다른 뷰를 사용하여 뷰 주변에 테두리를 추가합니다.
• 배경 추가: background 또는 다른 뷰를 사용하여 뷰의 배경을 채웁니다.
• 마스크 추가: mask 또는 다른 뷰를 사용하여 뷰에 마스크를 적용합니다.

---

 

Step 6

.shadow 추가 ( 그림자 추가 )

SwiftUI에서 사용되는 뷰 수정자(modifier) 중 하나로, 뷰에 그림자 효과를 추가하는 데 사용됩니다.
이를 통해 뷰에 깊이와 입체감을 부여하여 사용자 경험을 향상시킬 수 있습니다.

 

주요 매개변수

• color: 그림자의 색상을 지정합니다.
• radius: 그림자의 흐림 정도를 나타냅니다. 값이 클수록 그림자가 흐릿해지고 넓어집니다.
• x: 그림자의 가로 위치를 조절합니다. 양수 값은 오른쪽으로, 음수 값은 왼쪽으로 그림자를 이동시킵니다.
• y: 그림자의 세로 위치를 조절합니다. 양수 값은 아래로, 음수 값은 위로 그림자를 이동시킵니다.

---

Section 5

Use SwiftUI views from other frameworks

다른 프레임워크의 SwiftUI 뷰를 사용

 

 

Step 3

MapKit 활용

지도의 지역 정보를 보유하는 개인 계산 변수를 생성
해당 변수는 지도의 표시 영역을 나타내는 데 사용됩니다.
MKCoordinateRegion은 지도에서 특정 영역을 나타내는 데 사용되며, 중심(center) 좌표와 영역(span) 의 폭 및 높이를 지정합니다.

• center: 해당 지역의 중심을 나타내는 좌표입니다. 위도와 경도를 사용하여 지정됩니다.
• span: 해당 지역의 폭과 높이를 나타내는 좌표입니다. 위도와 경도의 차이를 사용하여 지정됩니다.

---

 

Step 4

기본 Text 뷰를 초기화할 때 사용하는 Map 뷰로 대체하고, 이 Map 뷰는 region으로 초기화한 카메라 위치를 취합니다

 

 

ERROR

 

SwiftUI Tutorials를 보면 위와 같이 코드가 나와있지만, 해당 코드를 입력하면 아래와 같은 오류를 볼 수 있습니다.

 

해결방법 

struct MapView: View {
    @State private var region: MKCoordinateRegion = {
        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)
    }

}

두 코드의 가장 큰 차이점은 MapView 구조체에서 Map 뷰의 초기화 방법입니다.

해결 코드에서는 Map 뷰를 초기화할 때 coordinateRegion 인자를 사용하고 있습니다.
이는 Map 뷰가 Binding<MKCoordinateRegion>을 기대하기 때문에 @State 속성인 region을 $region으로 바인딩하고 있습니다.

에러 코드에서는 Map 뷰를 초기화할 때 initialPosition 인자를 사용하고 있습니다. 그러나 initialPosition은 CLLocationCoordinate2D 값을 기대합니다. 따라서 region 계산 속성의 반환 값인 MKCoordinateRegion을 바로 전달할 수 없습니다.따라서 두 번째 코드에서는 Map 뷰를 올바르게 초기화하지 못했기 때문에 오류가 발생합니다.첫 번째 코드에서는 올바른 초기화 방법을 사용하여 Map 뷰를 초기화하고 있으므로 오류가 발생하지 않습니다.

---

Section 6

Compose the detail view

상세보기 구성

 

Step all

위 코드와 같이 지금까지 만든 MapView(), CircleImage()를 ContentView에 구성을 해줍니다.

---

참조 링크🍎

Creating and combining views | Apple Developer Documentation

---

공부하는 공돌이, 공공돌입니다🐻

@sheep1sik