Aggiungere separatore tra la sezione in TabBar

Question

devo aggiungere separatore tra la sezione in TabBar come nell'immagine qui sotto:

Ho cercato di impostare l'immagine di sfondo per la barra delle linguette utilizzando questa immagine: ma non ho problemi quando Giro il dispositivo.

Il codice che ho usato:

+ (UITabBarController *)loadTabbar 
{ 
    UITabBarController *tabBarController = [UITabBarController new]; 

    MenuVC  *viewController0 = [MenuVC new]; 
    FavVC  *viewController1 = [FavVC new]; 
    UploadVC *viewController2 = [UploadVC new]; 
    RestoreVC *viewController3 = [RestoreVC new]; 
    SettingsVC *viewController4 = [SettingsVC new]; 

    tabBarController.viewControllers = @[viewController0, viewController1, iewController2, viewController3, viewController4]; 
    [tabBarController.tabBar setBackgroundImage:[UIImage mageNamed:@"tabbar_color"]]; 

    [self setRootController:tabBarController]; 

    return tabBarController; 
} 

Inoltre, ho cercato di aggiungere un separatore sul lato destro dell'immagine che ho usato per Abbar articolo ma senza risultato. Puoi, per favore, aiutarmi con qualche consiglio?

Grazie!

Answer 1

È possibile aggiungere un separatore sul lato destro dell'immagine per ogni TabBarItem. Dimensione immagine: @1x - 64*50 (Larghezza dispositivo - 320, Elementi - 5, quindi TabBarItem Larghezza = 320/5 = 64) e @2x - 128*100 (Se nella TabBar sono presenti cinque TabBarItems).

Quando si ruota il dispositivo, la larghezza di TabBarItems viene modificata.

Quindi, è possibile aggiungere separatore nel proprio image e rendere gli effetti uguali a quelli desiderati.

Speranza, questo è quello che stai cercando. Ogni preoccupazione mi ritorna.

Answer 2

Si può fare di programmazione di sfondo per UITabBar:

#define SEPARATOR_WIDTH 0.4f 
#define SEPARATOR_COLOR [UIColor whiteColor] 

- (void) setupTabBarSeparators { 
    CGFloat itemWidth = floor(self.tabBar.frame.size.width/self.tabBar.items.count); 

    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tabBar.frame.size.width, self.tabBar.frame.size.height)]; 
    for (int i=0; i<self.tabBar.items.count - 1; i++) { 
     UIView *separator = [[UIView alloc] initWithFrame:CGRectMake(itemWidth * (i +1) - SEPARATOR_WIDTH/2, 0, SEPARATOR_WIDTH, self.tabBar.frame.size.height)]; 
     [separator setBackgroundColor:SEPARATOR_COLOR]; 
     [bgView addSubview:separator]; 
    } 

    UIGraphicsBeginImageContext(bgView.bounds.size); 
    [bgView.layer renderInContext:UIGraphicsGetCurrentContext()]; 
    UIImage *tabBarBackground = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    [[UITabBar appearance] setBackgroundImage:tabBarBackground]; 
} 

Si dovrebbe estendere solo UITabBarController e fare un UITabBarViewController. Dovresti chiamare questo metodo in viewDidLoad e in willRotateToInterfaceOrientation.

Answer 3

Ho appena convertito @bojanb89's answer in Swift 3. Ciò non rende un'immagine di sfondo, ma aggiunge semplicemente una vista tra ogni elemento della barra delle schede.

func setupTabBarSeparators() { 
    let itemWidth = floor(self.tabBar.frame.size.width/CGFloat(self.tabBar.items!.count)) 

    // this is the separator width. 0.5px matches the line at the top of the tab bar 
    let separatorWidth: CGFloat = 0.5 

    // iterate through the items in the Tab Bar, except the last one 
    for i in 0...(self.tabBar.items!.count - 1) { 
     // make a new separator at the end of each tab bar item 
     let separator = UIView(frame: CGRect(x: itemWidth * CGFloat(i + 1) - CGFloat(separatorWidth/2), y: 0, width: CGFloat(separatorWidth), height: self.tabBar.frame.size.height)) 

     // set the color to light gray (default line color for tab bar) 
     separator.backgroundColor = UIColor.lightGray 

     self.tabBar.addSubview(separator) 
    } 
}