[SwiftUI] Chapter 1_1. Creating and Combining Views

Ted·2023년 3월 16일
0

SwiftUI

목록 보기
1/5
post-thumbnail

Section 1

Create a New Project and Explore the Canvas

일단 New Project를 통해서 새로운 Xcode 프로젝트를 생성해보자.

1. 생성

File > New > Project를 통해 들어간다음 iOS의 App을 눌러 새 프로젝트를 만든다.

2. 프로젝트 보기

Product Name을 자신이 원하는 이름으로 설정(보통 첫문자는 대문자)하고 Interface를 SwiftUI로 해줘야한다.

3. 프로젝트 구성 요소

그런 다음 자신이 설정한 Product Name에 App이 붙은 파일로 Project Navigator를 통해 이동하면 다음과 같은 화면이 나타난다.

코드 가장 상단에 @main이라는 것을 볼 수 있다. Swift를 사용하는 앱UI 앱 수명 주기는 앱 프로토콜을 준수하는 구조를 가지고 있고 구조물의 본문 속성은 하나 이상의 장면을 반환하며, 이는 다시 표시할 내용을 제공한다. 이 @main 속성은 앱의 진입점을 식별한다.

다음은 Project Navigator를 통해서 ContentView로 가본다.
그럼 실제 우리가 볼 수 있는 화면 뷰가 나온다. 현재는 body안에 Text("Hi i'm ted")로 작성해놓은 상태이다.

Section 2

Customize the Text view

말 그대로 Text view를 이리저리 탐구해보는 시간이다. 코드를 변경해서 나만의 view display를 만들 수 있다.또한 inspector 도구를 활용해서 다양한 시도를 해볼 수 있다.

source editor, canvas, inspector 등의 도구를 활용하여 앱을 만들 수가 있다. 어떤 도구를 활용하던 코드는 업데이트 된다.

기존 자료에는 preview에서 직접 Text를 클릭해 Inspector 속성에 들어갔는데 나는 뜨지 않아서 Text를 직접 클릭해 Inspector 속성을 찾아보았다. Show Code Actions에 들어가면 Show SwiftUI Inspectror 창이 있어 누르면 이렇게 뜨게 된다.

근데 이렇게 뜨기도 하고 애초에 Text를 누르면 Xcode 우측에 창이 떠있어서 Inspector 요소를 쉽게 변경할 수 있다.


Section 3

Combine Views Using Stacks

우리가 이전 섹션에서 생성한 제목뒤에 세부사항이나 추가 설명문을 넣을 수 있다고 한다. 사실 이는 그냥 Text의 Inspector 속성을 변경하여 다양하게 만들 수 있다는 것이다.


우리가 SwiftUI View를 만들 때 이 화면에 구성요소나 레이아웃, 작동 등에 대해서는 View에 body property에 코드를 작성한다. 그러나 body property의 경우 오로지 하나의 뷰만 리턴한다고 한다. 따라서 Stack을 통해서 여러개의 View들을 결합하고 끼워넣을 수 있다. Horizontally, vertically, back-to-front 의 방식들로.


첫 번째론 제목과 세부사항에 대한 얘기를 수직으로 설정해본다.
사실 코드로 그냥 작성해도 되는 부분이지만, Xcode 우상단에 위치한 + 버튼을 누르거나 코드를 작성함으로써 세부사항을 작성해본다.

기본적으로 스택은 축을 따라 내용을 중앙에 배치하고 상황에 맞는 간격을 제공한다. 그래서 중앙 배치로 되어있는 것을 볼 수 있다.

세부 사항들을 추가하고 세부사항들은 subheadline으로 처리한다. 그리고 세부사항 두 가지는 수평으로 나란히 있어야하기에 HStack으로 만들어준다. 그리곤 Spacer()를 추가하는데 Spacer는 내용으로만 크기를 정의하는 대신 포함하는 View가 상위 View의 모든 공간을 사용하도록 확장된다.

그리곤 padding을 통해서 제목과 세부사항간에 작은 간격을 만들어준다.

Section 4

Create a Custom Image View

제목과 설명등을 달아보았으니 이번에는 이미지를 추가해보는 것이다.
이 파일을 추가해보면서 우리는 custom view에 mask, border, drop shadow와 같은 효과도 이미지에 적용해볼 수 있다.

일단 프로젝트의 asset에 원하는 이미지를 집어넣는다. 그리고 새로운 SwiftUI View를 추가한다.
이렇게 만들 수 있다. clipShape 속성으로 원테두리도 해보았다. 이 Circle의 경우 mask로도 사용가능하고 stroke나 칠 채우기도 가능하다.

이 강의에선 overlay를 통해 stroke를 준다.


shadow도 주게되면 이런 식으로 된다.

Section 5

Use SwiftUI Views From Other Frameworks

다음으로 지정된 좌표를 중심으로 하는 지도를 만든다. MapKit에서 지도 보기를 사용하여 지도를 렌더링할 수 있다.

File > New > File > SwiftUI View를 통해 새 MapView.swift를 생성한다.
다음 MapKit을 import 시킨다.

다른 프레임워크들을 file안에 추가할 동일한 파일에 있는 UI 및 기타 특정 프레임워크를 사용하면 Swift에 액세스할 수 있다. 해당 프레임워크에서 제공하는 UI별 기능이다.

private state variable을 생성한다. 이는 map의 지역 정보를 갖고 있다.
@State attribute를 사용하여 둘 이상의 View에서 수정가능한 앱의 데이터에 대한 소스를 설정할 수 있다.SwiftUI는 기본 스토리지를 관리한다 그리고 자동으로 소스에 따라 View를 업데이트한다.

상태 변수에 $를 접두사로 붙이면 기본 값에 대한 참조와 같은 바인딩이 전달된다. 사용자가 지도와 상호 작용하면 지도는 현재 사용자 인터페이스에 표시되는 지도 부분과 일치하도록 지역 값을 업데이트한다.

Section 6

Compose the Detail View

이제 제목에 설명문에 사진 넣기와 지도까지 표시할 수 있으니 다양한 도구들을 활용해서 자신만의 custom view를 만들어 볼 수 있다.

일단 다시 ContentView로 돌아와서 세 문장을 다 포함하는 VStack을 하나 더 만든다.


그 다음 여태 만들었던 MapView, CircleView를 추가한다. MapView의 경우 높이 매개변수만 지정하면 보기는 내용 너비에 맞게 자동으로 크기가 조정된다. 이 경우 MapView가 확장되어 사용 가능한 공간을 채워준다.

그리고 상단으로 전체를 올려줄 Spacer()를 하나 아래에 추가하고 Divider()를 통해 아래 추가 설명문을 만들어준다. CircleImageView()에 offset, padding 속성을 음수로 만들어 위로 올라가게 한다.

HStack 밑에 기존에 있던 font를 내리고 속성들을 추가하게 되면 HStack안에 있는 모든 텍스트가 동일한 속성으로 만들어진다. 이와같은 레이아웃 뷰에 속성을 추가하면 안에 내용들은 동일 속성으로 만들어진다!!

그럼 최종적으로 이렇게 만들어진다.

끝!

Swift 공식 문서: SwiftUI Essentials - Creating and Combining Views

profile
iOS Developer

0개의 댓글