[Swift] 멋진 NavigationBar (색상, 글꼴, 항목 배열) 만들기 (화면별로 설정)

이 기사에서는 멋진 NavigationBar를 만드는 방법 (색상, 글꼴, 항목의 배열 방법)을 소개합니다!
매우 쉽게 구현할 수 있으므로 꼭 시도해보세요!

Before





After





위에서 언급했듯이 NavigationBar를 준비하는 것만으로도 멋집니다!
※ 본 기사에서는, 화면마다 NavigationBar를 어레인지하고 있습니다만, 전체를 같은 디자인으로 어레인지하고 싶은 경우는 아래의 기사를 참고로 해 보세요.
· [Swift] 멋진 NavigationBar (색상, 글꼴, 항목의 배열) 만들기

그럼, 아래와 같이 구현해 갑시다!

1. Main.storyboard 준비



먼저 Main.storyboard에서 아래 사진과 같이 NavigationController를 만듭니다.
이제 Before의 부분은 완성입니다!


2. 각각의 ViewController.swift에 디자인을 어레인지하기 위한 코딩



그럼, After와 같이 멋지게 디자인해 갑시다!
매우 간단하고, 화면 마다( ViewController.swift 마다)에 아래와 같이, viewWillAppear에 코드를 쓰는 것으로 구현할 수 있습니다!

아래 코드는 After 화면마다 설정 1에 해당합니다.

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(_ animated: Bool) {
        self.navigationItem.title = "画面ごとに設定1"

        // ナビゲーションバーの背景色
        self.navigationController?.navigationBar.barTintColor = UIColor.yellow

        self.navigationController?.navigationBar.titleTextAttributes =
            // フォントカラー
            [NSAttributedString.Key.foregroundColor: UIColor.blue,
             // フォントの種類
                NSAttributedString.Key.font: UIFont(name: "Times New Roman",
                    // フォントサイズ
                    size: 15)!]

        // ナビゲーションバー上のアイテムの色
        self.navigationController?.navigationBar.tintColor = UIColor.black
    }
}

아래 코드는 After 화면마다 설정 2에 해당합니다.

SecondViewController.swift
import UIKit

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillAppear(_ animated: Bool) {
        self.navigationItem.title = "画面ごとに設定2"

        // ナビゲーションバーの背景色
        self.navigationController?.navigationBar.barTintColor = UIColor.cyan

        self.navigationController?.navigationBar.titleTextAttributes =
            // フォントカラー
            [NSAttributedString.Key.foregroundColor: UIColor.purple,
             // フォントの種類
                NSAttributedString.Key.font: UIFont(name: "Times New Roman",
                    // フォントサイズ
                    size: 30)!]

        // ナビゲーションバー上のアイテムの色
        self.navigationController?.navigationBar.tintColor = UIColor.red
    }
}

참고



NavigationBar를 모두 같은 디자인으로 어레인지하고 싶은 경우는 여기 의 기사를 참고해 보세요.

좋은 웹페이지 즐겨찾기