Texte de positionnement du storyboard sous l'image à l'intérieur d'un bouton

Question

Je suis en mesure de régler l'image et le texte du bouton. Mais il est aligné horizontalement. Je veux que l'image et le texte soit aligné verticalement à l'intérieur du bouton. c'est à dire, le texte en dessous de l'image

Comment faire ces changements à l'aide de storyboard?

Ce que je veux, c'est ceci:

Ce que je suis aujourd'hui, c'est:

Answer 1

Si vous êtes à la recherche pour la sortie comme ceci

1) Sélectionnez le bouton et aller à l' Attribut de l'Inspecteur dans votre storyboard pour obtenir ce résultat de la taille du Bouton 50*50

2) Maintenant, le Titre du jeu d'Encarts de Bouton

Answer 2

J'ai écrit une extension qui fait le travail pour vous, compatible Swift 4 .

 public extension UIButton {

    func alignTextBelow(spacing: CGFloat = 6.0) {
        if let image = self.imageView?.image {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsetsMake(spacing, -imageSize.width, -(imageSize.height), 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedStringKey.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0.0, 0.0, -titleSize.width)
        }
    }

}
 

Où spacing est la distance entre l'image et le texte.

Answer 3

Oui, vous pouvez le faire à partir du storyboard sans écrire aucune logique également.

1) Sélectionnez le bouton et accédez à Attribute Inspector dans votre storyboard.

2) Attribuer une image au bouton. (Ne pas utiliser l'image de fond)

3) Définissez le texte du titre sur ce bouton.

4) Maintenant, vous devez définir edge et Inset afin de sélectionner tout d'abord l'image du bord et de définir l'encart selon vos besoins, puis de sélectionner le titre du bord et de définir l'encadré selon vos besoins.

J'espère que cela t'aides.

Answer 4

Vous pouvez facilement et obtenir visuellement l'alignement en utilisant le Edge propriété du bouton de la propriété Fenêtre (Attribute Inspecteur) , vous pouvez changer le inset des valeurs de Title , et Image selon vos besoins, voir l'image ci-dessous

J'espère que ça aide.

À votre santé.

Answer 5

Vous ne pouvez pas modifier la disposition directement dans UIButton, mais vous pouvez essayer d'utiliser ces propriétés sur UIButton:

 UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);
 

Si cela ne vous aide pas, je vous recommande de sous-classer UIResponder, de créer votre propre composant et de faire votre propre mise en page selon vos besoins.