Navigation Item과 BarButton Item

고라니·2023년 8월 30일

UIBarButtonItem UINavigationItem UIkit iOS

TIL

목록 보기

28/67

네비게이션 아이템(UINavigationItem) 이해하기

네비게이션 아이템은 네비게이션 바에 표시되는 요소를 관리한다. 네비게이션 바의 Title, Left Bar Button Item, Right Bar Button Item등 다양한 뷰와 상호작용에 관련된 정보를 포함한다.

사용 이유

일관성: 사용자가 다양한 뷰를 이동할 때 네비게이션 아이템은 각 뷰의 특성과 기능을 잘 반영한 네비게이션 바를 생성하므로 일관된 사용자 경험을 제공
사용성: 네비게이션 아이템을 통해 특정 액션 (뒤로 가기, 편집 등)을 쉽게 사용할 수 있게 만듬
커스터마이징: 개발자는 네비게이션 아이템을 사용하여 네비게이션 바의 요소를 쉽게 변경 가능

네비게이션 스택과 상호작용

스택의 최상단에 있는 뷰 컨트롤러의 네비게이션 아이템이 활성화 된다.
뷰 컨트롤러 전화 시 네비게이션 아이템도 변경된다.
'뒤로 가기' 버튼: 스택의 두 번째 뷰 컨트롤러부터는 뒤로가기 버튼이 자동으로 생성되고 표시될 수 있음
다중 바 버튼 아이템: leftBarButtonItems와 rightBarButtonItems를 통해 여러 개의 버튼을 네비게이션 바에 추가할 수 있음

즉 네비게이션바와 네비게이션컨트롤러가 연관되어 있듯이 네비게이션아이템은 해당 뷰 컨트롤러와 연관되어 특정 뷰 컨트롤러가 활성화되면 그에 해당하는 네비게이션 아이템의 설정에 따라 요소들이 네비게이션바에 표시된다.

네비게이션 스택과 밀접하게 연계되어 자동으로 네비게이션 바를 업데이트 해주고, 이를 통해 사용자에게 안정적이고 일관된 네비게이션 경험을 제공한다.

프로퍼티와 메서드

주요 프로퍼티와 메서드

프로퍼티

// 네비게이션 바에 표시될 제목을 설정. 기본값은 nil
var title: String? { get set }

// 뒤로 갈 수 있는 상황에서 뒤로 가기 버튼을 어떻게 표현할지 결정
var backBarButtonItem: UIBarButtonItem? { get set }

// 뒤로 가기 버튼이 네비게이션 바에 표시될지 여부 결정
var hidesBackButton: Bool { get set }

메서드

// 뒤로가기 버튼을 표시할지, 전환 애니메이션 효과를 적용할지 결정
func setHidesBackButton(_ hiedsBackButton: Bool, animated: Bool))

커스터마이징을 위한 프로퍼티와 메서드

프로퍼티

// 네비게이션 바의 중앙에 표시될 뷰를 설정
var titleView: UIView? { get set }
// 네비게이션 타이틀은 기본적으로 텍스트만 표시할 수 있지만 titleView를 사용하면 다양한 뷰를 넣을 수 있음

// 좌측 영역에 배치될 버튼 아이템의 배열을 설정(여러 개의 버튼을 배치 가능)
var leftBarButtonItems: [UIBarButtonItem]? { get set }

// 좌측 영역에 배치될 하나의 버튼 아이템을 설정
var leftBarButtonItem: UIBarButtonItem? { get set }

// 우측 영역에 배치될 버튼 아이템의 배열을 설정(여러 개의 버튼을 배치 가능)
var rightBarButtonItems: [UIBarButtonItem]? { get set }

// 우측 영역에 배치될 하나의 버튼 아이템을 설정
var rightBarButtonItem: UIBarButtonItem { get set }

메서드

// 좌측 영역에 여러 개의 버튼 아이템을 설정. 애니메이션 효과 적용 가능
func setLeftBarButtonItems(_ items: [UIBarButtonItem]?, animated: Bool)

// 좌측 영역에 하나의 버튼 아이템을 설정. 애니메이션 효과 적용 가능
func setLeftBarButton(_ items: UIBarButtonItem, animated: Bool)

// 우측 영역에 여러 개의 버튼 아이템을 설정. 애니메이션 효과 적용 가능
func setRightBarButtonItems(_ items: [UIBarButtonItem]?, animated: Bool)

// 우측 영역에 하나의 버튼 아이템을 설정. 애니메이션 효과 적용 가능
func setRightBarButton(_ items: UIBarButtonItem, animated: Bool)

바 버튼 아이템(UIBarButtonItem)

UINavigationBar, UIToolbar, UIActionSheet 등에서 사용되는 버튼 아이템을 표현하는 클래스다.
이 클래스를 사용하여 다양한 액션을 제공할 수 있다. (텍스트 편집기에서 저장, 취소, 편집 등의 버튼 제공)

위에서 알아본leftBarButtonItem과 rightBarButtonItem도 UIBarButtonItem으로 되어 있다.

인터페이스 빌더를 통해 쉽게 바 버튼을 만드는게 가능하고 코드를 통해 버튼의 외관을 커스터마이징 할 수 있다.
버튼의 상태와 외관을 세밀하게 조정할 수 있다.

주요 프로퍼티

// UIBarButton에 표시될 제목 설정
var title: String? { get set }

// 아이콘 또는 그래픽을 표시
var image: UIImage? { get set }

// 버튼의 스타일을 결정. .plain, .done, .bordered 등 여러 스타일 옵션이 있음
var style: UIBarButtonItem:Style { get set }

// 버튼의 너비를 설정
var width: CGFloat { get set }

// 버튼의 텍스트나 아이콘의 색상을 설정
var tintColor: UIColor? { get set }

간단한 예제

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white

        // 제목 설정
        navigationItem.title = "Home Page" // 1.

        // 우측 상단 버튼 아이템 추가
        let rightButton = UIBarButtonItem(title: "Next", style: .plain, target: self, action: #selector(moveToNextPage)) // 2.
        navigationItem.rightBarButtonItem = rightButton // 3.
    }

	// 4.
    @objc func moveToNextPage() {
        let nextPage = NextViewController()
        navigationController?.pushViewController(nextPage, animated: true)
    }
}

title 프로퍼티를 통해 타이틀 설정
UIBarButtonItem을 생성
생성한 UIBarButtonItem을 rightBarButtonItem으로 설정
생성한 UIBarButonItem의 액션 타겟 메서드 구현

마치면서

네비게이션 아이템과 바 버튼 아이템을 효과적으로 사용하면 사용자에게 훨씬 더 직관적이고 쉬운 인터페이스를 제공할 수 있다. 또한 왜 필요한지, 어떻게 사용되는지에 대해 간단하게 알아보았다. 바 버튼 아이템의 경우 네비게이션 아이템 뿐만 아닌 다양한 곳에서 활용이 가능하다.