es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo agregar correctamente un borde de área segura a UIStackView?

Entonces tengo una vista de pila simple con dos textos en su interior y he agregado restricciones de área segura.

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white

<pre><code>let label = UILabel()
label.text = "¡Hola, mundo!"
label.sizeToFit()
label.translatesAutoresizingMaskIntoConstraints = false

let label2 = UILabel()
label2.text = "¡Hola, mundo!"
label2.sizeToFit()
label2.translatesAutoresizingMaskIntoConstraints = false

let stackView = UIStackView()
stackView.axis = .vertical
stackView.addArrangedSubview(label)
stackView.addArrangedSubview(label2)
stackView.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(stackView)

NSLayoutConstraint.activate([
  stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
  stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])
</code></pre>

<p>}
}

Pero hay una gran cantidad de espacio entre los dos textos. ¿Cómo puedo eliminar ese espacio? Esto solo ocurre cuando agrego esta línea stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).

imagen de descripción

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para eliminar el espacio entre las dos etiquetas, puedes agregar una propiedad spacing a tu UIStackView y establecerla en 0, de la siguiente manera:

    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.spacing = 0 // agregar esta línea
    stackView.addArrangedSubview(label)
    stackView.addArrangedSubview(label2)
    stackView.translatesAutoresizingMaskIntoConstraints = false
    

    También debes agregar restricciones para posicionar el stackView dentro del área segura, de esta manera:

    NSLayoutConstraint.activate([
      stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
      stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
      stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])
    

    Eliminar la restricción stackView.bottomAnchor puede hacer que tu stack view se posicione incorrectamente dentro del área segura.

Comments are closed.