Hintergrundfarbe der aktiven Registerkarte Leiste Element in Swift

Question

Ich hoffe, dies ohne die Verwendung von Bildern zu erreichen, wenn überhaupt möglich. Gibt es eine Möglichkeit, den im Bild gezeigten Effekt programmgesteuert zu erstellen, ohne jedes Register als Bild ausgeben zu müssen?

Jede Frage, die ich auf SO überprüft habe, hat die Registerkarten als JPGs gespeichert, was mehr Arbeit ist, als ich denke, dass es sein sollte.

Irgendwelche Ideen?

Answer 1

Ich nahm einen ähnlichen Ansatz zu @matcartmill, aber ohne die Notwendigkeit für ein spezielles Bild. Diese Lösung basiert nur auf Ihrer Farbe.

// 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.redColor(), size: tabBarItemSize).resizableImageWithCapInsets(UIEdgeInsetsZero) 

// remove default border 
tabBar.frame.size.width = self.view.frame.width + 4 
tabBar.frame.origin.x = -2 

Ich mache Verwendung der folgenden Verlängerung der UIImage:

extension UIImage { 

    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage { 
     let rect: CGRect = CGRectMake(0, 0, size.width, size.height) 
     UIGraphicsBeginImageContextWithOptions(size, false, 0) 
     color.setFill() 
     UIRectFill(rect) 
     let image: UIImage = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 
     return image 
    } 

} 

Ich hoffe, das hilft!

Answer 2

Also hier ist was ich getan habe. Es ist eine Mischung aus einem 640x49 PNG, das die Farbe des blauen "hervorgehobenen" Hintergrunds hat, den ich brauche.

In AppDelegate.swift:

var selectedBG = UIImage(named:"tab-selected-full")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0)) 
UITabBar.appearance().selectionIndicatorImage = selectedBG 

Und dann in der ersten View-Controller, die ich geladen wird:

tabBarController?.tabBar.frame.size.width = self.view.frame.width+4 
tabBarController?.tabBar.frame.origin.x = -2 

Der Grund für die beiden oben genannten Linien ist, dass standardmäßig, Apple hat einen 2px-Rahmen zwischen den linken und rechten Seiten der Tab-Leiste und den Tab-Leiste-Elementen.

In den obigen ich einfach die Tab-Leiste 4px breiter, und dann Offset es so die Grenze auf der linken Seite fällt nur außerhalb der Ansicht, damit der Rand auf der rechten Seite auch außerhalb der Ansicht fallen.

Answer 3

Update SWIFT 3:

let numberOfItems = CGFloat((tabBarController?.tabBar.items!.count)!) 

let tabBarItemSize = CGSize(width: (tabBarController?.tabBar.frame.width)!/numberOfItems, 
          height: (tabBarController?.tabBar.frame.height)!) 

tabBarController?.tabBar.selectionIndicatorImage 
    = UIImage.imageWithColor(color: UIColor.black, 
          size: tabBarItemSize).resizableImage(withCapInsets: .zero) 

tabBarController?.tabBar.frame.size.width = self.view.frame.width + 4 
tabBarController?.tabBar.frame.origin.x = -2 

extension UIImage 
{ 
    class func imageWithColor(color: UIColor, size: CGSize) -> UIImage 
    { 
     let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height) 
     UIGraphicsBeginImageContextWithOptions(size, false, 0) 
     color.setFill() 
     UIRectFill(rect) 
     let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()! 
     UIGraphicsEndImageContext() 
     return image 
    } 
}