[iOS/Swift] NavigationController의 ToolBar를 코드로 만들어 봅시다

시작

NavigationController의 ToolBar를 코드로 만들어 봅시다.

ToolBar도 NavigationBar와 만드는 방법이 비슷하더라고요.

 

참고로 ToolBar와 TabBar는 완전히 다른 기능을 하는 클래스입니다.

또한 TabBar는 UINavigationController에 속해 있지도 않고요.

 

여기서는 ToolBar를 만들 거예요!

한번 만들어 봅시다.

 

 

ToolBar

ToolBar 만드는 방법은

1. UINavigationController의 계층에 있는 ToolBar를 사용

2. 직접 UIToolBar 만들어 주는 방법이 있습니다.

 

오늘은 UINavigationController를 통해 ToolBar를 구현해 보겠습니다.

 

일단 ToolBar를 사용하기 위해선

당연히 UINavigationController로 된 뷰 컨트롤러가 있어야 하겠죠? 간단히 만들어주세요.

 

만드는 방법 및 설명은 [iOS/Swift] UINavigationController 살펴보기 를 참고해 주세요.

 

 

가장 먼저 할 설정은 isToolbarHidden를 false로 변경해 줍시다.

UINavigationController의 isToolbarHidden의 기본값은 true로 보이지 않습니다.

func setupToolBar() {
    // 기본값은 true, 보이게 하려면 false로 설정
    navigationController?.isToolbarHidden = false
}

 

 

 다음으로 원하는 ToolBar의 보이는 모양을 설정해줘야 합니다.

iOS 13 이후부터는 모든 Bar모양은 UIBarAppearance로 설정을 해주더라고요.

 

일단 UIToolbarAppearance는 UIBarAppearance를 상속받고 있습니다.

 

UINavigationBarAppearance도 UIBarAppearance를 상속받고 있어요.

이전에 이미 [iOS/Swift] UINavigationBar 사용 방법 에서 다뤄봤기 때문에 설명은 링크를 참고해 주세요.

 

완전히 사용방법이 동일합니다.

func setupAppearance() {
    
    let appearance = UIToolbarAppearance()
    // 불투명한 그림자를 한겹 쌓습니다.
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = .systemOrange
    
    // 커스텀으로 ToolBar를 만들 땐 standardAppearance에서만 적용되더니,
    // 이상하게도 여기선 무조건 scrollEdgeAppearance에서만 적용되네요...
    navigationController?.toolbar.scrollEdgeAppearance = appearance
}

 

 

이제 마지막으로 동작을 하는 버튼을 추가해 봅시다.

 

정지, 리셋, 재생 버튼을 만들고 ToolBar에 넣어 줬습니다.

func setupToolBarButton() {
    let pauseButton = UIBarButtonItem(barButtonSystemItem: .pause, target: self, action: nil)
    let resetButton = UIBarButtonItem(title: "초기화", style: .plain, target: self, action: nil)
    let playButton = UIBarButtonItem(barButtonSystemItem: .play, target: self, action: nil)
    
    let barItems = [pauseButton, resetButton, playButton]
    // 버튼 아이템들을 넣어줍니다.
    self.toolbarItems = barItems
    
    // 버튼을 변경할 때 부드러운 애니메이션효과와 같이 사용하고 싶다면 이런 메서드도 있어요. (대신 사용 시 barItems이 변해야 겠죠?)
    // self.setToolbarItems(barItems, animated: true)
}

어... 버튼이 정렬이 안됬네요?

 

무슨 일인지 일단 스토리보드로 예를 들어 확인해 봅시다.

 

NavigationBar 같은 경우 아이템의 공간이 왼쪽, 중간, 오른쪽 이렇게 나누어져 있지만,

ToolBar는 이와 같이 공간이 오직 한 개뿐이네요.

 

그럼 어떻게 위치를 잡아줘야 할까요?

 

바로 UIBarButtonItem을 한 개 더 만들어 주면 됩니다.

다행히 무식한 방법이 아니에요 ㅎ

 

UIBarButtonItem에는 아이템 사이의 공간을 균등하게 분배해 주는 아이템이 존재합니다.

바로 flexibleSpace이죠!

 

공간을 만들어주고 싶은 아이템 사이사이마다 넣어주면 자동으로 팍!

func setupToolBarButton() {
    // 👉 아이템에 따라 공간이 균등하게 분배합니다.
    let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
    
    let pauseButton = UIBarButtonItem(barButtonSystemItem: .pause, target: self, action: nil)
    let resetButton = UIBarButtonItem(title: "초기화", style: .plain, target: self, action: nil)
    let playButton = UIBarButtonItem(barButtonSystemItem: .play, target: self, action: nil)
    
    // 👉 공간을 만들어 주고 싶은 곳에 아이템을 추가해 줍니다. (자동으로 균등하게 만들어 줍니다)
    let barItems = [pauseButton, flexibleSpace, resetButton, flexibleSpace, playButton]
    
    // 버튼 아이템들을 추가합니다.
    self.toolbarItems = barItems
    
    // 버튼을 변경할 때 부드러운 애니메이션효과와 같이 사용하고 싶다면 이런 메서드 있어요. (대신 사용 시 barItems이 변해야 겠죠?)
    // self.setToolbarItems(barItems, animated: true)
}

 

완성입니다

 

 

부족한 설명이지만, 조금은 이해 가셨나요?

틀린 내용이 있다면 언제든지 지적해 주시면 감사히 받겠습니다. 🫠
읽어주셔서 감사합니다 😃