네비게이션바 / title1줄,2줄, 이미지, 바아이템영역

1. 메인스토리보드에서 네비게이션 컨트롤러 연결한다.

네비게이션 아이템은 네비게이션바의 콘텐츠를 표현하는 객체 

네비게이션바는 네비게이션컨트롤러의 제어하에 있는 공통객체

네비아이템은 개별적인 뷰컨트롤러에 통제를 받는 개별적 객체 이므로

네비게이션 아이템을 화면에 추가할때는 네비게이션컨트롤러가 아닌 뷰컨트롤러에 추가해야한다. 참조시에도 뷰컨트롤러를 거쳐야한다.

 

2. 타이틀 두줄로 표현하는 방법 1 ( 레이블 객체하나로 두 줄표현하기 ) 작성

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 네비게이션 타이틀 초기화
        self.initTitle()
    }
    
    func initTitle(){
        
        // 네비게이션 타이틀용 레이블 객체
        let nTitle = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
        
        //속성설정
        nTitle.numberOfLines = 2 // 두줄까지 표시 되도록 설정
        nTitle.textAlignment = .center // 중앙정렬
        //        nTitle.textColor = .white // 텍스트컬러
        nTitle.font = UIFont.systemFont(ofSize: 16)
        nTitle.text = "58개 숙소 \n 1박(12월12일 - 2월2일)"
        
        //네비게이션 타이틀에 입력(내비게이션아이템에 대입)
        self.navigationItem.titleView = nTitle
        }
    }

타이틀 두줄로 표현하는 방법 2( 컨테이너를 만들어 레이블2개 추가하기 )

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 네비게이션 타이틀 초기화
        self.initTitleNew()
    }
    
    func initTitleNew(){
        // 복합적인 레이아웃을 구현할 컨테이너 뷰
        let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 36))
        
        // 상단레이블 정의
        let topTitle = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 18))
                               
        topTitle.numberOfLines = 1
        topTitle.textAlignment = .center
        topTitle.font = UIFont.systemFont(ofSize: 15)
        topTitle.textColor = .white
        topTitle.text = "58개 숙소"
                               
         // 하단레이블 정의
        let subTitle = UILabel(frame: CGRect(x: 0, y: 18, width: 200, height: 18))
        subTitle.numberOfLines = 1
        subTitle.textAlignment = .center
        subTitle.font = UIFont.systemFont(ofSize: 12)
        subTitle.textColor = .white
        subTitle.text = "1박(1234567890)"
        
        //상하단 레이블을 컨테이너뷰에 추가한다.
        containerView.addSubview(topTitle)
        containerView.addSubview(subTitle)
        
        self.navigationItem.titleView = containerView
        // 배경색상 설정( 앱델리게이트에서 해줘야 적용됬음)
//        let color = UIColor(red: 0.02, green: 0.22, blue: 0.49, alpha: 1.0)
//        self.navigationController?.navigationBar.barTintColor = color                      
    }
   
}

네비게이션바 타이틀 bg 설정

문제해결 : 예제를 따라하다보니 네비타이틀bg는 적용이 되지 않았는데, AppDelegate에 적용하니 반영되었다.

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        // 앱델리게이트에 bg적용
        let color = UIColor(red: 0.02, green: 0.22, blue: 0.49, alpha: 1.0)
        UINavigationBar.appearance().backgroundColor  = color
        return true
    }

 AppDelegate 전체소스

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    
    final class AppAppearance {
        static func setupAppearance() {
            
            // MARK: - NavigationBar
            /// navigationBar 배경 색상
            UINavigationBar.appearance().backgroundColor = UIColor.darkGray
            /// navigationBar의 버튼 색상 (ex - back 버튼)
            UINavigationBar.appearance().tintColor = .lightGray
            /// navigationBar 중앙에 존재하는 title 색상
            UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.orange]
            
            // MARK: - TabBar
            /// TabBar의 버튼 색상 (ex - 탭바 위에 있는 검색 이미지의 색상)
            /// 단, 현재 선택된 ViewController의 tab의 색상과 선택되어 있지 않은 tab의 색상은 자동으로 조정
            UITabBar.appearance().tintColor = .black
            
            /// TabBar의 background 색상
            UITabBar.appearance().backgroundColor = .gray
        }
    }
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        //        AppAppearance.setupAppearance()
        // 앱델리게이트에 bg적용된 부분
        let color = UIColor(red: 0.02, green: 0.22, blue: 0.49, alpha: 1.0)
        UINavigationBar.appearance().backgroundColor  = color
        return true
    }
  }

 

