안녕하세요, 프립의 iOS 개발자 김지훈 입니다.
WWDC2022의 세션 중에서 “Use SwiftUI with UIKit”를 보고 나서 프립의 코드에도 SwiftUI를 적용할 수 있겠다는 생각으로 SwiftUI를 도입해보게 되었습니다!
iOS 16부터는 Cell의 contentConfiguration에 UIHostingConfiguration를 할당할 수 있어 간편하게 Cell 내부를 SwiftUI로 구성할 수 있습니다!
기존 Cell 화면의 구성입니다.
1) 카테고리의 이미지
2) 회색 배경의 배경화면
3) Gradient를 적용한 배경화면
4) 카테고리의 타이틀 화면
5) 비활성화 처리일때 보여지는 배경화면
6) 전국 기준으로 노출되는 것을 알려주는 화면
7) 선택했을때 나타나는 배경화면
총 7개의 View로 구성되어져 있습니다.
화면 구성에 앞서 사용하였던 SwiftUI 요소에 대한 설명을 진행하겠습니다.
화면을 구성할때 제일 많이 쓰이는 것은 Stack입니다. Stack의 종류에는 VStack, HStack, ZStack이 존재합니다.
VStack, HStack을 통해서 SubView들을 수직,수평 방향으로 구성할 수 있습니다.
ZStack은 오른쪽 아래 그림처럼 Z축으로 SubView들을 구성합니다.
따라서 코드의 제일 마지막라인에 위치하게 되는 SubView가 최상단에 위치하고, Alignment 값을 어떻게 주느냐에 따라 SubView들을 X-Y축 방향에 위치시킬 수 있습니다.
다음으로는 설명할 것은 Spacer입니다.
Spacer는 Stack 내부에 존재할때 남아있는 나머지 공간을 전부 차지하고, 외부에 존재할때는 공간 전체를 차지하게 됩니다. 보통 화면에서의 여백을 표현할때 사용하게 됩니다.
마지막으로는 설명할 것은 Rectangle입니다.
Rectangle은 Shape Protocol을 만족하는 Structure입니다. 단어 뜻 그대로 직사각형 형태의 View를 그려줍니다. 실제 코드에서 Rectangle을 사용해서 특정 배경색을 적용해 화면을 구현하려고 하였을때 background Modifier를 적용하면 색상이 적용되지않고, foregroundColor Modifier를 적용해야 실제 적용이 되었는데 이것은 Shape의 설명에 따르면 foreground Color로 채워지는 View이기 때문에 우리가 원하는 View를 얻기 위해서는 foreground Modifier를 적용해야만 하는 것입니다 !
이어서 각각의 View를 어떻게 구현하였는지 설명하겠습니다.
1 ) 이미지 받아오는 것은 SwiftUI의 AsyncImage를 사용하려고 하였으나, 캐시처리에 있어서 부족한 부분이 있어, Nuke 라이브러리를 사용하였는데 Nuke 자체적으로 SwiftUI에서 사용할 수 있는 LazyImage라는 것이 있어서 이것을 사용하였습니다!
2,5,7) 3가지 배경화면은 SwiftUI의 Shape의 구성요소중 Rectangle를 사용하여 구현해주었습니다.
4) 카테고리 명칭을 보여주는 View입니다. 하단에 Text를 위치시켜주기 위해서 Spacer와 같이 VStack으로 구성해주었습니다. 우리는 화면 하단에 텍스트를 위치하게 만들고 싶기 때문에 Spacer를 추가해서 Text를 아래에 위치하도록 해주었습니다.
6) 여백을 가진 텍스트를 우 상단에 위치시켜주어야 하기때문에 HStack 내부에 VStack이 들어가는 구조로 구성하였고, HStack과 VStack 내부에 각각 Spacer를 추가하여 여백을 주었습니다.
3) LinearGradient를 통해서 시작 위치에서 끝 위치까지 변하는 색상을 가진 배경화면을 구현할 수 있었습니다.
최종 구현된 SwiftUI 코드입니다.
configurationUpdateHandler를 사용해서 Cell의 isHighlighted 상태일때 특정 View를 보여주게 처리 할 수 있습니다. margins modifier는 따로 marign값을 정해주지 않으면 기본 여백값이 들어가서 그 여백을 제거하기 위한 Modifier입니다.
이렇게 코드를 짜고 실제 테스트를 하였을때 Cell이 재활용되면서 셀이 선택되지 않거나, 기존 카테고리 명칭이 남아있는 현상이 발생하였습니다. 이것을 방지하기 위해서 prepareForReuse 함수에서 해당 코드들을 추가시켜 주었습니다!
[마무리]
SwiftUI를 실제 사용해보니 UIkit을 통해 View를 구현할때보다 더 좋은 점이 있었습니다.
- SwiftUI의 Modifier의 기능을 통해서 View변경을 편리하게 할 수 있었습니다.
- 기존 UIKit의 addSubview와 Autolayout을 통한 크기나 위치 조정을 SwiftUI에서 한번에 처리할 수 있어 코드가 더 간단해졌습니다.
3. 더 직관적으로 화면 구성을 이해할 수 있었습니다.
예제로만 접하던 SwiftUI를 실제 적용해보니 SwiftUI의 편리함을 다시 한번 느낄 수 있었고, 앞으로도 조금씩 UIKit으로 구성된 화면을 SwiftUI로 변환하는 작업을 진행해나갈 계획입니다. 감사합니다!
