web-dev-qa-db-fra.com

Définissez la couleur d'arrière-plan de l'élément de barre d'onglets actif dans Swift

J'espère accomplir cela sans utiliser d'images, si possible. Existe-t-il un moyen de créer l'effet affiché dans l'image par programmation sans avoir à rendre chaque onglet sous forme d'image?

Chaque question que j'ai examinée sur SO a les onglets enregistrés en JPG, ce qui est plus de travail que je pense qu'il devrait l'être.

Des idées?Tab Bar

iosswiftuitabbar
21
matcartmill

J'ai adopté une approche similaire à @matcartmill mais sans avoir besoin d'une image spéciale. Cette solution est basée uniquement sur votre couleur.

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

J'utilise l'extension suivante 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
    }

}

J'espère que ça aide!

pour 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
   }
}
57
schickling

Mettre à jour vers 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
    }
}
10
Kevin Sabbe

Voici donc ce que j'ai fini par faire. C'est un mélange d'utilisation d'un PNG 640x49 qui est la couleur du fond bleu "surligné" dont j'ai besoin.

Dans AppDelegate.Swift:

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

Et puis dans le premier View Controller qui se charge, j'ai:

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

La raison des deux lignes ci-dessus est que, par défaut, Apple a une bordure de 2 pixels entre les côtés gauche et droit de la barre d'onglets et les éléments de la barre d'onglets.

Dans ce qui précède, je fais simplement élargir la barre de tabulation 4px, puis je la décale pour que la bordure de gauche tombe juste à l'extérieur de la vue, ainsi la bordure de droite tombera également en dehors de la vue.

3
matcartmill