3. 타이틀에 이미지 넣기 

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 네비게이션 타이틀 초기화
        self.initTitleImage()
    }
    
    }
    // 타이틀에 이미지를 표시하는 메소드
    func initTitleImage(){
        let image = UIImage(named: "swift_logo")
        let imageV = UIImageView(image: image)
        
        self.navigationItem.titleView = imageV
    }
}

4.타이틀에 텍스트 필드 사용하기 / 아이템 영역 커스터마이징

아이템도 하나의 컨테이너용 뷰를 정의하고, 이안에 다시 레이블과 버튼을 배치한다.

타이틀뷰를 중앙, 좌우측으로 몰고 싶다면, 좌우측아템을 제거하거나 비워두는 식으로 구현할 수 있다.

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 네비게이션 타이틀 초기화
        self.initTitleInput()
     
    }
    
    // 텍스트 필드를 이용하여 타이틀을 구성하는 메소드
    func initTitleInput() {
        // 텍스트 필드 객체 생성
        let tf = UITextField()
        tf.frame = CGRect(x: 0, y: 0, width: 300, height: 35)
        tf.backgroundColor = .white // 배경 색상을 흰색으로
        tf.font = UIFont.systemFont(ofSize: 13) // 입력할 글씨 크기를 13픽셀로
        tf.autocapitalizationType = .none // 자동 대문자 변환 속성은 사용하지 않도록
        tf.autocorrectionType = .no // 자동 입력 기능 해제
        tf.spellCheckingType = .no // 스펠링 체크 기능 해제
        tf.keyboardType = .URL // URL 입력 전용 키보드
        tf.keyboardAppearance = .dark
        tf.layer.borderWidth = 0.3 // 테두리 경계선 두께
        tf.layer.borderColor = UIColor(red:0.60, green:0.60, blue:0.60, alpha:1.0).cgColor
        
        // 타이틀 뷰 속성에 대입
        self.navigationItem.titleView = tf
        
        // 왼쪽 아이템 영역에 들어갈 뷰
        let back = UIImage(named: "arrow-back")
        let leftItem = UIBarButtonItem(image: back, style: .plain, target: self, action: nil)
        
        // 왼쪽 아이템 영역에 이미지 뷰 설정
        self.navigationItem.leftBarButtonItem = leftItem
        
        // STEP 1) 오른쪽 아이템 영역에 들어갈 컨테이너 뷰
        let rv = UIView()
        rv.frame = CGRect(x: 0, y: 0, width: 70, height: 37)
//        rv.backgroundColor = .brown
        
        let rItem = UIBarButtonItem(customView: rv)
        self.navigationItem.rightBarButtonItem = rItem
        
        // STEP 2) 카운트 값을 표시할 레이블 구성
        let cnt = UILabel()
        cnt.frame = CGRect(x: 10, y: 8, width: 20, height: 20)
        cnt.font = UIFont.boldSystemFont(ofSize: 10)
        cnt.textColor = UIColor(red: 0.60, green: 0.60, blue: 0.60, alpha: 1.0)
        cnt.text = "12"
        cnt.textAlignment = .center
        
        // 외곽선
        cnt.layer.cornerRadius = 3 // 모서리 둥글게 처리
        cnt.layer.borderWidth = 2
        cnt.layer.borderColor = UIColor(red: 0.60, green: 0.60, blue: 0.60, alpha: 1.0).cgColor
        
        // 레이블을 서브 뷰로 추가
        rv.addSubview(cnt)
        
        // STEP 3) more 버튼 구현
        let more = UIButton(type:.system)
        more.frame = CGRect(x: 50, y: 10, width: 16, height: 16)
        more.setImage(UIImage(named: "more"), for: .normal)
        
        rv.addSubview(more)
    }
}

출처: 꼼꼼한재은씨실전편