O que é alinhamento?

O alinhamento no desenvolvimento iOS refere-se aos mecanismos de disposição dos elementos da interface de utilizador (UIViews) relativamente uns aos outros ou ao seu contêiner (superview). As principais abordagens são:

1. Frames: Atribuição de posição e tamanho (x, y, width, height) de cada vista no sistema de coordenadas da sua superview. Adequado para layouts simples e fixos.

2. Auto Layout: Sistema declarativo de disposição baseado num conjunto de regras (constraints) que definem relações entre as Views. É uma abordagem flexível para layouts responsivos, que se ajustam a diferentes tamanhos de ecrã e orientações.

   • Constraints: Regras que impõem limites às propriedades de uma View (por exemplo, leading, trailing, top, bottom, centerY, centerX, width, height).
   • Prioridade da constraint: Valor numérico que indica a importância de uma constraint ao resolver conflitos (1-1000).

   Exemplo com NSLayoutConstraint:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   NSLayoutConstraint.activate([
       myView.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 20),
       myView.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: -20),
       myView.topAnchor.constraint(equalTo: superview.topAnchor, constant: 80),
       myView.heightAnchor.constraint(equalToConstant: 100)
   ])
   

   Exemplo com Layout Anchors:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   NSLayoutConstraint.activate([
       myView.centerXAnchor.constraint(equalTo: superview.centerXAnchor),
       myView.centerYAnchor.constraint(equalTo: superview.centerYAnchor),
       myView.widthAnchor.constraint(equalToConstant: 200),
       myView.heightAnchor.constraint(equalToConstant: 150)
   ])
   

   Exemplo com VFL (Visual Format Language):

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   let views: [String: UIView] = ["myView": myView]
   let metrics: [String: CGFloat] = ["margin": 20]
   
   NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "H:|-margin-[myView]-margin-|",
                                                              options: [],
                                                              metrics: metrics,
                                                              views: views))
   NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|-80-[myView(100)]",
                                                              options: [],
                                                              metrics: nil,
                                                              views: views))
   

3. Máscara de redimensionamento automático: Sistema simples de alinhamento que precedeu o Auto Layout. Permite definir como uma View deve esticar ou encolher ao alterar o tamanho da sua superview. Menos flexível que o Auto Layout e frequentemente desativado ao usar Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView no UIKit, VStack/HStack/ZStack no SwiftUI): Contêineres que gerenciam automaticamente a disposição e o tamanho das suas subviews (arrangedSubviews) com base em propriedades como axis, alignment, distribution, spacing. Facilitam a criação de layouts lineares e complexos com alinhamento automático.

   let stackView = UIStackView()
   stackView.axis = .vertical
   stackView.alignment = .center
   stackView.distribution = .equalSpacing
   stackView.spacing = 10
   
   let label = UILabel()
   label.text = "Hello"
   let button = UIButton(type: .system)
   button.setTitle("Tap Me", for: .normal)
   
   stackView.addArrangedSubview(label)
   stackView.addArrangedSubview(button)
   
   superview.addSubview(stackView)
   // Adicionar constraints para posicionar o stackView na superview
   

A escolha do método de alinhamento depende da complexidade do layout e dos requisitos de adaptabilidade. Na maioria das aplicações modernas, o Auto Layout, frequentemente combinado com Stack Views, é preferido.