storyboard positionnement du texte ci-dessous de l'image à l'intérieur d'un bouton

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:
storyboard positionnement du texte ci-dessous de l'image à l'intérieur d'un bouton

pas clair ce que me demandez-vous 🙁
Veuillez poster une image si vous pouvez expliquer ce que vous voulez.
Cochez cette stackoverflow.com/questions/2451223/...

InformationsquelleAutor Ahalya | 2016-06-20

19

Oui, vous pouvez le faire à partir de storyboard sans l'écriture d'une logique aussi.

1) bouton de sélection et d'aller à Attribute Inspector dans votre storyboard.

2) Affecter une Image pour le bouton. (Ne pas utiliser le fond de l'Image)

3) Titre du texte de ce bouton.

4) Maintenant, vous devez définir edge et Inset donc d'abord sélectionner une image à partir d'un bord et de l'ensemble de l'Encart que vous avez besoin, puis sélectionnez le titre à partir d'un bord et de l'ensemble de l'encart selon votre besoin.

Espère que cette aide.
- J'ai compris. Mais je n'ai pas de flux de cette. parce que ce n'est pas de travaux à certains moments. le titre de très gros moyens alignement varier. Comment gérer ce problème?
- Donc, j'ai utilisé a créé une nouvelle sous-classe de UIView avec l'image et l'étiquette avec étiquette geste
InformationsquelleAutor Jigar Tarsariya
47

Si vous êtes à la recherche pour la sortie, comme cette

1) bouton de sélection et d'aller à Attribut 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
- Dans Xcode 8.2.1 avec Storyboard, je ne suis pas en mesure de trouver l'option pour TitleInsets.
- J'ai mis à jour ma réponse avec une nouvelle image, veuillez vérifier. Maintenant, il vous sera facile de trouvé le Titre Instests
InformationsquelleAutor Sourabh Sharma

J'ai écrit une extension qui fonctionne pour vous, Swift 4 compatible.

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.

Oui, c'est fait. Une petite correction cependant: laissez-image = self.imageView!.cadre.taille
titleEdgeInsets doit être défini sur ce: auto.titleEdgeInsets = UIEdgeInsetsMake (- image.hauteur + espacement, - - image.largeur, - (- image.hauteur), 0.0)
c'est une belle solution
Le problème avec cette solution est que si je change le texte de façon dynamique, l'image se déplace à gauche et à droite selon le texte. Comment faire pour conserver l'image stable, alors que la comptabilité pour un maximum de titre de la taille de la hauteur?

InformationsquelleAutor Luca Davanzo

8

Vous pouvez facilement et visuellement réaliser l'alignement à l'aide de la Edge propriété du Bouton de Fenêtre de Propriété(Attribut de l'Inspecteur) vous pouvez modifier la inset valeurs de Title, et Image selon votre besoin, voir l'image ci-dessous

Espère que cela aide.

Acclamations.

InformationsquelleAutor iphonic

Swift 4.2 du code compatible est ici , il vous suffit d'appeler cette fonction

  public extension UIButton
  {

    func alignTextUnderImage(spacing: CGFloat = 6.0)
    {
        if let image = self.imageView?.image
        {
            let imageSize: CGSize = image.size
            self.titleEdgeInsets = UIEdgeInsets(top: spacing, left: -imageSize.width, bottom: -(imageSize.height), right: 0.0)
            let labelString = NSString(string: self.titleLabel!.text!)
            let titleSize = labelString.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font])
            self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
        }
    }
}

InformationsquelleAutor Shahzaib Maqbool

un cadre raffiné, une

func alignTextUnderImage(spacing: CGFloat = 6.0) {
    guard let image = imageView?.image, let label = titleLabel,
      let string = label.text else { return }

      titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
      let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
      imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
  }

InformationsquelleAutor rbiard

0

Vous ne pouvez pas changer de mise en page directement dans UIButton, mais vous pouvez essayer d'utiliser ces propriétés sur UIButton:
```
UIButton *button = ...
button.titleEdgeInsets = UIEdgeInsetsMake(....);
button.imageEdgeInsets = UIEdgeInsetsMake(....);
```
Si il ne va pas aider je le recommande à la sous-classe de UIResponder et de faire votre propre composant et de faire votre propre mise en page que vous en avez besoin.

InformationsquelleAutor Konstantin

Merci @rbiard. Une autre solution de contournement lors du développement d'un multilingue application mobile et lors de l'utilisation de UISemanticContentAttribute (de droite à gauche et de gauche à droite). Cela devrait fonctionner:

func alignTextBelow(spacing: CGFloat = 10.0) {

    //when the selected language is English
    if L102Language.currentAppleLanguage() == "en" {
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: -image.size.width, bottom: -image.size.height, right: 0.0)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: 0.0, bottom: 0.0, right: -titleSize.width)
    } else {
        //When selecting a right to left language. For example, Arabic
        guard let image = imageView?.image, let label = titleLabel,
            let string = label.text else { return }

        titleEdgeInsets = UIEdgeInsets(top: spacing, left: 0, bottom: -image.size.height, right: -image.size.width)
        let titleSize = string.size(withAttributes: [NSAttributedString.Key.font: label.font])
        imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -titleSize.width, bottom: 0.0, right: 0)
    }
}

InformationsquelleAutor Maryoomi1

Vous devez vous connecter pour publier un commentaire.