[Swift]UIToolbar와 UINavigationBar에 대하여 (with.차이점)

안녕하세요, 이번 포스팅에서는 UIKit에 포함된 두 가지 주요 컴포넌트, UIToolbar와 UINavigationBar에 대해 자세히 알아보도록 하겠습니다.

1. UIToolbar

UIToolbar는 사용자가 화면에서 빠르게 접근할 수 있는 버튼이나 사용자 인터페이스 요소를 제공합니다. 주로 화면 하단에 위치하며, 그림 편집 앱에서 필요한 기능들을 빠르게 접근할 수 있도록 제공하는데 사용됩니다.

UIBarButtonItem을 이용해서 아이템을 추가할 수 있고, setItems 메소드를 통해 툴바에 아이템들을 설정할 수 있습니다. UIBarButtonItem은 액션을 실행할 버튼이나, 사용자 인터페이스 요소를 나타냅니다. flexibleSpace는 아이템들 사이에 동적 공간을 추가하는 것으로, 여러 아이템을 툴바에 넣었을 때 공간을 동적으로 조정하여 아이템들이 툴바 내에서 적절하게 배치될 수 있게 합니다.

let toolbar = UIToolbar()  // UIToolbar 인스턴스 생성
toolbar.frame = CGRect(x: 0, y: self.view.frame.size.height - 50, width: self.view.frame.size.width, height: 50)  // 화면 하단에 위치시키도록 프레임 설정

let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)  // 툴바의 아이템 간 공간을 유동적으로 만드는 flexibleSpace 생성
let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneButtonTapped))  // '완료' 버튼 생성. 이 버튼이 눌리면 doneButtonTapped 함수가 호출됩니다.(doneButtonTapped는 임의의 함수입니다.)

toolbar.setItems([flexibleSpace, doneButton], animated: true)  // 툴바에 아이템들을 설정합니다. 여기서는 flexibleSpace와 doneButton이 설정되었습니다.

self.view.addSubview(toolbar)  // 툴바를 화면에 추가합니다.

 

2. UINavigationBar

UINavigationBar는 화면 상단에 위치하며 사용자가 앱 내에서 화면 간의 이동을 하도록 돕는 UI 컴포넌트입니다.

UINavigationBar에서는 UINavigationItem 인스턴스를 사용하여 제목이나 버튼 등을 설정합니다. UINavigationItem는 UINavigationBar에서 사용자에게 보여지는 아이템들을 관리합니다. 또한,

UIBarButtonItem를 이용하여 액션을 실행할 버튼을 만들고, 이를 UINavigationItem에 설정하여 화면 상단에 표시할 수 있습니다.

let navigationBar = UINavigationBar()  // UINavigationBar 인스턴스 생성
navigationBar.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 50)  // 화면 상단에 위치시키도록 프레임 설정
self.view.addSubview(navigationBar)  // 네비게이션 바를 화면에 추가합니다.

let navigationItem = UINavigationItem(title: "Title")  // 제목을 설정한 navigationItem 생성
let backButton = UIBarButtonItem(title: "Back", style: .plain, target: self, action: #selector(backButtonTapped))  // '뒤로' 버튼 생성. 이 버튼이 눌리면 backButtonTapped 함수가 호출됩니다.(backButtonTappeds는 임의의 함수입니다.)
navigationItem.leftBarButtonItem = backButton  // UINavigationItem의 왼쪽 버튼으로 backButton을 설정합니다.
navigationBar.setItems([navigationItem], animated: false)  // UINavigationBar에 navigationItem을 설정합니다.

 

차이점

UIToolbar와 UINavigationBar의 주요 차이점은 위치와 주요 목적입니다. UIToolbar는 주로 화면 하단에 위치하여 빠른 접근이 필요한 기능들을 제공하는 반면, UINavigationBar는 화면 상단에 위치하여 화면 간의 이동을 돕습니다.

Customization

UIToolbar

UIToolbar는 아이템들의 배치 방식뿐 아니라 툴바 자체의 스타일을 변경하는 것도 가능합니다. barStyle, isTranslucent, barTintColor 등의 프로퍼티를 변경하여 툴바의 배경 스타일을 변경할 수 있습니다. 또한, tintColor를 변경하면 툴바의 아이템들의 색상을 일괄 변경할 수 있습니다.

toolbar.barStyle = .black  // 툴바의 스타일을 검은색으로 설정합니다.
toolbar.isTranslucent = false  // 툴바를 불투명하게 설정합니다.
toolbar.barTintColor = .red  // 툴바의 배경 색상을 빨간색으로 설정합니다.
toolbar.tintColor = .white  // 툴바의 아이템들의 색상을 흰색으로 설정합니다.

 

UINavigationBar

UINavigationBar에서도 barStyle, isTranslucent, barTintColor, tintColor

를 변경하여 네비게이션 바의 스타일을 변경할 수 있습니다. 또한,titleTextAttributes를 변경하면 네비게이션 바의 제목 스타일을 변경할 수 있습니다.

navigationBar.barStyle = .black  // 네비게이션 바의 스타일을 검은색으로 설정합니다.
navigationBar.isTranslucent = false  // 네비게이션 바를 불투명하게 설정합니다.
navigationBar.barTintColor = .red  // 네비게이션 바의 배경 색상을 빨간색으로 설정합니다.
navigationBar.tintColor = .white  // 네비게이션 바의 아이템들의 색상을 흰색으로 설정합니다.
navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]  // 네비게이션 바의 제목 색상을 흰색으로 설정합니다.

이렇게 UIToolbar와 UINavigationBar는 커스텀화 가능성이 높은 컴포넌트입니다. 앱의 디자인에 맞게 자유롭게 스타일을 변경해보세요.

 

이상으로 UIToolbar와 UINavigationBar에 대한 설명을 마치겠습니다. 이 두 UI 컴포넌트는 각각 다른 목적으로 사용되지만, 모두 사용자와의 상호작용을 돕는 매우 중요한 요소입니다. 각자의 앱에 맞는 방식으로 활용해보시기 바랍니다.감사합니다!