【Swift】Code-only implementation of TabBar and NavigationBar

Swift Basics

Code-only implementation of TabBar and NavigationBar to make it look like an app.

I put together the basic TabBar and NavigationBar settings again.

(Listed on 2022.12.22, IOS:15.5, Xcode: 13.4.1)

File to be created

  • MainTabBarController :Tab setting page
  • MainNavigationController :Navigation bar setting page
  • FirstViewController : First page
  • SecondViewController: Second page
  • ThirdViewController : Third page

Code-only setting

First, we will make it possible to implement the code only, instead of using Storyboard.

Please refer to the following article I wrote previously.

Setting up SceneDelegate

Set rootViewController to 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
        // Set TabBarController at the root of Window
        window.rootViewController = MainTabBarController()
        window.makeKeyAndVisible()
    }

AppDelegate Setting

1)Set the following settings to application(_:didFinishLaunchingWithOptions:) since NavigationBar and Tabbar borders are transparent by default from iOS15

2) Change the color of the navigation bar, etc. here

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? -> Bool {
        //configure to display NavigationBar as it was until IOS14 for it to be transparent by default in iOS 15
        if #available(iOS 15.0, *) {
            //Declare the appearance setting of the navigation bar
            let navigationBarAppearance = UINavigationBarAppearance()
            // Set default background color
            navigationBarAppearance.configureWithDefaultBackground()
            //assign to each mode
            UINavigationBar.appearance().standardAppearance = navigationBarAppearance
            UINavigationBar.appearance().compactAppearance = navigationBarAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
            
            //Change the color of the navigation bar title text
            navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.black].
            // change color of navigation bar
            // navigationBarAppearance.backgroundColor = UIColor.white
        }

        //set TabBar to be transparent by default in iOS 15 to display as it did until IOS 14
        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
    }

Tab setting page (MainTabBarController)

Set each page as the root of the navigation controller

class MainTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setTab()
    }
    
    // Tab bar set function
    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]
    }
    
    
}

Navigation Bar Settings Page(MainNavigationController)

Navigation controller settings are not required
*Need to be configured in “AppDelegate” from iOS15

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

Configuration of each page

Simple text settings for each page
The other two pages are omitted because they only change the “title” and “backgroundColor” sections.

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

参考サイト

Note that these two sites are articles in Japanese.

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

Comments

Copied title and URL