目次
アプリっぽくするために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はデ...
コメント