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.

contrôleur de barre d'onglets

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.

barre d'onglets avec vues

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".

Inspecteur des attributs d'élément de la barre d'onglets

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

entrer la description de l'image ici

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

créer un onglet personnalisé

Sélection de l'onglet

Sélection d'un autre onglet

entrer la description de l'image ici

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
    }


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow