iOS
UITabBarController
Recherche…
Créer une instance
Une «barre d'onglets» se trouve généralement dans la plupart des applications iOS et est utilisée pour présenter des vues distinctes dans chaque onglet.
Pour créer un contrôleur de barre d'onglets à l'aide du générateur d'interface, faites glisser un contrôleur de barre d'onglets de la bibliothèque d'objets dans le canevas.
Par défaut, un contrôleur de barre de tabulation est livré avec deux vues. Pour ajouter des vues supplémentaires, contrôlez le glisser depuis le contrôleur de la barre d'onglets vers la nouvelle vue et sélectionnez «Contrôler les contrôleurs» dans la liste déroulante.
Modification du titre de la barre d'onglets et de l'icône
Utiliser le Story Board:
Sélectionnez l'élément de la barre d'onglets dans le contrôleur de vue correspondant et accédez à l'inspecteur d'attributs
Si vous souhaitez une icône et un titre intégrés, définissez l'option «Élément système» sur la valeur correspondante.
Pour une icône personnalisée, ajoutez les images requises au dossier des ressources et définissez l'élément «Élément système» de l'ancien à «personnalisé».
Maintenant, définissez l'icône à afficher lorsque l'onglet est sélectionné dans le menu déroulant "Image sélectionnée" et l'icône de l'onglet par défaut dans le menu déroulant "Image". Ajoutez le titre correspondant dans le champ "titre".
Par programme:
Dans la méthode viewDidLoad()
du contrôleur de vue, ajoutez le code suivant:
Objectif c:
self.title = @"item";
self.tabBarItem.image = [UIImage imageNamed:@"item"];
self.tabBarItem.selectedImage = [UIImage imageNamed:@"item_selected"];
Rapide:
self.title = "item"
self.tabBarItem.image = UIImage(named: "item")
self.tabBarItem.selectedImage = UIImage(named: "item_selected")
Contrôleur de navigation avec TabBar
Le contrôleur de navigation peut être intégré dans chaque onglet en utilisant le storyboard lui-même. Cela peut être comme dans la capture d'écran ajoutée.
Pour ajouter un contrôleur de navigation à un contrôleur de connexion se connectant depuis le contrôleur de la barre d’onglet, voici le flux
- Sélectionnez le contrôleur de vue pour lequel vous devez ajouter un contrôleur de navigation. Ici, laissez-le être le contrôleur de vue de recherche comme affichage de sélection.
- Dans le menu Editeur du Xcode, sélectionnez l'option Intégrer dans -> Contrôleur de navigation
Personnalisation de la couleur de la barre d'onglets
[[UITabBar appearance] setTintColor:[UIColor whiteColor]];
[[UITabBar appearance] setBarTintColor:[UIColor tabBarBackgroundColor]];
[[UITabBar appearance] setBackgroundColor:[UIColor tabBarInactiveColor]];
[[UINavigationBar appearance] setBarTintColor:[UIColor appBlueColor]];
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
[[UINavigationBar appearance] setBarStyle:UIBarStyleBlack];
UITabBarController avec sélection de couleurs personnalisée
UITabBarController dans Swift 3
Modifiez la couleur et le titre de l'image en fonction de la sélection en modifiant la couleur de l'onglet sélectionné.
import UIKit
class TabbarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
self.navigationController?.isNavigationBarHidden = true
UITabBar.appearance().tintColor = UIColor.purple
// set red as selected background color
let numberOfItems = CGFloat(tabBar.items!.count)
let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
tabBar.selectionIndicatorImage = UIImage.imageWithColor(UIColor.lightText.withAlphaComponent(0.5), size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
// remove default border
tabBar.frame.size.width = self.view.frame.width + 4
tabBar.frame.origin.x = -2
}
override func viewWillAppear(_ animated: Bool) {
// For Images
let firstViewController:UIViewController = NotificationVC()
// The following statement is what you need
let customTabBarItem:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named: "notification@2x")?.withRenderingMode(UIImageRenderingMode.alwaysOriginal), selectedImage: UIImage(named: "notification_sel@2x"))
firstViewController.tabBarItem = customTabBarItem
for item in self.tabBar.items! {
let unselectedItem = [NSForegroundColorAttributeName: UIColor.white]
let selectedItem = [NSForegroundColorAttributeName: UIColor.purple]
item.setTitleTextAttributes(unselectedItem, for: .normal)
item.setTitleTextAttributes(selectedItem, for: .selected)
}
}
}
extension UIImage {
class func imageWithColor(_ color: UIColor, size: CGSize) -> UIImage {
let rect: CGRect = CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: size.width, height: size.height))
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
Choisir l'image pour la barre d'onglets et définir le titre de l'onglet ici
Sélection d'un autre onglet
Créer un contrôleur de barre d'onglets par programmation sans storyboard
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
var firstTabNavigationController : UINavigationController!
var secondTabNavigationControoller : UINavigationController!
var thirdTabNavigationController : UINavigationController!
var fourthTabNavigationControoller : UINavigationController!
var fifthTabNavigationController : UINavigationController!
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
Fabric.with([Crashlytics.self])
window = UIWindow(frame: UIScreen.main.bounds)
window?.backgroundColor = UIColor.black
let tabBarController = UITabBarController()
firstTabNavigationController = UINavigationController.init(rootViewController: FirstViewController())
secondTabNavigationControoller = UINavigationController.init(rootViewController: SecondViewController())
thirdTabNavigationController = UINavigationController.init(rootViewController: ThirdViewController())
fourthTabNavigationControoller = UINavigationController.init(rootViewController: FourthViewController())
fifthTabNavigationController = UINavigationController.init(rootViewController: FifthViewController())
tabBarController.viewControllers = [firstTabNavigationController, secondTabNavigationControoller, thirdTabNavigationController, fourthTabNavigationControoller, fifthTabNavigationController]
let item1 = UITabBarItem(title: "Home", image: UIImage(named: "ico-home"), tag: 0)
let item2 = UITabBarItem(title: "Contest", image: UIImage(named: "ico-contest"), tag: 1)
let item3 = UITabBarItem(title: "Post a Picture", image: UIImage(named: "ico-photo"), tag: 2)
let item4 = UITabBarItem(title: "Prizes", image: UIImage(named: "ico-prizes"), tag: 3)
let item5 = UITabBarItem(title: "Profile", image: UIImage(named: "ico-profile"), tag: 4)
firstTabNavigationController.tabBarItem = item1
secondTabNavigationControoller.tabBarItem = item2
thirdTabNavigationController.tabBarItem = item3
fourthTabNavigationControoller.tabBarItem = item4
fifthTabNavigationController.tabBarItem = item5
UITabBar.appearance().tintColor = UIColor(red: 0/255.0, green: 146/255.0, blue: 248/255.0, alpha: 1.0)
self.window?.rootViewController = tabBarController
window?.makeKeyAndVisible()
return true
}