IOS – Toolbar avec des icônes et textes

by Julien Gustin

February 10, 2019

1,001

Swift

Rajouter une toolbar dans le storyboard ne pose pas vraiment de problème. Par contre, si vous voulez combiner icônes + texte en dessous, quelques problème surviennent. Premièrement, vous ne pouvez pas directement rajouter un bouton + un label directement dans un Bar Button Item. Vous serez tentez de passer par une vue intermédiaire qui regroupera les deux, visuellement, ça marche, mais alors impossible de récupérer l’action tap sur votre vue ou sur votre bouton.

La solution est de passer par un bouton custom qui place votre texte en dessous :

import UIKit

class UICenteredButton: UIButton
{
    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
        let rect = super.titleRect(forContentRect: contentRect)
        
        return CGRect(x: 0, y: contentRect.height - rect.height + 5,
                      width: contentRect.width, height: rect.height)
    }
    
    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        let rect = super.imageRect(forContentRect: contentRect)
        let titleRect = self.titleRect(forContentRect: contentRect)
        
        return CGRect(x: contentRect.width/2.0 - rect.width/2.0,
                      y: (contentRect.height - titleRect.height)/2.0 - rect.height/2.0,
                      width: rect.width, height: rect.height)
    }
    
    override var intrinsicContentSize: CGSize {
        let size = super.intrinsicContentSize
        
        if let image = imageView?.image {
            var labelHeight: CGFloat = 0.0
            
            if let size = titleLabel?.sizeThatFits(CGSize(width: self.contentRect(forBounds: self.bounds).width, height: CGFloat.greatestFiniteMagnitude)) {
                labelHeight = size.height
            }
            
            return CGSize(width: size.width, height: image.size.height + labelHeight + 5)
        }
        
        return size
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        centerTitleLabel()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        centerTitleLabel()
    }
    
    private func centerTitleLabel() {
        self.titleLabel?.textAlignment = .center
    }
}

Dans votre toolbar, chaque bouton devra donc étendre de cette classe

Vous avez donc un bouton où vous pouvez définir un texte et une image comme sur un bouton normal :

Visuellement, dans le storyboard, le résultat affiché reste inchangé par rapport à un UIButton. Une fois dans le simulateur, ça s’affichera correctement.

Enfin, vous pouvez lier une action dans votre controller.

IOS – Toolbar avec des icônes et textes