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!