ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Back Button 꾸미기
    정리/02. Back Button Item 2022. 9. 2. 17:11

     

     

     

     

     

    # Back Button 꾸미기

     

    // Step1 : 백버튼 인스턴스를 생성하여 꾸밀 속성을 부여하자.
    
    let backbuttonAppearance = UIBarButtonItemAppearance()
    
        // 백버튼의 텍스트 꾸미기
        backbuttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.red,
                                                           .backgroundColor: UIColor.orange]
    
        // 백버튼의 백그라운드 이미지 바꾸기
        backbuttonAppearance.normal.backgroundImage = UIImage(systemName: "")
    
    
    
    // Step2 : 위에서 꾸민 백버튼을 사용하기 위해 navigationAppearance 인스턴스를 만들자.
    
        let navigationbarAppearance = UINavigationBarAppearance()
    
        //위에 만든 백버튼을 지정해주기
        navigationbarAppearance.backButtonAppearance = backbuttonAppearance
    
        //백버튼의 화살표 모양 바꾸기
        navigationbarAppearance.setBackIndicatorImage(backButtonImage, transitionMaskImage: backButtonImage)
    	//backButtonImgae는 따로 프라퍼티로 지정함
    
    
    // Step3 : 현재 뷰에 위에서 만든 navigation 인스턴스를 지정하자.
    
    navigationItem.standardAppearance = navigationbarAppearance
    navigationItem.scrollEdgeAppearance = navigationbarAppearance

     

     

     

    #Description

     

    navigationItem에는 현재 뷰의 모양을 지정하는 standardAppearance/scrollEdgeApperance가 이 있다.

    -> 여기에 navigationBarAppearance를 지정해주면 타이틀이나 백버튼을 꾸밀 수 있다.

    -> 백버튼을 꾸밀 때는 그 밑에 있는 backButtonAppearance/setBackIndicator를 설정해준다.

     

     

    만약

    1. 해당 뷰뿐만 아니라 전체 뷰의 속성을 바꾸고 싶다면 navigationItem이 아니라 navigationCotroller로 접근해 속성을 지정한다.

    2. navigation에서 타이틀과 백버튼을 모두 함께 꾸미고 싶다면 아래처럼 하나의 navigationBarAppearance에 지정하면 된다.

    let navigationbarAppearance = UINavigationBarAppearance()
    
    
    // 타이틀 꾸미기
    navigationbarAppearance.titleTextAttributes = [.font: UIFont(name: "Baskerville-BoldItalic", size: 30),
                                      .backgroundColor: UIColor.gray,
                                      .foregroundColor: UIColor.green,
                                      .underlineStyle: 3,
                                      .underlineColor: UIColor.black,
                                      .strikethroughColor: UIColor.red,
                                      .strikethroughStyle: 1
    ]
    
    
    // 백버튼 꾸미기
    let backbuttonAppearance = UIBarButtonItemAppearance()
    backbuttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.red,
                                                       .backgroundColor: UIColor.orange]
    navigationbarAppearance.backButtonAppearance = backbuttonAppearance   
    
    
    
    navigationItem.standardAppearance = navigationbarAppearance
    navigationItem.scrollEdgeAppearance = navigationbarAppearance

    '정리 > 02. Back Button Item' 카테고리의 다른 글

    Back Button 기본 설정  (0) 2022.09.02
Designed by Tistory.