iOS
UITabBarController

Maak een instantie

Een 'tabbalk' wordt vaak aangetroffen in de meeste iOS-apps en wordt gebruikt om verschillende weergaven op elk tabblad weer te geven.

Sleep een tabbalkcontroller vanuit de objectbibliotheek naar het canvas om een tabbalkcontroller te maken met behulp van de interfacebuilder.

Standaard wordt een tabbalkcontroller geleverd met twee weergaven. Om extra weergaven toe te voegen, bedien je slepen van de tabbalkcontroller naar de nieuwe weergave en selecteer je 'weergavecontrollers' in de vervolgkeuzelijst.

Tabbalk Titel en pictogram wijzigen

Het verhaalbord gebruiken:

Selecteer het item in de tabbalk van de bijbehorende weergavecontroller en ga naar de attributeninspecteur

Als u een ingebouwd pictogram en titel wilt, stelt u het 'Systeemitem' in op de overeenkomstige waarde.

Voeg voor een aangepast pictogram de vereiste afbeeldingen toe aan de map activa en stel het 'Systeemitem' van eerder in op 'aangepast'.

Stel nu het pictogram in dat moet worden weergegeven wanneer het tabblad is geselecteerd in de vervolgkeuzelijst 'geselecteerde afbeelding' en het standaardtabpictogram in de vervolgkeuzelijst 'afbeelding'. Voeg de bijbehorende titel toe in het veld 'titel'.

programmatisch:

Voeg in de viewDidLoad() -methode van de viewDidLoad() de volgende code toe:

Doelstelling C:

self.title = @"item";

self.tabBarItem.image = [UIImage imageNamed:@"item"];
self.tabBarItem.selectedImage = [UIImage imageNamed:@"item_selected"];

Snel:

self.title = "item"
self.tabBarItem.image = UIImage(named: "item")
self.tabBarItem.selectedImage = UIImage(named: "item_selected")

Navigatiecontroller met TabBar

Navigatiecontroller kan worden ingesloten in elke tabs met behulp van storyboard zelf. Het kan zijn zoals in de screenshot toegevoegd.

Om een navigatiecontroller toe te voegen aan een weergavecontroller die is verbonden via de tabbalkcontroller, volgt hier de stroom

• Selecteer de weergavecontroller waarvoor we de navigatiecontroller moeten toevoegen. Laat het hier de Search View Controller zijn als de selectieweergave.
• Selecteer Embed In -> Navigation Controller in het Editor- menu van de Xcode

Tabbalk kleur aanpassen

[[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 met aangepaste kleurselectie

UITabBarController-gebouw in Swift 3 Wijzig de afbeeldingskleur en titel volgens selectie met het wijzigen van de geselecteerde tabkleur.

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
    }
    
}

Kies afbeelding voor tabbalk en stel hier de tabtitel in

Selecteer een ander tabblad

Maak Tab Bar-controller programmatisch zonder 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
    }