iOS: UIButton est redimensionné en fonction de la longueur du texte

Dans le générateur d'interface, maintenir Command+ =redimensionnera un bouton pour l'adapter à son texte. Je me demandais si cela était possible de le faire par programme avant que le bouton ne soit ajouté à la vue.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button.titleLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:12]];
[button addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
// I need to know the width needed to accomodate NSStringVariable
[button setTitle:NSStringVariable forState:UIControlStateNormal]; 
// So that I can set the width property of the button before addSubview
[button setFrame:CGRectMake(10, 0, width, fixedHeight)];
[subNavigation addSubview:button];

Dans Xcode 4.5 et supérieur, cela peut maintenant être fait en utilisant ' Auto-layouting / Constraints '.

Les principaux avantages sont les suivants:

1. Vous n'avez pas du tout besoin de définir des cadres par programmation!
2. Si c'est bien fait, vous n'avez pas à vous soucier de réinitialiser les cadres pour les changements d'orientation.
3. De plus, les changements d'appareil ne doivent pas vous déranger (lire, pas besoin de coder séparément pour différentes tailles d'écran).

Quelques inconvénients:

1. Non rétrocompatible - fonctionne uniquement pour iOS 6 et supérieur.
2. Besoin de se familiariser (mais gagnera du temps plus tard).

La chose la plus cool est que nous nous concentrons sur la déclaration d'une intention telle que:

• Je veux que ces deux boutons aient la même largeur; ou
• J'ai besoin que cette vue soit centrée verticalement et s'étende jusqu'à un maximum de 10 pts du bord du superview; ou même,
• Je veux que ce bouton / étiquette soit redimensionné en fonction de l'étiquette qu'il affiche!

Voici un tutoriel simple pour vous familiariser avec la mise en page automatique.

Pour plus de détails .

Cela prend du temps au début, mais il semble que cela en vaudra la peine.

Dans UIKit, il existe des ajouts à la classe NSString pour obtenir à partir d'un objet NSString donné la taille qu'il prendra lors du rendu dans une certaine police.

Docs était là . Maintenant, c'est ici sous Obsolète.

Bref, si vous y allez:

CGSize stringsize = [myString sizeWithFont:[UIFont systemFontOfSize:14]]; 
//or whatever font you're using
[button setFrame:CGRectMake(10,0,stringsize.width, stringsize.height)];

... vous aurez défini le cadre du bouton sur la hauteur et la largeur de la chaîne que vous rendez.

Vous voudrez probablement expérimenter avec un espace tampon autour de cette CGSize, mais vous commencerez au bon endroit.

La façon de faire cela dans le code est:

[button sizeToFit];

Si vous effectuez un sous-classement et souhaitez ajouter des règles supplémentaires, vous pouvez remplacer:

- (CGSize)sizeThatFits:(CGSize)size;

Si votre bouton a été créé avec Interface Builder et que vous modifiez le titre dans le code, vous pouvez le faire:

[self.button setTitle:@"Button Title" forState:UIControlStateNormal];
[self.button sizeToFit];

Rapide:

La chose importante ici est de savoir quand appellerez-vous le .sizeToFit(), cela devrait être après avoir défini le texte à afficher pour qu'il puisse lire la taille nécessaire, si vous mettez à jour le texte plus tard, appelez-le à nouveau.

var button = UIButton()
button.setTitle("Length of this text determines size", forState: UIControlState.Normal)
button.sizeToFit()
self.view.addSubview(button)

Pour ce faire à l'aide de la disposition automatique, essayez de définir une contrainte de largeur variable:

Vous devrez peut-être également ajuster votre Content Hugging Priorityet Content Compression Resistance Prioritypour obtenir les résultats dont vous avez besoin.

UILabel est auto-dimensionnant complètement :

Cet UILabel est simplement paramétré pour être centré sur l'écran (deux contraintes uniquement, horizontale / verticale):

Il change de largeur de manière totalement automatique:

Vous n'avez pas besoin de définir de largeur ou de hauteur - c'est totalement automatique.

Notez que les petits carrés jaunes sont simplement attachés ("espacement" de zéro). Ils se déplacent automatiquement lorsque le UILabel se redimensionne.

L'ajout d'une contrainte "> =" définit une largeur minimale pour le UILabel:

Si vous souhaitez redimensionner le texte par opposition au bouton, vous pouvez utiliser ...

button.titleLabel.adjustsFontSizeToFitWidth = YES;
button.titleLabel.minimumScaleFactor = .5;
// The .5 value means that I will let it go down to half the original font size 
// before the texts gets truncated

// note, if using anything pre ios6, you would use I think
button.titleLabel.minimumFontSize = 8;

sizeToFit ne fonctionne pas correctement. au lieu:

myButton.size = myButton.sizeThatFits(CGSize.zero)

vous pouvez également ajouter contentInsetau bouton:

myButton.contentEdgeInsets = UIEdgeInsetsMake(8, 8, 4, 8)

Simplement:

1. Créer UIViewcomme wrapper avec une disposition automatique pour les vues autour.
2. Mettez UILabeldans cet emballage. Ajoutez des contraintes qui colleront votre étiquette aux bords de l'emballage.
3. Mettez à l' UIButtonintérieur de votre wrapper, puis ajoutez simplement les mêmes contraintes que celles pour lesquelles vous l'avez fait UILabel.
4. Profitez de votre bouton autosized avec du texte.

