web-dev-qa-db-fra.com

Titre UIButton et requête d'alignement d'image

J'ai un UIButton et j'essaye de mettre un titre et une image dessus.

Je voudrais aligner le titre d'un UIButton sur le côté gauche et placer une image alignée sur la droite. J'essaie d'obtenir l'apparence et la convivialité du bouton dans l'application Timer in Clocks (celle qui dit "Quand la minuterie se termine").

J'ai joué avec contentHorizontalAlignment, contentEdgeInsets, titleEdgeInsets et imageEdgeInsets pour atteindre mon objectif, mais en vain. La documentation est également assez rare pour la même chose.

Comment puis-je réaliser la même chose?

Également des questions connexes, l'application Timer in Clocks a deux ensembles de texte, l'un aligné à gauche et l'autre aligné à droite avec l'image? Comment cela peut-il être fait dans un UIButton? (Je n'ai pas besoin de cette fonctionnalité pour le moment).

iphonecocoa-touchuibutton
28
siasl

Modifiez la propriété imageEdgeInsets sur le UIButton, puis utilisez simplement setImage:forState:

35
Bill

Voici le code que j'utilise pour cela:

//Right-align the button image
CGSize size = [[myButton titleForState:UIControlStateNormal] sizeWithFont:myButton.titleLabel.font];
[myButton setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -size.width)];
[myButton setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, myButton.imageView.image.size.width + 5)];
49
ingham

Le code suivant fonctionne:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = buttonRect;
[button setTitle:@"A title" forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0.0, WIDTH(button.titleLabel) + 10.0, 0.0, 0.0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
14
yaris

N'oubliez pas que UIButton hérite de UIView, et vous pouvez donc y ajouter des sous-vues comme n'importe quelle autre vue. Dans votre situation, vous devez créer un bouton, puis ajouter un UILabel sur le côté gauche et un UIImage sur la droite:

// Create the button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];

// Now load the image and create the image view
UIImage *image = [UIImage imageNamed:@"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(/*frame*/)];
[imageView setImage:image];

// Create the label and set its text
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(/*frame*/)];
[label setText:@"Your title"];

// Put it all together
[button addSubview:label];
[button addSubview:imageView];
9
Tim

Pour une utilisation sur iOS 9, j'ai essayé de nombreuses réponses dans ce fil, mais aucune ne me convenait. J'ai trouvé la réponse pour moi comme suit:

class MyButton: UIButton {

  override func layoutSubviews() {
    super.layoutSubviews()

    self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left

    if self.imageView?.image != nil {
      // Move icon to right side
      self.imageEdgeInsets = UIEdgeInsets(
        top: 0,
        left: self.bounds.size.width - self.imageView!.image!.size.width,
        bottom: 0,
        right: 0)

      // Move title to left side
      self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)

    }
  }
}

Swift 3:

class MyButton: UIButton {

    override func layoutSubviews() {
        super.layoutSubviews()

        self.contentHorizontalAlignment = UIControlContentHorizontalAlignment.left

        if self.imageView?.image != nil {
            // Move icon to right side
            self.imageEdgeInsets = UIEdgeInsets(
                top: 0,
                left: self.bounds.size.width - self.imageView!.image!.size.width,
                bottom: 0,
                right: 0)

            // Move title to left side
            self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView!.frame.size.width + 8, 0, 0)

        }
    }
}

J'espère que cela aidera quelqu'un dans le cas comme moi!

4
Quang Tran

Vous pouvez également remplacer le titleRectForContentRect: et imageRectForContentRect: méthodes du UIButton pour positionner votre texte et votre image où vous le souhaitez.

4
ohnit

Dans Swift pour tous ceux qui se soucient (avec un espacement de 10 pt):

let size = (self.titleForState(UIControlState.Normal)! as NSString).sizeWithAttributes([NSFontAttributeName:self.titleLabel!.font])
let offset = (size.width + 10)
self.imageEdgeInsets = UIEdgeInsetsMake(0, offset, 0, -offset)
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, self.imageView!.frame.size.width + 10)
4
Brenden

Voici une sous-classe de UIButton in Swift qui aligne l'image à gauche et le texte au centre. Réglez imageLeftInset à la valeur souhaitée.

class LeftImageAlignedButton : UIButton {

var imageLeftInset : CGFloat = 10.0

override func layoutSubviews() {
    super.layoutSubviews()
    self.contentHorizontalAlignment = .Left
    if let font = titleLabel?.font {
        let textWidth = ((titleForState(state) ?? "") as NSString).sizeWithAttributes([NSFontAttributeName:font]).width
        let imageWidth = imageForState(state)?.size.width ?? 0.0
        imageEdgeInsets = UIEdgeInsets(top: 0, left: imageLeftInset, bottom: 0, right: 0)
        titleEdgeInsets = UIEdgeInsets(top: 0, left: bounds.width/2 - textWidth/2.0 - imageWidth, bottom: 0, right: 0)
    }
}
}
1
Mike Pollard