El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Auto Layout i Constriccions

Següent ►
►

Introducció a Auto Layout

Auto Layout és una eina poderosa dins de Xcode que permet crear interfícies d'usuari que s'adapten a diferents mides de pantalla i orientacions. Utilitza constriccions per definir com els elements de la interfície es relacionen entre ells i amb el seu contenidor.

Conceptes Clau d'Auto Layout

  • Constriccions (Constraints): Regles que defineixen com es posicionen i dimensionen els elements de la interfície.
  • Prioritats: Cada constricció té una prioritat que determina la seva importància relativa.
  • Ambigüitat: Quan no hi ha prou constriccions per definir completament la posició i mida d'un element.
  • Conflictes: Quan dues o més constriccions es contradiuen.

Creant Constriccions Bàsiques

Pas 1: Afegir Elements a la Vista

  1. Obre el teu projecte Xcode i selecciona el fitxer Main.storyboard.
  2. Arrossega un UILabel i un UIButton des de la biblioteca d'objectes fins a la vista principal.

Pas 2: Afegir Constriccions

  1. Selecciona el UILabel i fes clic al botó "Add New Constraints" a la part inferior dreta de l'editor de Storyboard.
  2. Afegeix constriccions per definir la seva posició respecte a les vores de la vista principal (per exemple, 20 píxels des de la part superior i 20 píxels des de l'esquerra).
  3. Selecciona el UIButton i afegeix constriccions per posicionar-lo sota el UILabel amb un espai de 20 píxels i centrat horitzontalment.
// Exemple de codi per configurar constriccions programàticament
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

NSLayoutConstraint.activate([
    label.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
    label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20)
])

let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)

NSLayoutConstraint.activate([
    button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 20),
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

Pas 3: Ajustar Prioritats

  1. Selecciona una constricció i obre l'inspector d'atributs.
  2. Ajusta la prioritat de la constricció segons sigui necessari (per defecte és 1000, la màxima prioritat).

Utilitzant Auto Layout amb Stack Views

Les UIStackView són una eina útil per gestionar automàticament la disposició d'un conjunt de vistes fills.

Pas 1: Crear una Stack View

  1. Selecciona els elements que vols incloure en la UIStackView.
  2. Fes clic amb el botó dret i selecciona "Embed in Stack View".

Pas 2: Configurar la Stack View

  1. Selecciona la UIStackView i ajusta les seves propietats a l'inspector d'atributs (e.g., axis, spacing, alignment, distribution).
// Exemple de codi per configurar una UIStackView programàticament
let stackView = UIStackView(arrangedSubviews: [label, button])
stackView.axis = .vertical
stackView.spacing = 20
stackView.alignment = .center
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)

NSLayoutConstraint.activate([
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

Exercicis Pràctics

Exercici 1: Crear una Interfície Simple

  1. Crea un nou projecte Xcode.
  2. Afegeix un UILabel i un UIButton a la vista principal.
  3. Utilitza Auto Layout per posicionar el UILabel a la part superior esquerra de la vista i el UIButton sota el UILabel, centrat horitzontalment.

Exercici 2: Utilitzar Stack Views

  1. Afegeix tres UILabels a la vista principal.
  2. Utilitza una UIStackView per disposar els UILabels verticalment amb un espai de 10 píxels entre ells.
  3. Centra la UIStackView a la vista principal.

Solucions

Solució a l'Exercici 1

let label = UILabel()
label.text = "Hello, World!"
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)

NSLayoutConstraint.activate([
    label.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
    label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20)
])

let button = UIButton(type: .system)
button.setTitle("Press Me", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(button)

NSLayoutConstraint.activate([
    button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 20),
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor)
])

Solució a l'Exercici 2

let label1 = UILabel()
label1.text = "Label 1"
let label2 = UILabel()
label2.text = "Label 2"
let label3 = UILabel()
label3.text = "Label 3"

let stackView = UIStackView(arrangedSubviews: [label1, label2, label3])
stackView.axis = .vertical
stackView.spacing = 10
stackView.alignment = .center
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)

NSLayoutConstraint.activate([
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

Conclusió

Dominar Auto Layout és essencial per crear aplicacions iOS que s'adaptin a diferents dispositius i orientacions. Amb la pràctica, podràs utilitzar constriccions i UIStackView per dissenyar interfícies d'usuari flexibles i responsives. En el següent tema, explorarem com utilitzar les previsualitzacions de Xcode per veure com es veuran les teves interfícies en diferents dispositius i configuracions.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats