스터디 진행 튜도리얼은 Apple developer의 SwiftUI 튜토리얼을 사용했습니다.😊
최종 예제
Landmark의 정보와 사진을 보여주는 View를 만드는 예제입니다.
들어가며
SwiftUI 특징
- 개발 과정에서 앱의 라이브 프리뷰(live preview) 기능을 이용하여 SwiftUI 프로젝트를 실시간으로 테스트 가능
- 선언전 구문(declarative syntax)와 데이터 주도(data driven) 기반
SwiftUI의 선언적 구문
modifier
레이아웃에 포함될 컴포넌트 선언, 그것이 포함될 레이아웃 매너져 종류(HStack, VStack, Form, List)를 명시하고 속성을 설정하기 위해 사용
SwiftUI 선언의 계층적 구조화
작고 재사용 가능한 사용자 정의 하위 뷰와 함께 구성하면 복잡한 뷰 쉽게 생성 가능
SwiftUI는 데이터주도적
SwiftUI는 데이터의 변화가 앱의 동작과 모양을 주도한다는 점에서 데이터 주도적이다.
SwiftUI 이전에는 앱 내에 있는 데이터의 현재 값을 검사하려면 그에 대한 코드를 앱에 포함했어야 했음
SwiftUI는 앱의 데이터 모델과 사용자 인터페이스 컴포넌트, 기능을 제공하는 로직을 바인딩하는 방법으로 복잡도 해결
앱의 다른 부분에서 구독(subscribe)할 수 있는 데이터 변수를 게시(publish)
SwiftUI 프로젝트 구조
ContentView.swift
맨 처음 생성되는 Simulator를 실행하면 출력되는 View
- ContentView 파일을 확인하면 맨 상단 import SwiftUI를 선언하여 프레임워크를 가져오고 View를 상속받는 ContentView 구조체가 선언되어 있음
- SwiftUI에서 View는 반드시 body 변수가 있어야하며 이는 최상위 View 역할
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}some View
some은 Swift 5.1에서 생긴 키워드로 특정한 조건을 만족하는 제네릭 타입의 View를 의미
참고 : SE-0244 제안서
view 참고 자료
Preview Content
Xcode11 버전부터 Xcode에서 Canvas 기능을 통해 Simulator 없이도 Xcode에서 화면을 미리 볼 수 있게 되었습니다. Canvas에서 사용되는 데이터들을 위한 Assets
Scenedelegate와 Appdelegate는 어디로 ?
간단요약하면 편리성을 위해 삭제. App 이라는 프로토콜을 통해서 이제는 간편하게 초기화 가능
참고자료
SwiftUI 디버깅
Canvas
- 상단의
resume버튼을 사용해서 실시간으로 만든 View 확인 가능. - 이외에도 canvas에 렌더링된 view에 GUI 인터페이스를 이용해서 view를 추가할수도 있습니다.
주의할 점
Swift UI에서 최상위 View는 최대 10개의 Child View를 가질 수 있고 만약 10개를 초과하게된다면 아래와같이 다른 태그를 이용하여 감싸주어야합니다. (Group또는 Stack 이용)
Form{ Text("Hello World") Group{ Text("Hello World") Text("Hello World") Text("Hello World") Text("Hello World") Text("Hello World") } Group{ Text("Hello World") Text("Hello World") Text("Hello World") Text("Hello World") Text("Hello World") Text("Hello World")} } }
view의 body property에서 코드를 변경하면 body변경 사항을 반영하도록 미리보기가 업데이트됨
Section 1~2
Section1. Create a New Project and Explore the Canvas
Section2. Customize the Text View
요약: SwiftUI를 사용하는 새 Xcode 프로젝트를 만듭니다. 캔버스, 미리보기 및 SwiftUI 템플릿 코드를 살펴보세요. 코드를 변경하거나 인스펙터를 사용하여 사용 가능한 항목을 검색하고 코드 작성을 도와 뷰의 표시를 사용자 정의할 수 있습니다
프로젝트 생성
App을 선택하여 프로젝트를 만들어줍니다.
Interface를 SwiftUI로 변경해야합니다!
Text View Customize하기
- 프리뷰에서
⌘+click후 "Show SwiftUI Inspector"를 선택 . 팝 오버에는 사용자 정의할 수 있는 다양한 속성을 보여줍니다. - Font 변경 → 이렇게 하면 시스템 글꼴이 텍스트에 적용, 사용자가 선호하는 글꼴 크기 및 설정에 올바르게 응답
SwiftUI 보기를 사용자 지정하려면 modifiers 라는 메서드를 호출
modifier는 뷰를 래핑하여 display 또는 기타 property를 변경,- 각
modifier는 새 display를 return하므로 세로로 쌓인 여러 modifer을 연결하는 것이 일반적
padding() modifier를 modifier로 변경하려면 코드를 직접 편집. 아래 코드는 텍스트의 색상을 녹색으로 변경
struct ContentView: View {
var body: some View {
Text("Turtle Rock")
.font(.title)
.foregroundColor(.green)
}
}modifier를 변경하거나 제거하면 Xcode는 일치하도록 코드를 즉시 업데이트
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, swiftUI!")
.font(.title)
}
.padding()
}Section 3
Section 3 Combine Views Using Stacks
요약: Stack을 사용하여 view 결합
SwiftUI 뷰를 생성할 때 뷰의 속성에서 콘텐츠, 레이아웃 및 동작을 설명
body속성은 단일 보기만 반환. 보기를 가로, 세로 또는 뒤에서 앞으로 그룹화하는 스택 에 여러 보기를 결합하고 포함 가능
-
Xcode’s structured editing을 사용하여 컨테이너 뷰에 뷰를 포함하거나, 인스펙터를 열거나, 기타 유용한 변경 가능, Command-클릭한 다음 "Embed in VStack"을 선택
-
Xcode 창의 오른쪽 상단에 있는 더하기 버튼(+)을 클릭하여 라이브러리를 연 다음
Text코드에서 "Turtle Rock" 텍스트 뷰 바로 아래 위치로 뷰를 드래그
-
text의 placeholder 변경, 이니셜라이저를 편집하여
VStack뷰를 리딩 에지로 정렬
- 기본적으로 스택은 축을 따라 콘텐츠를 중앙에 배치하고 상황에 맞는 간격을 제공
- “Embed in HStack” 선택,
Spacer를 이용하여 display의 전체 너비를 사용하도록 레이아웃을 지정. 두 개의 텍스트 보기를 포함하는 가로 스택에 를 추가하여 공원과 상태를 분리
Spacer(): View 사이에 유연하게 공간 추가
padding()을 사용하여 랜드마크의 이름과 세부 정보에 약간의 공간을 제공
padding()을 매개변수 없이 호출하면 SwiftUI는 레이아웃, 화면크기에 대한 최적의 간격을 자동으로 사용. 매개변수를 사용하면 padding의 간격조정이 가능(면별로 따로 적용 가능)
Section4
Section 4 Create a Custom Image View
요약: 이름 및 위치 보기가 모두 설정되면 다음 단계는 랜드마크에 대한 이미지를 추가하는 것입니다.코드를 추가하여 mask, 테두리, 그림자등 이미지 보기 커스텀합니다.
⌘+ N 으로 새로운 파일 생성 → SwiftUI View
- 이미지뷰 커스텀하기
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay {
Circle().stroke(.white, lineWidth: 4)
}
.shadow(radius: 7)
}
}.clipShape(Circle()): 이미지에 원형 클리핑 모양을 적용
Circle은 마스크로 사용하거나 원에 획이나 채우기를 제공하여 보기로 사용할 수 있는 모양
.overlay {}안에 요소 추가해서 커스텀 가능 (예쩨는 너비가 4인 흰색 테두리).shadow(radius: 흐림도)을 이용해서 그림자 생성 가능
Section 5
Section 5 Use SwiftUI Views From Other Frameworks
요약: SwiftUI에서 API 사용. MapMapKit의 보기를 사용하여 지도를 렌더링 할 수 있습니다 .
MapView
Mapview의 타입은 UIView가 아닌 MKMapView 이기 때문에 코드에
import MapKit을 꼭 추가해줘야 합니다. MapKit은 추후에 다른 포스트로 더 정리하겠습니다 :)
import SwiftUI
import MapKit
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()
}
}import: SwiftUI 및 특정 기타 프레임워크를 가져오면 해당 프레임워크에서 제공하는 SwiftUI 관련 기능에 액세스setRegion: 현재 MapView에 보이는 지역을 변경하고 싶을 때 사용하는 메서드@State: 둘 이상의 보기에서 수정할 수 있는 앱의 데이터에 대한 신뢰할 수 있는 소스를 설정. SwiftUI는 기본 스토리지를 관리하고 값에 따라 뷰를 자동으로 업데이트.- 상태 변수에
$접두사를 지정 : 기본 값에 대한 참조와 같은 바인딩을 전달. 사용자가 지도와 상호작용하면 지도는 현재 사용자 인터페이스에 표시되는 지도 부분과 일치하도록 지역 값을 업데이트
MKCoordinateRegion
특정 위도와 경도를 중심으로 하는 직사각형 지리적 영역입니다.
apple 공식 문서를 참고해주세요🙏
Section 6
Section 6 Compose the Detail View상세보기 구성
요약: 지금까지 사용한 도구를 사용하여 커스텀 view를 결합하여 랜드마크 상세 보기의 최종 디자인을 만듭니다.
ContentView.swift
struct ContentView: View {
var body: some View {
VStack {
MapView()
.ignoresSafeArea(edges: .top)
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
Spacer()
Text("California")
}
.font(.subheadline)
.foregroundColor(.secondary)
Divider()
Text("About Turtle Rock")
.font(.title2)
Text("Descriptive text goes here.")
}
.padding()
Spacer()
}
}
}height: display가 콘텐츠의 너비에 맞게 자동으로 크기조정. 예제에서는 사용 가능한 공간을 채우기 위해 확장ignoresSafeArea(edges: .top): 맵 콘텐츠가 화면의 위쪽 가장자리까지 확장되도록 하려면 맵 보기에 modifier를 추가
0개의 댓글
