CustomBackgroundColor BackgroundClear ColorShadow BlurredColorShadow TitleFont CustomBarButton NavigationBarHideWhenScroll
Custom Background Color
navigationController?.navigationBar.tintColor = .systemIndigo
navigationController?.navigationBar.barTintColor = .systemYellow
Clear Background Color
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()
// shadow clear
Custom Color Shadow
UIColor to UIImage 방법으로 Shadow Color를 변경하는 방법이예요.
navigationController?.navigationBar.shadowImage = colorToImage(.systemIndigo)private func colorToImage(_ color: UIColor) -> UIImage {
let size: CGSize = CGSize(width: UIScreen.main.bounds.width, height: 1)
let image: UIImage = UIGraphicsImageRenderer(size: size).image { context in
color.setFill()
context.fill(CGRect(origin: .zero, size: size))
}return image
}
Blurred Color Shadow
navigationController?.navigationBar.layer.masksToBounds = false
navigationController?.navigationBar.layer.shadowColor = UIColor.systemIndigo.cgColor
navigationController?.navigationBar.layer.shadowOpacity = 0.8
navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 2)
navigationController?.navigationBar.layer.shadowRadius = 2
Custom Font Title, Custom BackButton Title
navigationItem.titleView = attributeTitleView()let backButton: UIBarButtonItem = UIBarButtonItem()
backButton.title = "Prev"
navigationController?.navigationBar.topItem?.backBarButtonItem = backButton// Set Attribute Title
private func attributeTitleView() -> UIView {
let label: UILabel = UILabel()
let lightText: NSMutableAttributedString =
NSMutableAttributedString(string: "Title", attributes: [
.foregroundColor: UIColor.systemIndigo,
.font: UIFont.systemFont(ofSize: 18, weight: .light)
]) let boldText: NSMutableAttributedString =
NSMutableAttributedString(string: "Font", attributes: [
.foregroundColor: UIColor.systemBlue,
.font: UIFont.systemFont(ofSize: 20, weight: .medium)
])
let naviTitle: NSMutableAttributedString
= lightText naviTitle.append(boldText) label.attributedText = naviTitle
return label
}
Custom BarButton
BarButton에 Custom Action을 줄 경우 손가락으로 가장자리를 슬라이드할 때 뒤로가기 Event가 없어지므로 Slide에 대한 Gesture 처리를 해주어야해요.
// Left Button
let leftBarButton: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .stop, target: self, action: #selector(goBack))
navigationItem.leftBarButtonItem = leftBarButton// Right Button
let rightBarButton: UIBarButtonItem = UIBarButtonItem(barButtonSystemItem: .refresh, target: self, action: #selector(goBack))
navigationItem.rightBarButtonItem = rightBarButton// Slide Gesture
navigationController?.interactivePopGestureRecognizer?.delegate = nil
NavigationBar Hide and Show When Scrolling
navigationController?.hidesBarsOnTap = true
스크롤을 다시 위로 올릴 때 NavigationBar가 나타나요.
여기까지, 기본적으로 NavigationBar를 Custom 할 수 있는 간단한 방법들을 알아봤어요. 더욱 자세한 소스는 Github에 업로드 했으니 참고해주세요.
그리고 한 가지 더! NavigationBar를 Clear로 했을 경우 화면이 Push 되거나 뒤로 돌아갈 때 NavigationBar 옆부분에도 Shadow가 생긴다는 사실!
그림자 유무에 대해서 아무리 구글링해도 확인할 수가 없었는데, 이번 글을 위해 테스트 해 보다가 발견했어요.
소스에서 보면 TableViewTop 기준이 superViewTop인지, view.Top 인지에 따라서 NavigationBar 옆쪽 Shadow 유무 등등.. 다양하게 조절할 수 있으니 코드를 바꿔보면서 테스트 하면 될 것 같아요. 😉
