Appearance사용해 NavigationBar 커스텀하기(iOS 13.0+)

오늘은 프로젝트 때문에 NavigationBar을 입맛에 맞게 커스텀 해야 했는데 iOS13 이후로 NavigationBar가 변경되어 커스텀 하는데 삽질을 좀 했습니다.

때문에 이번에 삽질했던 과정 및 해결 방법을 기록하기 위해 iOS13부터 변경된 NavigationBar를 커스텀 하는 방법에 대해서 알아보겠습니다.

오늘의 목표

그림과 같은 반투명한 NavigationBar 만들기

 

먼저, 왼쪽 버튼과 title만 입력하고, 아무 작업도 하지 않은 navigationBar의 기본적인 모습입니다.

그럼 제가 처음 접근했던 방법부터 보여드리면서,

최종적으로 Appearance 사용하여 문제를 해결한 방법까지 순차적으로 작성해 보겠습니다.

navigationBar.tintColor = .white 
// 흰색으로 버튼 컬러 설정

navigationBar.barTintColor = .black.withAlphaComponent(0.3) 
// 검점색의 0.3의 투명도로 bar 컬러 설정

navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
// 흰색으로 title 컬러 설정

navigationBar.isTranslucent = false
// 흐림효과 off

먼저 "오늘의 목표"처럼 변경하기 위해 위와 같은 코드를 작성하였습니다.

노랑색으로 표시된 레이어가 흐림 임펙트 역할을 하는 레이어입니다.
Appearance 타입을 사용하지 않았다면,
isTranslucent 프로퍼티를 통해,
사용했다면,
Appearance의 backgroundEffect 프로퍼티를 통해 관리할 수 있습니다.

결과를 확인해 볼까요??

분명 투명도를 0.3으로 설정했지만, 투명 효과가 적용되지 않았습니다.

위 사진을 보면 Alpha가 1로 투명도가 설정되지 않았습니다.

이를 해결하기 위해선 13.0에서 새로 나온 Appearance를 사용하면 해결할 수 있습니다.

정확히는 UINavigationBarAppearance 타입을 사용합니다.

let appearance = UINavigationBarAppearance()
// 타입생성

appearance.backgroundColor = .black.withAlphaComponent(0.3)
// 배경색 0.3투명도의 검정색으로 설정

appearance.backgroundEffect = nil
// 흐림 임펙트 off

appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
// titleColor 흰색으로 설정

navigationBar.standardAppearance = appearance
// navigationBar가 기본 상태 일 때 해당 효과 적용

위 코드와 같이 타입을 생성하여 원하는 색과 흐림 효과를 설정해 주면 됩니다.

만약 NavigationBar을 투명하게만 설정하고 싶다면,

func configureWithOpaqueBackground()

위 메서드를 호출해 주면 복잡한 설정 없이 NavigationBar을 투명하게 만들어줍니다.

그럼 최종 결과를 확인해 볼까요??

위 그림과 같이 0.3의 투명도의 검정색으로 옮바르게 설정된것을 확인할 수 있습니다.