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

Storyboards i Interface Builder

Següent ►
►

En aquest tema, aprendrem a utilitzar Storyboards i Interface Builder per crear interfícies d'usuari en aplicacions iOS. Aquestes eines són fonamentals per al desenvolupament d'aplicacions iOS, ja que permeten dissenyar visualment les pantalles de l'aplicació i definir les transicions entre elles.

Objectius d'Aprenentatge

  • Entendre què són els Storyboards i l'Interface Builder.
  • Aprendre a crear i configurar vistes utilitzant Storyboards.
  • Aprendre a connectar elements de la interfície amb el codi Swift.
  • Entendre com funcionen les segues per navegar entre vistes.

Què són els Storyboards i l'Interface Builder?

Storyboards

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

Interface Builder

L'Interface Builder és una eina dins de Xcode que permet crear i dissenyar visualment les interfícies d'usuari. Amb l'Interface Builder, pots afegir elements d'interfície com botons, etiquetes, taules, etc., i configurar les seves propietats.

Creació d'un Storyboard

Pas 1: Crear un nou projecte

  1. Obre Xcode i crea un nou projecte seleccionant "File" > "New" > "Project...".
  2. Selecciona "App" i fes clic a "Next".
  3. Omple els detalls del projecte (nom, organització, etc.) i assegura't que l'opció "Storyboard" estigui seleccionada com a interfície d'usuari.
  4. Fes clic a "Next" i després a "Create".

Pas 2: Afegir una vista al Storyboard

  1. Obre el fitxer Main.storyboard que es troba al navegador de projectes.
  2. Arrossega un View Controller des de la biblioteca d'objectes fins al Storyboard.
  3. Selecciona el View Controller i, a l'inspector d'atributs, estableix-lo com a "Initial View Controller" marcant la casella "Is Initial View Controller".

Pas 3: Afegir elements d'interfície

  1. Arrossega elements d'interfície (com botons, etiquetes, etc.) des de la biblioteca d'objectes fins al View Controller.
  2. Configura les propietats dels elements d'interfície utilitzant l'inspector d'atributs.

Connectar Elements de la Interfície amb el Codi

Pas 1: Crear una classe de vista

  1. Crea un nou fitxer Swift seleccionant "File" > "New" > "File...".
  2. Selecciona "Cocoa Touch Class" i fes clic a "Next".
  3. Omple els detalls de la classe (nom, subclass de UIViewController) i fes clic a "Next" i després a "Create".

Pas 2: Connectar la classe de vista amb el View Controller

  1. Selecciona el View Controller al Storyboard.
  2. A l'inspector d'identitat, estableix la classe personalitzada com la classe que acabes de crear.

Pas 3: Crear outlets i accions

  1. Obre el fitxer Main.storyboard i la classe de vista en mode Assistant Editor (Editor Assistent).
  2. Control + arrossega des dels elements d'interfície fins a la classe de vista per crear outlets i accions.
import UIKit

class MyViewController: UIViewController {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var myButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Configuració inicial
    }

    @IBAction func buttonTapped(_ sender: UIButton) {
        myLabel.text = "Botó premut!"
    }
}

Navegació entre Vistes amb Segues

Pas 1: Crear una segue

  1. Arrossega un altre View Controller des de la biblioteca d'objectes fins al Storyboard.
  2. Control + arrossega des d'un botó del primer View Controller fins al segon View Controller per crear una segue.
  3. Selecciona la segue i, a l'inspector d'atributs, dóna-li un identificador únic.

Pas 2: Preparar-se per a la segue

  1. Implementa el mètode prepare(for:sender:) a la classe de vista per preparar-se per a la segue.
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "showDetail" {
        if let destinationVC = segue.destination as? DetailViewController {
            destinationVC.data = "Alguna dada"
        }
    }
}

Exercicis Pràctics

Exercici 1: Crear una Interfície Simple

  1. Crea un nou projecte en Xcode.
  2. Afegeix un View Controller al Storyboard.
  3. Arrossega una etiqueta (UILabel) i un botó (UIButton) al View Controller.
  4. Crea una classe de vista i connecta els elements d'interfície com outlets i accions.
  5. Quan es premi el botó, canvia el text de l'etiqueta.

Exercici 2: Navegació entre Vistes

  1. Afegeix un segon View Controller al Storyboard.
  2. Crea una segue des d'un botó del primer View Controller fins al segon View Controller.
  3. Implementa el mètode prepare(for:sender:) per passar dades del primer al segon View Controller.

Solucions

Solució a l'Exercici 1

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var myButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func buttonTapped(_ sender: UIButton) {
        myLabel.text = "Botó premut!"
    }
}

Solució a l'Exercici 2

import UIKit

class FirstViewController: UIViewController {
    @IBOutlet weak var myButton: UIButton!

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "showSecondVC" {
            if let destinationVC = segue.destination as? SecondViewController {
                destinationVC.data = "Hola des del primer VC"
            }
        }
    }
}

class SecondViewController: UIViewController {
    var data: String?

    override func viewDidLoad() {
        super.viewDidLoad()
        print(data ?? "No hi ha dades")
    }
}

Resum

En aquesta secció, hem après a utilitzar Storyboards i Interface Builder per crear interfícies d'usuari en aplicacions iOS. Hem vist com afegir elements d'interfície, connectar-los amb el codi Swift i navegar entre vistes utilitzant segues. Aquestes habilitats són fonamentals per al desenvolupament d'aplicacions iOS i ens permeten crear aplicacions amb interfícies d'usuari atractives i funcionals.

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