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

Introducció a Interface Builder

Següent ►
►

Objectius del Mòdul

En aquest mòdul, aprendràs a:

  • Entendre què és Interface Builder i la seva importància en el desenvolupament d'aplicacions iOS.
  • Familiaritzar-te amb la interfície d'Interface Builder.
  • Crear i configurar elements d'interfície d'usuari bàsics.

Què és Interface Builder?

Interface Builder és una eina visual dins de Xcode que permet dissenyar i construir la interfície d'usuari (UI) de les aplicacions iOS de manera intuïtiva i eficient. Utilitzant Interface Builder, pots arrossegar i deixar anar elements d'UI, configurar les seves propietats i establir les relacions entre ells sense necessitat d'escriure codi manualment.

Components Clau d'Interface Builder

Interface Builder està compost per diverses parts clau que t'ajudaran a dissenyar la teva interfície d'usuari:

  1. Editor de Storyboard: L'àrea principal on dissenyes la teva interfície d'usuari.
  2. Object Library: Conté tots els elements d'UI que pots arrossegar al teu storyboard.
  3. Attributes Inspector: Permet configurar les propietats dels elements seleccionats.
  4. Document Outline: Mostra una vista jeràrquica de tots els elements del teu storyboard.
  5. Connections Inspector: Utilitzat per establir connexions entre els elements d'UI i el codi.

Creant una Interfície d'Usuari Bàsica

Pas 1: Obrir Interface Builder

  1. Obre Xcode i crea un nou projecte seleccionant "App" sota la secció "iOS".
  2. Tria un nom per al teu projecte i assegura't que l'opció "Use Storyboards" estigui seleccionada.
  3. Un cop creat el projecte, obre el fitxer Main.storyboard per accedir a Interface Builder.

Pas 2: Afegir Elements d'UI

  1. Arrossegar i Deixar Caure Elements: Des de l'Object Library, arrossega un UILabel i un UIButton al teu storyboard.
  2. Configurar Propietats: Selecciona el UILabel i utilitza l'Attributes Inspector per canviar el text a "Hola, món!". Fes el mateix amb el UIButton, canviant el text a "Prem-me".

Pas 3: Establir Constriccions

  1. Auto Layout: Per assegurar-te que els elements es mostrin correctament en diferents dispositius, has d'establir constriccions. Selecciona el UILabel i el UIButton, i utilitza el botó "Add New Constraints" per establir les constriccions necessàries (per exemple, centrar-los a la pantalla).

Pas 4: Connectar Elements al Codi

  1. Crear Outlets i Accions: Obre el fitxer ViewController.swift en mode Assistant Editor (Control + Opció + Comand + Enter). Arrossega el UILabel i el UIButton des del storyboard fins al codi per crear outlets i accions respectivament.
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var greetingLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func buttonPressed(_ sender: UIButton) {
        greetingLabel.text = "Botó Premut!"
    }
}

Exercici Pràctic

Objectiu

Crea una interfície d'usuari que contingui un UITextField, un UILabel i un UIButton. Quan l'usuari escrigui text al UITextField i premi el UIButton, el text del UILabel ha de canviar per mostrar el text introduït.

Passos

  1. Arrossega un UITextField, un UILabel i un UIButton al teu storyboard.
  2. Estableix les constriccions necessàries per assegurar-te que els elements es mostrin correctament en diferents dispositius.
  3. Crea outlets per al UITextField i el UILabel, i una acció per al UIButton.
  4. Implementa la lògica per actualitzar el text del UILabel quan es premi el UIButton.

Solució

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var inputTextField: UITextField!
    @IBOutlet weak var displayLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func updateLabel(_ sender: UIButton) {
        displayLabel.text = inputTextField.text
    }
}

Errors Comuns i Consells

  • No establir constriccions correctament: Això pot causar que els elements d'UI no es mostrin correctament en diferents dispositius. Assegura't de revisar les constriccions.
  • No connectar correctament els outlets i accions: Si els outlets o accions no estan connectats correctament, el codi no funcionarà. Revisa les connexions al Connections Inspector.

Conclusió

En aquest mòdul, has après els conceptes bàsics d'Interface Builder i com utilitzar-lo per crear una interfície d'usuari bàsica. Has après a afegir elements d'UI, establir constriccions i connectar els elements al codi. Aquestes habilitats són fonamentals per al desenvolupament d'aplicacions iOS i et preparen per a temes més avançats en els següents mòduls.

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