【Swift】TabBarとNavigationBarをコードのみで実装

アプリ開発

アプリっぽくするためにTabBarとNavigationBarをコードのみで実装

基本的なTabBarとNavigationBarの設定をあらためてまとめてみました。

(2022.12.22記載, ios:15.5, Xcode: 13.4.1)

作成するファイル

○MainTabBarController       :タブ設定ページ
○MainNavigationController :ナビゲーションバー設定ページ
○FirstViewController    :最初のページ
○SecondViewController   :2ページ目
○ThirdViewController     :3ページ目

コードのみの設定

まずStoryboardではなくコードのみで実装できるようにします。

以前書いた下記の記事を参考にしてみてください。

SceneDelegateの設定

rootViewControllerをMainTabBarControllerに設定

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        let window = UIWindow(windowScene: windowScene)
        self.window = window
        // windowのルートにタブバーコントローラーを設定
        window.rootViewController = MainTabBarController()
        window.makeKeyAndVisible()
    }

AppDelegateの設定

①iOS15からNavigationBarとTabbarの境界線がデフォルトで透過されるため下記設定をapplication(_:didFinishLaunchingWithOptions:)に設定

②ナビゲーションバーの色の変更などもこちらで実施する

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        //iOS 15でNavigationBarがデフォルトで透過されるためのios14までと同じように表示する設定
        if #available(iOS 15.0, *) {
            //ナビゲーションバーの外観設定を宣言
            let navigationBarAppearance = UINavigationBarAppearance()
            //デフォルトの背景色を設定
            navigationBarAppearance.configureWithDefaultBackground()
            //各モードに代入
            UINavigationBar.appearance().standardAppearance = navigationBarAppearance
            UINavigationBar.appearance().compactAppearance = navigationBarAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
            
            //ナビゲーションバーのタイトル文字の色変更
            navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.black]
            //ナビゲーションバーの色変更
//          navigationBarAppearance.backgroundColor = UIColor.white
        }
        //iOS 15でTabBarがデフォルトで透過されるためのios14までと同じように表示する設定
        if #available(iOS 15.0, *) {
            // disable UITab bar transparent
            let tabBarAppearance: UITabBarAppearance = UITabBarAppearance()
            tabBarAppearance.configureWithDefaultBackground()
            UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
            UITabBar.appearance().standardAppearance = tabBarAppearance
        }
        return true
    }

タブ設定ページ(MainTabBarController)

それぞれのページをナビゲーションコントローラーのルートとして設定

class MainTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setTab()
    }
    
    //タブバー設置関数
    func setTab(){
        
        let first = MainNavigationController(rootViewController: FirstViewController())
        first.tabBarItem = UITabBarItem(tabBarSystemItem: .featured, tag: 0)
        
        let second = MainNavigationController(rootViewController: SecondViewController())
        second.tabBarItem = UITabBarItem(tabBarSystemItem: .mostViewed, tag: 1)
        
        let third = MainNavigationController(rootViewController: ThirdViewController())
        third.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 2)
        
        viewControllers = [first, second, third]
    }
    
    
}

ナビゲーションバー設定ページ(MainNavigationController)

ナビゲーションコントローラーの設定は不要
※iOS15からは「AppDelegate」で設定する必要あり

class MainNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
      
    }
   
}

各ページの設定

各ページの設定として簡単なテキストを設定
※その他2ページは「title」「backgroundColor」の部分を変更しているだけのため省略

class FirstViewController: UIViewController {
        
        override func viewDidLoad() {
            super.viewDidLoad()
            
            self.title = "FirstViewController"
            view.backgroundColor = .blue
         
        }
    }

参考サイト

【Swift4】Storyboardを使わずにTabやNavigationを実装する方法|年収アップへの道
Storyboardを使わずにコードのみで、TabやNavigationを実装する方法を紹介していきます。 コードのみで
iOS 15でNavigationBarとTabBarがデフォルトで透過される
iOS 15をXcode 13以上で開発していたところ、NavigationBarとTabBarの背景が透過されていることがわかりました。どうやらXcode 13でビルドをした場合、iOS 15のNavigationBarとTabBarはデ...

コメント

タイトルとURLをコピーしました