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

Dissenyant amb Storyboards

Següent ►
►

En aquest tema, aprendrem a utilitzar els Storyboards a Xcode per dissenyar les interfícies d'usuari de les nostres aplicacions. Els Storyboards són una eina visual que ens permet crear i organitzar les vistes i les transicions entre elles de manera intuïtiva.

Objectius del Tema

  • Entendre què són els Storyboards i com s'utilitzen.
  • Aprendre a afegir i configurar vistes i controls.
  • Crear transicions (segues) entre vistes.
  • Utilitzar les escenes i els identificadors de Storyboard.

Què és un Storyboard?

Un Storyboard és un fitxer que conté una representació visual de les vistes i les transicions de la teva aplicació. Permet dissenyar la interfície d'usuari de manera gràfica i veure com les diferents vistes es connecten entre elles.

Afegint i Configurant Vistes i Controls

Passos per Afegir una Vista

  1. Obrir el Storyboard: A Xcode, obre el fitxer Main.storyboard.
  2. Afegir una Vista: Arrossega una View Controller des de la biblioteca d'objectes fins a l'àrea de treball del Storyboard.
  3. Configurar la Vista: Selecciona la vista i utilitza l'inspector d'atributs per configurar les seves propietats, com ara el títol, el color de fons, etc.

Afegint Controls a la Vista

  1. Arrossegar Controls: Arrossega controls com botons, etiquetes, camps de text, etc., des de la biblioteca d'objectes fins a la vista.
  2. Configurar Controls: Selecciona cada control i utilitza l'inspector d'atributs per configurar les seves propietats, com ara el text, el color, les fonts, etc.

Exemple Pràctic

// No és necessari codi Swift per afegir vistes i controls, però aquí tens un exemple de com podries configurar un botó programàticament si fos necessari.

@IBOutlet weak var myButton: UIButton!

override func viewDidLoad() {
    super.viewDidLoad()
    myButton.setTitle("Prem-me", for: .normal)
    myButton.backgroundColor = UIColor.blue
}

Creant Transicions (Segues) entre Vistes

Tipus de Segues

  • Show (Push): Mostra una nova vista empentant-la a la pila de navegació.
  • Modal: Presenta una nova vista de manera modal.
  • Popover: Mostra una vista en un popover (només per a iPad).

Creant una Segue

  1. Seleccionar el Control: Selecciona el control que iniciarà la transició (per exemple, un botó).
  2. Control-Drag: Mantingues premuda la tecla Control i arrossega des del control fins a la vista de destinació.
  3. Seleccionar el Tipus de Segue: Tria el tipus de segue des del menú contextual que apareix.

Configurant la Segue

  1. Seleccionar la Segue: Selecciona la segue al Storyboard.
  2. Configurar la Segue: Utilitza l'inspector d'atributs per configurar les propietats de la segue, com ara l'identificador.

Exemple Pràctic

// Preparant-se per a una segue en el codi

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "showDetail" {
        if let destinationVC = segue.destination as? DetailViewController {
            destinationVC.data = "Alguna dada important"
        }
    }
}

Utilitzant Escenes i Identificadors de Storyboard

Escenes

Cada vista en un Storyboard es coneix com una escena. Pots organitzar les escenes per representar diferents pantalles de la teva aplicació.

Identificadors de Storyboard

Els identificadors de Storyboard són cadenes úniques que identifiquen cada vista o segue. Són útils per referenciar vistes i segues en el codi.

Exemple Pràctic

// Iniciant una vista programàticament utilitzant un identificador de Storyboard

if let detailVC = storyboard?.instantiateViewController(withIdentifier: "DetailViewController") as? DetailViewController {
    detailVC.data = "Alguna dada important"
    navigationController?.pushViewController(detailVC, animated: true)
}

Exercicis Pràctics

  1. Crear una Vista amb Controls: Crea una nova vista en el Storyboard i afegeix-hi un botó i una etiqueta. Configura el botó perquè canviï el text de l'etiqueta quan es premi.
  2. Crear una Segue: Afegeix una segue entre dues vistes i configura-la perquè es mostri quan es premi un botó.
  3. Utilitzar un Identificador de Storyboard: Crea una nova vista amb un identificador de Storyboard i inicia-la programàticament des d'una altra vista.

Solucions

  1. Crear una Vista amb Controls
@IBOutlet weak var myLabel: UILabel!
@IBAction func buttonPressed(_ sender: UIButton) {
    myLabel.text = "Botó premut!"
}
  1. Crear una Segue
  • Arrossega un botó a la primera vista.
  • Control-Drag des del botó fins a la segona vista.
  • Selecciona "Show" com a tipus de segue.
  1. Utilitzar un Identificador de Storyboard
if let newVC = storyboard?.instantiateViewController(withIdentifier: "NewViewController") {
    navigationController?.pushViewController(newVC, animated: true)
}

Conclusió

En aquest tema, hem après a utilitzar els Storyboards per dissenyar les interfícies d'usuari de les nostres aplicacions. Hem vist com afegir i configurar vistes i controls, crear transicions entre vistes i utilitzar escenes i identificadors de Storyboard. Amb aquests coneixements, estàs preparat per crear interfícies d'usuari més complexes i intuïtives a Xcode.

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