iphone - guidelines - menu ios

UIButton 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 para un UIButton al lado izquierdo y colocar 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").

contentHorizontalAlignment 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

Recuerde que UIButton hereda de UIView, por lo que puede agregarle subvistas al igual que cualquier otra vista. En su situación, debería crear un botón, luego agregar un UILabel en el lado izquierdo y un 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 2

Aquí está el código que uso para eso:

//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 3

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 4

También puede anular los titleRectForContentRect: e imageRectForContentRect: del UIButton para colocar su texto e imagen en el lugar que desee.

Answer 5

Cambie la propiedad imageEdgeInsets en UIButton y luego simplemente use setImage:forState:

Answer 6

Cree una subclase UIButton y anule su método layoutSubviews para alinear su texto e imagen 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 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 su valor deseado.

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 cualquiera que se preocupe (con un espaciado de 10pt):

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 usar en iOS 9, intenté muchas respuestas en este hilo pero ninguna de ellas es adecuada para mí. Encontré la respuesta para mí 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 ayude a alguien en el caso como yo!