Swift 4.2

Dieu merci, cela est résolu. Après avoir défini un texte sur le bouton, vous pouvez récupérer intrinsicContentSize qui est la taille naturelle d'un UIView (le document officiel est ici ). Pour UIButton, vous pouvez l'utiliser comme ci-dessous.

button.intrinsicContentSize.width

Pour votre information, j'ai ajusté la largeur pour qu'elle soit correcte.

button.frame = CGRect(fx: xOffset, y: 0.0, width: button.intrinsicContentSize.width + 18, height: 40)

Simulateur

UIButtons avec intrinsicContentSize

Source: https://riptutorial.com/ios/example/16418/get-uibutton-s-size-strictly-based-on-its-text-and-font

J'ai quelques besoins supplémentaires liés à ce poste qui sizeToFitne résout pas. J'avais besoin de garder le bouton centré dans son emplacement d'origine, quel que soit le texte. Je ne veux pas non plus que le bouton soit plus grand que sa taille d'origine.

Donc, je dispose le bouton pour sa taille maximale, enregistre cette taille dans le contrôleur et utilise la méthode suivante pour dimensionner le bouton lorsque le texte change:

+ (void) sizeButtonToText:(UIButton *)button availableSize:(CGSize)availableSize padding:(UIEdgeInsets)padding {    

     CGRect boundsForText = button.frame;

    // Measures string
    CGSize stringSize = [button.titleLabel.text sizeWithFont:button.titleLabel.font];
    stringSize.width = MIN(stringSize.width + padding.left + padding.right, availableSize.width);

    // Center's location of button
    boundsForText.origin.x += (boundsForText.size.width - stringSize.width) / 2;
    boundsForText.size.width = stringSize.width;
    [button setFrame:boundsForText];
 }

Cette classe de bouton avec redimensionnement automatique de la hauteur pour le texte (pour Xamarin mais peut être réécrite pour une autre langue)

[Register(nameof(ResizableButton))]
public class ResizableButton : UIButton
{
    NSLayoutConstraint _heightConstraint;
    public bool NeedsUpdateHeightConstraint { get; private set; } = true;

    public ResizableButton(){}

    public ResizableButton(UIButtonType type) : base(type){}

    public ResizableButton(NSCoder coder) : base(coder){}

    public ResizableButton(CGRect frame) : base(frame){}

    protected ResizableButton(NSObjectFlag t) : base(t){}

    protected internal ResizableButton(IntPtr handle) : base(handle){}

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        UpdateHeightConstraint();
        InvalidateIntrinsicContentSize();
    }

    public override void SetTitle(string title, UIControlState forState)
    {
        NeedsUpdateHeightConstraint = true;
        base.SetTitle(title, forState);
    }

    private void UpdateHeightConstraint()
    {
        if (!NeedsUpdateHeightConstraint)
            return;
        NeedsUpdateHeightConstraint = false;
        var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));

        var rect = new CGRect(Frame.X, Frame.Y, Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);

        if (_heightConstraint != null)
            RemoveConstraint(_heightConstraint);

        _heightConstraint = NSLayoutConstraint.Create(this, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, rect.Height);
        AddConstraint(_heightConstraint);
    }

     public override CGSize IntrinsicContentSize
     {
         get
         {
             var labelSize = TitleLabel.SizeThatFits(new CGSize(Frame.Width - TitleEdgeInsets.Left - TitleEdgeInsets.Right, float.MaxValue));
             return new CGSize(Frame.Width, labelSize.Height + TitleEdgeInsets.Top + TitleEdgeInsets.Bottom);
         }
     }
}

Pour une raison quelconque, func sizeToFit()ne fonctionne pas pour moi. Ma configuration est que j'utilise un bouton dans un UITableViewCellet que j'utilise la mise en page automatique.

Ce qui a fonctionné pour moi, c'est:

1. obtenir la contrainte de largeur
2. obtenir la intrinsicContentSizelargeur, car selon la mise en page automatique de ce document, il n'est pas conscient de la intrinsicContentSize. Définissez la contrainte de largeur sur la intrinsicContentSizelargeur

Voici deux titres du Debug View Hierachry

Pour être honnête, je pense que c'est vraiment dommage qu'il n'y ait pas de simple case à cocher dans le storyboard pour dire que vous voulez redimensionner les boutons pour accueillir le texte. Bien, peu importe.

Voici la solution la plus simple utilisant le storyboard.

1. Placez UIView et mettez-lui des contraintes. Exemple:

2. Placez UILabel dans UIView. Définissez des contraintes pour l'attacher aux bords de UIView.

3. Placez votre UIButton dans UIView. Définissez les mêmes contraintes pour l'attacher aux bords de UIView.

4. Définissez 0 pour le nombre de lignes d'UILabel.

5. Installez les points de vente.

    @IBOutlet var button: UIButton!
    @IBOutlet var textOnTheButton: UILabel!

6. Obtenez un titre long, long, long.

    let someTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

7. Sur viewDidLoad, définissez le titre pour UILabel et UIButton.

    override func viewDidLoad() {
        super.viewDidLoad()
        textOnTheButton.text = someTitle
        button.setTitle(someTitle, for: .normal)
        button.titleLabel?.numberOfLines = 0
    }

8. Exécutez-le pour vous assurer que ce bouton est redimensionné et peut être enfoncé.