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

Introducció a UIKit

Següent ►
►

UIKit és un dels frameworks més importants per al desenvolupament d'aplicacions iOS. Proporciona les eines necessàries per crear i gestionar la interfície d'usuari de les aplicacions. En aquest tema, aprendrem els conceptes bàsics de UIKit, incloent-hi les vistes, els controladors de vista i com interactuen entre ells.

Objectius d'Aprenentatge

Al final d'aquest tema, hauràs après:

  • Què és UIKit i per què és important.
  • Els components bàsics de UIKit.
  • Com crear i gestionar vistes i controladors de vista.

Què és UIKit?

UIKit és un framework que proporciona les classes necessàries per construir i gestionar la interfície d'usuari d'una aplicació iOS. Inclou elements com botons, etiquetes, taules, col·leccions, i molt més. A més, gestiona esdeveniments de l'usuari, animacions i la navegació entre diferents pantalles.

Components Bàsics de UIKit

  1. UIView: La classe base per a totes les vistes. Una vista representa una àrea rectangular a la pantalla i és responsable de dibuixar contingut i gestionar esdeveniments d'usuari.
  2. UIViewController: La classe base per als controladors de vista. Un controlador de vista gestiona una vista i la seva lògica associada.
  3. UIWindow: Una subclasse de UIView que actua com a contenidor per a totes les altres vistes d'una aplicació.

Creant una Vista Bàsica

Exemple de Codi

A continuació, es mostra un exemple de com crear una vista bàsica amb un UILabel i un UIButton utilitzant UIKit.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Crear un UILabel
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 100, 200, 50)];
    label.text = @"Hola, UIKit!";
    label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:label];
    
    // Crear un UIButton
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(50, 200, 200, 50);
    [button setTitle:@"Prem-me" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)buttonPressed {
    NSLog(@"Botó premut!");
}

@end

Explicació del Codi

  1. Importació de UIKit: #import <UIKit/UIKit.h> importa el framework UIKit.
  2. Creació del UILabel: UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 100, 200, 50)]; crea una etiqueta amb una posició i mida específiques.
  3. Configuració del UILabel: label.text = @"Hola, UIKit!"; estableix el text de l'etiqueta. label.textAlignment = NSTextAlignmentCenter; centra el text dins de l'etiqueta.
  4. Afegir UILabel a la Vista: [self.view addSubview:label]; afegeix l'etiqueta a la vista principal del controlador de vista.
  5. Creació del UIButton: UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; crea un botó de tipus sistema.
  6. Configuració del UIButton: [button setTitle:@"Prem-me" forState:UIControlStateNormal]; estableix el títol del botó.
  7. Afegir Acció al UIButton: [button addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside]; afegeix una acció que es cridarà quan el botó sigui premut.
  8. Afegir UIButton a la Vista: [self.view addSubview:button]; afegeix el botó a la vista principal del controlador de vista.
  9. Implementació de l'Acció del Botó: - (void)buttonPressed { NSLog(@"Botó premut!"); } defineix el mètode que es cridarà quan el botó sigui premut.

Exercici Pràctic

Exercici

Crea una aplicació que mostri una imatge i un botó. Quan el botó sigui premut, la imatge ha de canviar.

Solució

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Crear un UIImageView
    self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
    self.imageView.image = [UIImage imageNamed:@"image1"];
    [self.view addSubview:self.imageView];
    
    // Crear un UIButton
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(50, 350, 200, 50);
    [button setTitle:@"Canvia Imatge" forState:UIControlStateNormal];
    [button addTarget:self action:@selector(changeImage) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

- (void)changeImage {
    self.imageView.image = [UIImage imageNamed:@"image2"];
}

@end

Explicació del Codi

  1. Creació del UIImageView: self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)]; crea una vista d'imatge amb una posició i mida específiques.
  2. Configuració del UIImageView: self.imageView.image = [UIImage imageNamed:@"image1"]; estableix la imatge inicial.
  3. Afegir UIImageView a la Vista: [self.view addSubview:self.imageView]; afegeix la vista d'imatge a la vista principal del controlador de vista.
  4. Creació del UIButton: UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; crea un botó de tipus sistema.
  5. Configuració del UIButton: [button setTitle:@"Canvia Imatge" forState:UIControlStateNormal]; estableix el títol del botó.
  6. Afegir Acció al UIButton: [button addTarget:self action:@selector(changeImage) forControlEvents:UIControlEventTouchUpInside]; afegeix una acció que es cridarà quan el botó sigui premut.
  7. Afegir UIButton a la Vista: [self.view addSubview:button]; afegeix el botó a la vista principal del controlador de vista.
  8. Implementació de l'Acció del Botó: - (void)changeImage { self.imageView.image = [UIImage imageNamed:@"image2"]; } defineix el mètode que canvia la imatge quan el botó és premut.

Resum

En aquest tema, hem après els conceptes bàsics de UIKit, incloent-hi com crear i gestionar vistes i controladors de vista. Hem vist exemples pràctics de com crear una vista amb un UILabel i un UIButton, i hem realitzat un exercici pràctic per reforçar els conceptes apresos. Ara estàs preparat per aprofundir més en el desenvolupament d'interfícies d'usuari amb UIKit.

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