SwiftUI 원하지 않은 상단 여백 제거하기 - 뷰 계층구조 확인하는 방법

Juhee Kim·2024년 10월 30일
0

iOS

목록 보기
3/4
post-thumbnail
수정 전수정 후

1. 이슈

캘린더뷰 상단에 원하지 않는 여백이 생김. 프리뷰로 보면 정상적이나 시뮬레이터로 확인하면 나타나는 현상.

시도한 방법들

  1. 프로젝트에서 SwiftUI와 UIKit을 함께 사용하고 있는데, 호환의 문제인가 싶어 ScheduleView를 UIKit으로 변환해서 해결하려고 했으나 Force Cast Violation: Force casts should be avoided (force_cast) 오류 발생.

  2. 여전히 호환 문제라고 생각해서 기존 UIKit 탭바를 래핑해서 하단 탭바를 SwiftUI로 사용하니 문제 해결됨. 다만 기존의 UIKit 뷰에서 상단 툴바가 사라지는 문제 발생(빈대 잡으려다 초가삼간 태우는 꼴)

이외 여러가지 시도했으나 해결되지 않음


2. 원인

뷰 계층구조를 확인하니 하단탭바에서 일정 탭을 클릭하면 UINavigationBar_UIBarBackground가 쌓여서 추가적인 여백이 발생했다.

그래서 하단 탭바를 다른 방식으로 구현했을때 문제가 해결되었던 것.


3. 해결🥳

_UIBarBackground를 제거하거나 높이를 0으로 만들고 싶었지만 적용되지 않아서 상위 컨테이너인 UINavigationBar를 제거했다.

// ScheduleView를 UINavigationController로 감싸서 사용
let scheduleHostingVC = UIHostingController(rootView: ScheduleView())
let scheduleNavVC = UINavigationController(rootViewController: scheduleHostingVC)  // UINavigationController로 감싸기
scheduleHostingVC.tabBarItem = UITabBarItem(...)

viewControllers = [mainVC, scheduleNavVC, friendsVC, myPageVC]  // NavigationController를 탭에 추가

기존 코드
⬇️
수정된 코드

// ScheduleView를 UIHostingController만 사용
let scheduleHostingVC = UIHostingController(rootView: ScheduleView())  // UINavigationController로 감싸지 않음
scheduleHostingVC.tabBarItem = UITabBarItem(...)

viewControllers = [mainVC, scheduleHostingVC, friendsVC, myPageVC]  // HostingController를 직접 탭에 추가

주요 차이점

  1. UINavigationController 레이어가 제거됨
  2. 불필요한 UINavigationBar가 생성되지 않음
  3. 뷰 계층이 더 단순해짐 (HostingController -> ScheduleView)

4. 느낀점

앞으로는 뷰에 의도하지 않은 배치나 여백이 생기는 경우에는 뷰 계층 구조를 확인해보자.


시뮬레이터를 실행한 채 하단의 저 버튼을 누르면 뷰 구조를 볼 수 있고, 아무 컴포넌트를 클릭 후 드래그 하면 입체적으로 구조를 확인할 수 있다.

xcode에서 이런 기능을 지원하는 줄 몰랐다. 알려준 동료분께 무한 감사를...

profile
개: 개롭지만 발: 발전하는중

0개의 댓글