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

Conceptes Bàsics de UIKit

Següent ►
►

UIKit és el framework principal per a la creació d'interfícies d'usuari en aplicacions iOS. Proporciona una àmplia gamma de components d'interfície d'usuari, com ara botons, etiquetes, taules i molt més. En aquest tema, aprendrem els conceptes bàsics de UIKit i com utilitzar-lo per crear una aplicació senzilla.

  1. Introducció a UIKit

Què és UIKit?

UIKit és un framework que proporciona les eines necessàries per construir i gestionar la interfície d'usuari d'una aplicació iOS. Inclou classes per a la gestió de vistes, controladors de vista, gestió d'esdeveniments i molt més.

Components Principals de UIKit

  • UIView: La classe base per a totes les vistes.
  • UIViewController: La classe base per a tots els controladors de vista.
  • UIWindow: Una instància de UIWindow representa una finestra en la qual es mostren les vistes.
  • UIControl: Una subclasse de UIView que gestiona esdeveniments d'usuari, com ara tocs.

  1. Creació d'una Aplicació Senzilla amb UIKit

Configuració del Projecte

  1. Obre Xcode i crea un nou projecte seleccionant "App" sota la secció "iOS".
  2. Assigna un nom al projecte i assegura't que el llenguatge seleccionat sigui Swift.
  3. Selecciona "Storyboard" com a interfície d'usuari.

Estructura del Projecte

  • Main.storyboard: El fitxer principal on dissenyaràs la interfície d'usuari.
  • ViewController.swift: El fitxer de codi associat al controlador de vista principal.

Afegir una Etiqueta i un Botó

  1. Obre Main.storyboard.
  2. Arrossega una UILabel des de la biblioteca d'objectes fins a la vista principal.
  3. Arrossega un UIButton des de la biblioteca d'objectes fins a la vista principal.
  4. Configura les propietats de la UILabel i el UIButton utilitzant l'inspector d'atributs.

Connectar la Interfície d'Usuari amb el Codi

  1. Obre ViewController.swift.
  2. Crea outlets per a la UILabel i el UIButton: 
    import UIKit

class ViewController: 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 = "Hola, món!"
    }
}
  3. Torna a Main.storyboard i connecta els outlets i l'acció:
    • Ctrl+arrossega des de la UILabel fins a la declaració @IBOutlet weak var myLabel.
    • Ctrl+arrossega des del UIButton fins a la declaració @IBOutlet weak var myButton.
    • Ctrl+arrossega des del UIButton fins a la funció @IBAction func buttonTapped.

Executar l'Aplicació

  1. Selecciona un simulador o un dispositiu real des de la barra d'eines de Xcode.
  2. Fes clic al botó de reproducció per compilar i executar l'aplicació.
  3. Quan toquis el botó, l'etiqueta hauria de canviar el seu text a "Hola, món!".

  1. Exercicis Pràctics

Exercici 1: Afegir un Camp de Text

  • Afegeix un UITextField a la vista.
  • Crea un outlet per al UITextField.
  • Modifica l'acció del botó per actualitzar l'etiqueta amb el text introduït en el camp de text.

Solució:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var myButton: UIButton!
    @IBOutlet weak var myTextField: UITextField!

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

    @IBAction func buttonTapped(_ sender: UIButton) {
        if let text = myTextField.text {
            myLabel.text = text
        }
    }
}

Exercici 2: Canviar el Color de Fons

  • Afegeix un segon botó que canviï el color de fons de la vista principal quan es toqui.

Solució:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var myButton: UIButton!
    @IBOutlet weak var myTextField: UITextField!
    @IBOutlet weak var changeColorButton: UIButton!

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

    @IBAction func buttonTapped(_ sender: UIButton) {
        if let text = myTextField.text {
            myLabel.text = text
        }
    }

    @IBAction func changeColorTapped(_ sender: UIButton) {
        self.view.backgroundColor = UIColor.red
    }
}

  1. Resum

En aquesta secció, hem après els conceptes bàsics de UIKit i hem creat una aplicació senzilla que inclou una etiqueta, un botó i un camp de text. Hem après a connectar la interfície d'usuari amb el codi mitjançant outlets i accions, i hem practicat amb exercicis per reforçar els conceptes apresos. En el següent tema, explorarem com utilitzar Storyboards i Interface Builder per dissenyar interfícies d'usuari més complexes.

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