[TIL / 25.02.07] 라이브러리 사용해서 상단 탭바 구현하기 2

https://subkyu-ios.tistory.com/6

[TIL / 25.02.06] 라이브러리 사용해서 상단 탭바 구현하기 1

지난 포스트에서 탭바 하위 스택에 탭에 연관된 뷰를 렌더링하는 자리인 페이지뷰가 최상단부터 영역을 차지하는 문제가 있었음 !

이를 해결하고자 생각했던 게

1. 탭바 하단부터 레이아웃을 둘 수 있도록 방법을 찾자

2. 1번이 안되면 해당 페이지뷰에 들어가는 뷰의 레이아웃을 탭바 하단부터 자리할 수 있도록 구현하자.

였는데 클로드로는 해답을 찾지못했고, gpt가 현답을 했음.

 

 

기존 코드에선 ViewController 자체가 TabmanController를 상속받았기 때문에 이 뷰컨트롤러 자체의 view는 Tabman의 PageViewController의 뷰 기능을 함.(gpt로 스무고개한 피셜)

그럼 이 view위에 헤더뷰를 올리게 되면 전 포스트 처럼 탭바랑 어쩔수없이 겹치게 되겠지요?

결국 탭바와 페이지뷰는 한묶음이 되어야 하고 헤더뷰의 경우엔 그보다 상위에 있는 뷰에 배치되어야하는데....

현재 TabmanViewController를 상속받고 있기 때문에 이보다 더 상위의 뷰를 마련할 방법은 이 뷰컨트롤러를 하위 뷰컨트롤러로 두도록 하는것임.

원래 최상위가 TabmanVC였는데 이제 VC - TabmanVC로 이루어지는 거지요. 이렇게 되면 부모 VC의 view를 따로 쓸 수 있고 TabmanVC쪽 자리도 VC의 view 자리에 넣어주면 되니깐 오케이임.

 

private func setupTabmanViewController() {
        addChild(tabmanVC)
        view.addSubview(tabmanVC.view)
        
        tabmanVC.view.snp.makeConstraints {
            $0.top.equalTo(tabBarContainer.snp.bottom)
            $0.leading.trailing.bottom.equalToSuperview()
        }
        
        tabmanVC.didMove(toParent: self)
    }

 

요렇게 TabmanViewController를 상위 VC에 addChild - addSubview - didMove해주고..(이 뷰컨트롤러간 종속시키는건 오늘 알아서 후에 포스트하겠음!)

tabmanVC의 view 레이아웃을 미리 마련해둔 자리인 tabBarContainer의 하단에 주는거임.(tabmanVC의 view는 띄워줄 페이지들이라 했으니깐!)

tabBarContainer.snp.makeConstraints {
            $0.top.equalTo(headerView.snp.bottom)
            $0.leading.trailing.equalToSuperview()
            $0.height.equalTo(36)
    } // tabBar를 둘 자리

// 생략

private func setupTabman() {
        tabmanVC.dataSource = self
        
        let bar = TMBar.ButtonBar()
        configureTabBar(bar)
        tabmanVC.addBar(bar, dataSource: self, at: .custom(view: tabBarContainer, layout: nil))
        
        tabmanVC.scrollToPage(.at(index: 0), animated: false)
    }

 

그 tabBar를 둘 자리는 다시 말해서 저렇게 최상위 뷰 상에 마련해두고, tabmanVC.addBar 메서드로 .custom을 통해 위치를 지정해준거임 !

 

보시면 탭바 하단에 있죠? 자식 뷰컨트롤러로 넣어줘서 해결함..

원래는 최상위가 tabmanVC였는데 이 tabmanViewController가 pageboyViewController를 상속받고 이는 또 pageViewController를 상속받는다고 봤는데 이를 통해서 설정으로 건드릴수있지않을까? 했는데 못찾음.. 방법이 안보여서 결국 저렇게 자식 뷰컨트롤러로 설정했다~!

 

일단 이슈 하나 해결 완료 !!

 

---

두번째 탭인 프로필 뷰까지는 구현이 완료되었으나 내부 컴포넌트에 대한 이해도가 부족한 걸 느꼈어서 이 부분 조금 더 공부해보고 다시 이해해서 올리도록 하겠음 !