ios - studio - Botón con imagen y texto alineados verticalmente usando restricciones de autodiseño

imagebutton android studio ejemplo

Question

Soy muy nuevo en el desarrollo de IOS y AutoLayout. Estoy enfrentando problemas para alinear la Imagen y el Texto dentro del botón UI usando Storyboard. Intenté lograrlo con las inserciones TitleEdgeinset e ImageEdge en consecuencia para colocar el Título (texto) centrado verticalmente debajo de la Imagen. Pero el problema es que tengo 3 botones similares que están apilados verticalmente (StackView) y el texto se establece dinámicamente ya que tenemos cadenas localizadas (incluye rtl árabe). La imagen y el texto se mueven según la longitud del texto. ¿Hay alguna manera en que pueda lograr que todos los botones con la imagen y el texto estén alineados verticalmente? Además, las diferentes resoluciones de pantalla no están funcionando actualmente si se utilizan las opciones de los bordes. Aprecio tu ayuda . Gracias por adelantado.

Answer 1

Hace unos días, resolví un problema similar, prueba esto

 private func adjustImageAndTitleOffsetsForButton (button: UIButton) {

    let spacing: CGFloat = 6.0

    let imageSize = button.imageView!.frame.size

    button.titleEdgeInsets = UIEdgeInsetsMake(0, -imageSize.width, -(imageSize.height + spacing), 0)

    let titleSize = button.titleLabel!.frame.size

    button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height + spacing), 0, 0, -titleSize.width)
}

llama a este método para cada botón, como

self.adjustImageAndTitleOffsetsForButton(yourButton)

Answer 2

Para alinear todos los botones verticalmente, primero seleccione los botones, luego haga clic en el botón en la parte inferior derecha del guión gráfico titulado "Alinear", y finalmente seleccione "Centros verticales" en el menú que aparece. Eso debería hacer el truco.

Answer 3

este es fácil, así que le pido disculpas si ya lo ha intentado.

no necesita configurar nada para las inserciones, solo asegúrese de que los 3 botones estén alineados con los centros horizontales ...

seleccione los controles que desea alinear y haga clic en el botón resaltado a continuación (abajo a la derecha en la pantalla xCode) y seleccione la opción Centros verticales para alinear los tres entre sí, o seleccione Horizontalmente en contenedor para ponerlos en el centro de su ver.

Answer 4

Modifiqué la respuesta de Ajay porque mis imágenes no estaban centradas:

func centerButtonImageAndTitle(button: UIButton) {
  let spacing: CGFloat = 5
  let titleSize = button.titleLabel!.frame.size
  let imageSize = button.imageView!.frame.size

  button.titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageSize.width, bottom: -(imageSize.height + spacing), right: 0)
  button.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + spacing), left: -imageSize.width/2, bottom: 0, right: -titleSize.width)
}