ios - Establecer el color de fondo del elemento de la barra de pestañas activa en Swift

ios tabs

Question

Espero lograr esto sin el uso de imágenes, si es posible. ¿Hay una manera de crear el efecto que se muestra en la imagen mediante programación sin tener que representar cada pestaña como una imagen?

Cada pregunta que he revisado en SO tiene las pestañas guardadas como JPG, que es más trabajo de lo que creo que debería ser.

¿Algunas ideas?

Answer 1

Actualización a 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
    }
}

Answer 2

Así que esto es lo que terminé haciendo. Es una combinación de usar un PNG de 640x49 que es el color del fondo azul "resaltado" que necesito.

En AppDelegate.swift:

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

Y luego, en el primer controlador de vista que se carga, tengo:

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

El motivo de las dos líneas anteriores es que, de forma predeterminada, Apple tiene un borde de 2 píxeles entre los lados izquierdo y derecho de la barra de pestañas y los elementos de la barra de pestañas.

En lo anterior, simplemente hago la barra de pestañas 4px más ancha, y luego la desplacé para que el borde de la izquierda quede justo fuera de la vista, por lo que el borde de la derecha también quedará fuera de la vista.

Answer 3

Tomé un enfoque similar a @matcartmill pero sin la necesidad de una imagen especial. Esta solución solo se basa en su color.

// 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(color: UIColor.red, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)

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

Estoy haciendo uso de la siguiente extensión de 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
    }

}

¡Espero que esto ayude!

para swift 4

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