Aprendiendo Objetive-C para IOS (Dia 5)

Guion del blog de curso de Objetive-C para IOS – DIA 5
nota: Esto es no es curso propiamente dicho, es un diario de autoaprendizaje de objetive-c, que me sirve para afianzar conocimientos, y de paso, tener un diario de referencia, con ejemplos propios de uso del lenguaje.
————-
Vamos a ver como podemos crearnos una subclase, que herede todo de un UIButton. De esa forma, tendremos toda la potencia del UIButton, mas a parte podremos añadirle propiedades para poder trabajar con una clase nueva. La clase se va a llamar Celda, y queremos establecerle una serie de propiedades, así como sobreescribir el constructor, para poder iniciar la la Celda con las imágenes de estado que nosotros queramos.

Para esto, nos creamos una nueva clase, desde Boton derecho en nuestro nombre de proyecto, New File -> y elegimos Objetive-C Class

Cuando aparezca la pantalla, llamamos a nuestra Clase «Celda», y le decimos que derive de la clase «UIButton» (Si no aparece en el listado, la escribimos.

Nos creara dos ficheros, uno Celda.h y otro Celda.m
Celda.h quedara asi:
—————————–
//
//  Celda.h
//  Diario004
//
//  Created by david fraj blesa on 10/06/12.
//  Copyright (c) 2012 __MyCompanyName__. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface Celda : UIButton{
//Creamos tres nuevas variables, una para el valor, otra para saber si
//esta o no pulsado, y un objeto de tipo NSString, para guardar el
// nombre de esa celda
    NSString *nombre;
    int valor;
    int pulsado;
}
//Creamos las propiedades correspondientes al objeto celda
@property (nonatomic, copy) NSString *nombre;
@property (nonatomic) int valor;
@property (nonatomic) int pulsado;
@end
Celda.m quedara asi:
—————————–
//
//  Celda.m
//  Diario004
//
//  Created by david fraj blesa on 10/06/12.
//  Copyright (c) 2012 __MyCompanyName__. All rights reserved.
//
#import «Celda.h»
@implementation Celda{
    
}
//Con esto creamos los métodos jet y set, para todas las propiedades
@synthesize  nombre, valor, pulsado;
//Con esto sobreescribimos el método constructor, para que al instanciar el objeto
//Se le asigne la imagen de estado normal, y la imagen de estado pulsado
//El método devuelve un objeto genérico (id), y recibe una variable de tipo (CGRect)
// llamada frame
– (id)initWithFrame:(CGRect)frame 
{
    if (self = [super initWithFrame:frame]) 
    {
        [self setImage:[UIImage imageNamed:@»defaultflash.gif»] forState:UIControlStateNormal];
        [self setImage:[UIImage imageNamed:@»pulsado.gif»] forState:UIControlStateHighlighted];
        self.adjustsImageWhenHighlighted = YES;
    }
    return self;
}
@end
—————————–
—————————–
Vamos a usar este nuevo objeto que acabamos de crear.
nota: Las imágenes que he empleado, son imágenes gif cogidas de google de 50×50
Para añadirlas a mi proyecto, lo único que tengo que hacer, es darle a añadir archivos (Add Files to ….), y elegir las imágenes. Aseguraos que esta marcada la casilla «Copy Items…» para que os haga una copia de la misma.
Para usar nuestra nueva clase en el ViewController.m, debemos añadir la linea 
#import «Celda.h» a nuestro fichero ViewController.m
Vamos pues al archivo ViewController.m, que debería tener este método así:
– (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    
    //Inicializo el numero a 0
    int numero=0;
    int posicionInicialX=5;
    int posicionInicialY=5;
    int fila=0;
    int modulo=0;
    //Vamos a crear un bucle para crear dinamicamente 40 botones
    for(int i=0; i<48; i++){
        //PASO 1: Declaramos el objeto, reservamos memoria, y lo inicializamos
        Celda *boton=[[Celda alloc] init];
        
        //Le damos valores a las variables del objeto celda
        boton.nombre=[NSString stringWithFormat:@»Carta %d», numero];
        [boton setValor:numero*10];
        [boton setPulsado:0];
        //boton.buttonType=UIButtonTypeRoundedRect;
        
        //PASO 2: Vamos a darle un titulo al boton, que sera la variable numero incrementada en uno cada vez que se     pulse
        NSString *titulo=[NSString stringWithFormat:@»%d», numero++];
        [boton setTitle:titulo forState:UIControlStateNormal];
        
        //PASO 3: Vamos a agregarle un evento, que al hacer click, ejecute el mismo metodo en el que estamos, aunque podria 
        //ser otro evento perfectamente.
        [boton addTarget:self action:@selector(pulsar:) forControlEvents:UIControlEventTouchUpInside];
        
        //Establecemos una posicion meciante un CGRect, hay que calcular la posicion correcta, segun el numero de elmentos
        
        //Hacemos la operacion modulo, para saber donde estamos
        modulo=i%8;
        if(modulo==0){
            fila++;            
        }
        
        CGRect botonFrame = CGRectMake(posicionInicialX+modulo*39, posicionInicialY+fila*39, 39, 39 );
        [boton setFrame:botonFrame];
        
        //Añadimos dicho boton a la vista en la que estamos
        [self.view addSubview:boton];
    }
    
}
————————
Nos falta implementar el metodo «pulsar»
————————
– (void)pulsar:(Celda *)sender{
    //Metodo al pulsar cualquiera de los botones
    NSString *cadena=[[NSString alloc] initWithFormat:@»Celda %i», ((Celda *) sender).valor];
    //NSString *cadena=[[NSString alloc] initWithFormat:@»Celda %i», [sender pulsado]];
    NSLog(@»Has pulsado el %@», cadena); //OK*/
    
    //Averiguamos si lo pulsamos o no, y le cambiamos el color
    if(((Celda *) sender).pulsado==0){
        ((Celda *) sender).pulsado=1;
        ((Celda *) sender).backgroundColor=[UIColor yellowColor];
        //Vamos a cambiar ahora la imagen en tiempo de ejecucion, al pulsar un boton.
        [sender setImage:[UIImage imageNamed:@»msnicon.gif»] forState:UIControlStateNormal];
    }else{
        ((Celda *) sender).pulsado=0;
        ((Celda *) sender).backgroundColor=[UIColor blueColor];
        //Vamos a cambiar ahora la imagen en tiempo de ejecucion, al pulsar un boton.
        [sender setImage:[UIImage imageNamed:@»defaultflash.gif»] forState:UIControlStateNormal];
    }
    
    
}
————————

De esta manera, como vemos en la imagen, ya tenemos generado de forma dinámica una matriz de celdas, que responden dinámicamente a la pulsación, y cambian de estado según se van pulsado.