← 메인으로

0811 커스텀 뷰 생성하기

SwiftUI 뷰

사용자 인터페이스 레이아웃은 뷰 사용과 생성, 그리고 결합을 통해 SwiftUI로 구성된다. 가장 먼저 살펴봐야 할 중요한 단계는 View 라는 용어의 의미를 이해하는 것이다. SwiftUI에서 뷰는 View 프로토콜을 따르는 구조체로 선언된다.

View 프로토콜을 따르도록 하기 위해 구조체는 body 프로퍼티를 가지고 있어야 하며, 이 body 프로퍼티 안에 뷰가 선언돼야 한다.

기본 뷰 생성하기

Xcode에서 커스텀 뷰는 SwiftUI View 파일에 포함된다. 새로운 SwiftUI 프로젝트를 생성하면 Xcode는 Text 뷰 컴포넌트 하나로 구성된 하나의 커스텀 뷰를 가진 단일 SwiftUI View 파일을 생성할 것이다.

import SwiftUI struct ContentView: View { var body: some View { VStavk { Image(systemName: "globe") .imagescale(.large) .foregroundColor(.accentColor) Text("Hello, World!") } } } struct ContentView_Previews: PreviewProvider { static var previews: some view { ContentView() } }

뷰 추가하기

body 프로퍼티에 원하는 뷰를 배치하여 다른 뷰가 추가될 수 있다. 하지만 body 프로퍼티는 단 하나의 뷰를 반환하도록 구성되어 있다. 

struct ContentView: View { var body: some View { Text("Hello, ") + Text("how ") + Text("Are You?") } } 
struct ConetentView: View { @State var fileopen: Bool = true var body: some View { var myString: String = "File closed" if (fileopen) { myString = "File open" } return VStack { HStack { Text(myString) .padding() Text("Goodbye, world") } } } } 
Type '()' cannot conform to 'View'

쉽게 말해서, 위의 코드 예시는 body의 클로저 안에 여러 줄의 코드가 있다. myString 변수가 선언됐고, if 조건문이 실행되었으며 마지막에 VStack 뷰가 생성되는 형태다.

하위 뷰로 작업하기

애플은 최대한 뷰를 작고 가볍게 하라고 권장한다. 이것은 재사용할 수 있는 컴포넌트 생성을 권장하고, 뷰 선언부를 더 쉽게 관리하도록 하며, 레이아웃이 더 효율적으로 렌더링되도록 한다.

만약 우리가 만든 커스텀 뷰의 선언부가 크고 복잡하다면 하위 뷰로 나눌 수 있는 부분을 찾아야 한다.

struct ContentView: View { var body: some View { VStack { Text("Text 1") Text("Text 2") MyHStackView() } Text("Text 5") } } struct MyHStackView: View { var body: some View { HStack { Text("Text 3") Text("Text 4") } } }

프로퍼티로서의 뷰

하위 뷰를 생성하는 것 외에도 복잡한 뷰 계층 구조를 구성하는 방법으로 프로퍼티를 뷰에 할당할 수도 있을 것이다.

struct ContentView: View { var body: some View { VStack { Text("Main Title") .font(.largeTitle) HStack { Text("Car Image") Image(systemName: "car.fill") } } } } 
struct ContentView: View { let carStack = HStack { Text("Car Image") Image(systemName: "car.fill") } var body: some View { VStack { Text("Main Title") .font(.largetitle) carStack } } }

뷰 변경하기

SwiftUI와 함께 제공되는 모든 뷰는 커스터마이징이 필요 없을 정도로 완전히 정확하게 우리가 원하는 모양과 동작을 하는 건 아니기 때문에 수정자(modifier)를 뷰에 적용하여 변경할 수 있다.

모든 SwiftUI 뷰에는 뷰의 모양과 동작을 변경하는 데 사용될 수 있는 수정자들이 있다. 이들 수정자는 뷰의 인스턴스에서 호출되는 메서드 형태를 취하며, 원래의 뷰를 다른 뷰로 감싸는 방식으로 필요한 변경을 한다. 이 말은 동일한 뷰에 여러가지를 변경하기 위해 수정자들이 연결될 수 있다는 의미다.

Text("Text 1") .font(.headline) .foregroundColor(.red) 
Image(systemName: "car.fill") .resizable() .aspectRatio(contentMode: .fit) 
MyHStackView() .font(.largeTitle)

텍스트 스타일로 작업하기

애플이 권장하는 방식. 텍스트 스타일을 이용하여 뷰의 폰트를 선언했다면 텍스트 크기는 사용자가 지정한 폰트 크기에 따라 동적으로 맞춰진다. 거의 예외 없이, 내장된 ios 앱들은 사용자에 의해 선택된 폰트 크기 설정을 따라 텍스트를 표시하며, 다른 앱들도 사용자가 선택한 텍스트 크기를 따르라고 애플은 권장한다.

딱 맞는 스타일이 없다면 폰트 종류와 크기를 선언해 커스텀 폰트를 적용할 수 있다. 하지만 이렇게 하면 사용자가 선택한 텍스트 크기와는 상관없이 고정된 크기로 표시될 것이다.

수정자 순서

수정자들을 연결할 때 수정자들이 적용되는 순서가 중요하다는 점을 알아야 한다.

Text("Sample Text") .border(Color.black) .padding() 
Text("Sample Text") .padding() .border(Color.black)

커스텀 수정자

SwiftUI는 나만의 커스텀 수정자를 생성할 수 있게도 해준다. 이것은 뷰에 자주 적용되는 대표적인 수정자들을 갖고자 할 때 유용하다. 

Text("Text 1") .font(.largeTitle) .backgroung(Color.white) .border(Color.gray, width: 0.2) .shadow(color: Color.black, radius: 5, x: 0, y: 5) 
struct StandardTitle: ViewModifier { func body(content: Content) -> some View { content .font(.largeTitle) .background(Color.white) .border(Color.gray, width: 0.2) .shadow(color: Color.black, radius: 5, x: 0, y: 5) } } 
Text("Text 1") .modifier(StandardTitle()) Text("Text 2") .modifier(StandardTitle())