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.





Comments