UITabbar mit eigenem Selektionindikator in Swift erstellen

Dieses Feature kennt man aus sehr sehr vielen Apps. Das aktuell ausgewählte Item in einer UITabBar wird nicht nur durch die Farbänderung des Icons beziehungsweise des Textes sichtbar gemacht, sondern auch durch beispielsweise einen Balken am unteren Ende der View.

Auch wenn dies oft eingesetzt wird ist es kein Bestandteil von UIKit sondern muss händisch nachgereicht werden.

Allerdings stellt das kein wirkliches Problem da. Mit einer eigenen UITabBarController Klasse und wenigen Zeilen zusätzlichen Quelltext hat man diesen Identifier spielend nachgerüstet.

Um es einfach zu halten wird hier auf Landscape-Formate verzichtet. hier kann je nach Angelegenheit noch der ein oder andere Event-Handler nötig sein.

Quelltext

import UIKit

// 1. Eigenen Controller erstellen
class TabBarController: UITabBarController
{
    // 2. Gefällige Eigenschaften des Indicators festlegen
    private let indicatorShape: CAShapeLayer    = CAShapeLayer()
    private let indicatorHeight: CGFloat        = 5
    private let indicatorBottomMargin: CGFloat  = 0
    private var indicatorColor: CGColor         = UIColor.redColor().CGColor
    private var indicatorWidth: CGFloat!
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        
        // 3. Setzen gewisser Eingenschaften
        // * Die Breite des Indicators ist die Breite des Bildschirms
        //      geteilt durch die Anzahl an Items
        indicatorShape.fillColor = indicatorColor
        indicatorWidth = view.bounds.maxX / CGFloat((viewControllers?.count)!)
        view.layer.addSublayer(indicatorShape)
        
        // 4. Startposition festlegen
        updateTabbarIndicatorBySelectedTabIndex(0)
    }
    
    // MARK: - Helper -
    
    // 5. Wenn ein neues Item selektiert ist
    //      setze den Indicator neu und nehme als X-Spacing
    //      immer das entsprechende Vielfache der Breite des Items
    func updateTabbarIndicatorBySelectedTabIndex(index: Int) -> Void
    {
        let updatedBounds   = CGRect( x: CGFloat(index) * indicatorWidth,
                                    y: view.bounds.maxY - indicatorHeight - indicatorBottomMargin,
                                    width: indicatorWidth,
                                    height: indicatorHeight)
        
        let path            = CGPathCreateMutable()
        CGPathAddRect(path, nil, updatedBounds)
        indicatorShape.path = path
    }
}

// MARK: - UITabBarControllerDelegate -

// 6. Event-Handler fuer 5tens hinzufügen
extension TabBarController: UITabBarControllerDelegate
{
    func tabBarController(tabBarController: UITabBarController, 
                            didSelectViewController viewController: UIViewController)
    {
        updateTabbarIndicatorBySelectedTabIndex(tabBarController.selectedIndex)
    }
}

Diese Klasse schließlich im Storyboard dem entsprechenden Tabbar als Controller zuweisen. Fertig.

Ergebnis

Am Besten wirkt der Balken wenn man entweder auf Labels im Item verzichtet oder diese etwas nach oben schiebt.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s