UIBulton título y consulta de alineación de imagen

Question

Tengo un UIButton y estoy tratando de establecer un título y una imagen en él.

Me gustaría alinear el título de un UIButton a la izquierda y coloque una imagen alineada a la derecha. Estoy tratando de obtener la apariencia del botón en la aplicación Timer en Clocks (la que dice "When Timer Ends").

Jugueteé con contentHorizontalAlignment, contentEdgeInsets, titleEdgeInsets y imageEdgeInsets para lograr mi objetivo, pero fue en vano. La documentación también es bastante escasa para el mismo.

¿Cómo puedo lograr lo mismo?

¿También preguntas relacionadas, la aplicación Timer in Clocks tiene dos conjuntos de texto, uno alineado a la izquierda y otro alineado a la derecha con la imagen? ¿Cómo se puede hacer eso en un UIButton? (No necesito esa funcionalidad aunque por el momento).

Answer 1

Cambie la propiedad imageEdgeInsets en el UIButton y luego sólo tiene que utilizar setImage:forState:

Answer 2

Recuerde que UIButton hereda de UIView, por lo que puede agregarle subvistas al igual que cualquier otra vista. En su situación, debe crear un botón, a continuación, añadir un UILabel en el lado izquierdo y una UIImage a la derecha:

// 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];

Answer 3

Aquí es el código que utilizo para que:

//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)]; 

Answer 4

Crear una subclase UIButton y anular su método layoutSubviews para alinear la imagen de texto & mediante programación. O use algo como https://github.com/stevestreza/BlockKit/blob/master/Source/UIView-BKAdditions.h para que pueda implementar layoutSubviews usando un bloque.

Answer 5

El siguiente código funciona:

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; 

Answer 6

También puede anular los titleRectForContentRect: y imageRectForContentRect: métodos de la UIButton en posición para su texto e imagen en cualquier lugar que quieran.

Answer 7

Aquí hay una subclase de UIButton en Swift que alinea la imagen a la izquierda y el texto en el centro. Establezca imageLeftInset en el valor que desee.

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) 
    } 
} 
} 

Answer 8

En Swift para cualquier persona que se preocupa (con una separación de 10 puntos):

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) 

Answer 9

Para poder utilizar en IOS 9, he intentado muchas respuestas en este hilo, pero ninguno de ellos adecuado para mí. He encontrado respuesta para mí mismo de la siguiente manera:

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) 

     } 
    } 
} 

espero que ayudar a alguien en el caso que yo!