iOS : Ejercicio 9. Aplicando a Tabla UINavigationController

Blog >Lista ejercicios >  Ejercicio 9


Hola amiguetes programadores, hoy continuamos con el paso final del UITableView :

Ejercicio 9 : UITableView con UINavigationController.

Ya vimos en el ejercicio 8 como crear un TableView y aplicar muy poquita funcionalidad, lo podeis ver aquí.
Después en el ejercicio 9 vimos como personalizar nuestra tabla a antojo creando nosotros mismos las celdas con sus label o imagenes de forma dinámica ayudandonos de un array que también lo podreis ver desde aquí, pues bien, empezamos desde ahi, donde lo dejamos.

NOTA : Si eres novat@, necesitarás hacer los ejercicios 7 y 8 para empezar con este :

Dando funcionalidad a nuestra UITableView con UINavigationController.

Comenzamos arrastrando un UINavigationController al storyboard, borrando la pantalla de la derecha con la tabla y clickando en el NavigationControler+Ctrl arrastramos hacia nuestra tabla personalizada, ahi soltamos y elegimos la opción de Root View :

Aparecen entonces 2 flechas, la que sale de la nada es porque señala que es la primera vista que se ejecuta cuando iniciamos la aplicación, la segunda es para el Navigation Controller.
Pues bien, esto hay que cambiarlo, para que la flecha que sale de la nada apunte lo primero al NavigationController, esto se hace seleccionando este, y en inspector de atributos, en la cuarta pestañita, donde está la sección View Controller, hay un check box que dice Is Initial View Controller, seleccionamos y listo.

Como recordareis, en el método didSelectRowAtIndexPath teníamos el código necesario para que saltara un Alert Dialog con el nombre de la fila que habiamos seleccionado, pues bien, borramos el interior del método.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

}
@end

Ahora creamos otra View Controller donde mostraremos los detalles del item de la tabla que se ha seleccionado, la personalizamos con 2 label y una imagen, además de crear una clase que llamamos detallesViewController que herede de UIViewController, además de asignarle un identificador.


El identifier en versiones anteriores de Xcode 5.0 está en la sección View Controller de la cuarta pestañita del inspector de atributos, a partir de esta versión en adelante se haya en la tercera pestañita bajo el nombre de StoryBoard ID, que en este caso será IDDetalle.

Abrimos la vista de "Assistant Editor" y teniendo en una ventana el storyboard y en otra el DetalleViewController.h clickamos en cada uno de los elementos+Ctrl y los arrastramos ahi, quedando la clase así :

@interface DetalleViewController:UIViewController
@property (weak, nonatomic) IBOutlet UILabel *Desc
@property (weak, nonatomic) IBOutlet UIImageView *img
@property (weak, nonatomic) IBOutlet UILabel *Nomb
}
@end

//NO OLVIDAR LOS @Synthesize DE LOS ELEMENTOS EN EL DetalleViewController.m

Y ahora vamos a darle la funcionalidad para que al seleccionar un item de la tabla, vaya hasta el DetalleViewControler, lo hacemos mediante la función en la que hemos quitado antes código, pero no olvidar importar la nueva clase (DetalleViewController) en el ViewController.m.

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"];
[self.navigationController pushViewController:Vista animated:YES];
}
@end

Podeis ejecutar la aplicación, y vais a ver que la funcionalidad del Navigation Controller sobre nuestra tabla personalizada ya está echa, pero vemos que los label y la imagen no cambian, y son los que se han puesto por defecto, así que vamos a darles funcionalidad para que cambien a los de nuestros items :

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//HACEMOS UN OBJETO DE LA VISTA DETALLE
DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"];
//HACEMOS OBJETO PERSONAJE DONDE ALMACENAMOS EL OBJETO DEL ARRAY
Personaje *elemento = [[Personaje alloc] init];
elemento=[items objectAtIndex:indexPath.row];
//RELLENAMOS LOS ITEMS
[Vista.Desc setText:elemento.Descripcion];
[Vista.img setImage:elemento.imagen];
[Vista.Nomb setText:elemento.Nombre];
//CARGAMOS LA VISTA
[self.navigationController pushViewController:Vista animated:YES];
}
@end

Ejecutamos la aplicación....
¿Pero que ocurre? No funciona!! ¡Los items de nuestro DetalleViewController no cambian! esto se debe a que falta una linea, vamos al coñazo que da Objetive C siempre con las versiones, hasta versiones de XCode anteriores a la 5.1 funcionaba así, pero a partir de estas versiones para adelante, hay que ponerla...

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//HACEMOS UN OBJETO DE LA VISTA DETALLE
DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"];
//ESTA ES LA PUÑETERA LINEA SIN LA CUAL NO FUNCIONA
[Vista loadView];
//HACEMOS OBJETO PERSONAJE DONDE ALMACENAMOS EL OBJETO DEL ARRAY
Personaje *elemento = [[Personaje alloc] init];
elemento=[items objectAtIndex:indexPath.row];
//RELLENAMOS LOS ITEMS
[Vista.Desc setText:elemento.Descripcion];
[Vista.img setImage:elemento.imagen];
[Vista.Nomb setText:elemento.Nombre];
//CARGAMOS LA VISTA
[self.navigationController pushViewController:Vista animated:YES];
}
@end

He querido tener en cuenta esta linea : [Vista loadView] porque me ha llevado más de un rato intentar solucionarlo, y la explicación la cuento a continuación :

Los elementos a los que se referencia mediante la instrucción DetalleViewController *Vista=[self.storyboard instantiateViewControllerWithIdentifier:@"IDDetalle"]; como pueden ser los label que hay dentro o la imagen, son nulos (nil) porque se ha instanciado el controlador, pero no se ha cargado la vista.
La vista del controlador se carga la primera vez que se ha solicitado su acceso, pero ninguna más, por eso no se cargan los datos. Con [Vista loadView] cargamos la vista y se nos va el problema.

Indice

Ejercicio anterior

Siguiente ejercicio

Categories: instantiateViewControllerWithIdentifier identifier, instantiateViewControllerWithIdentifier label text, loadView, UITableView, UITableView UINavigationController

iOS : Ejercicio 7. Creando Table View I

Blog >Lista ejercicios >  Ejercicio 7

Hola developer, hoy en este ejercicio vamos a aprender a usar el UITableContoller, por un lado vamos a ver una lista de elementos y por otro sus detalles.

 

Ejercicio 7 : Aprendiendo a hacer una tabla de contenidos mediante UITableView

Creamos un proyecto nuevo : file - new - proyect - Simple View Application. Como todos los tutoriales nos centramos sólo en iPhone.

Para comenzar agregamos un objeto Table View y conectamos el dataSource y el delegate al controlador

Ahora abriremos el ViewController.h y añadimos la conexion de la tabla y las propiedades UITableViewDelegate y UITableViewDataSource, además del array que contendrá los datos.

@interface ViewController : UIViewController {
 IBOutlet UITableView *tabla;
 NSMutableArray *items;
}
@end

Asignamos ahora la conexion de la table mediante IBOutlet a la tabla en el StroyBoard

Bien, ahora iremos al código del ViewController.m para inicializar el array en el metodo viewDidLoad, y pasamos a implementar los métodos principales para cumplir con el UITableViewDelegate y mostrar los datos.

 #import "ViewController.h"


@interface ViewController ()


@end

@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    items = [NSMutableArray arrayWithObjects:@"Item 0",@"Item 1",@"Item 2",@"Item 3",@"Item 4",@"Item 5",@"Item 6",@"Item 7",@"Item 8",@"Item 9",@"Item 10",@"Item 11",@"Item 12",@"Item 13",@"Item 14",nil];

}

//METODO NECESARIO PARA DEVOLVER EL NÚMERO DE SECCIONES DE LA TABLA
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return 1;
}

//METODO NECESARIO PARA MOSTRAR EL NUMERO DE FILAS DE LA TABLA

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [items count];
}
//METODO QUE INTRODUCE LOS VALORES DEL ARRAY EN LAS CELDAS
-(UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    //RECUPERAMOS ARRAY SEGUN LA POSICION DE LA FILA
    NSString *fila = [items objectAtIndex:indexPath.row];
    //CREAMOS LA CELDA
    UITableViewCell *celda =[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    //COPIAMOS LA VARIABLE DEL ARRAY EN LA FILA
    celda.textLabel.text=fila;
    //DEVOLVEMOS LA CELDA
    return celda;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

Y por último implementamos el método por el cual al clickar en cualquier item realiza una acción

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
   // En este método haremos lo que creamos oportuno. Por lo general pasaremos a una vista detalle del elemento seleccionado. Haciendo uso de  UINavigationController que se puede ver en el correspondiente tutorial.
   NSString *dato = [datos objectAtIndex:indexPath.row];
 
   UIAlertView *alerta = [[UIAlertView alloc]
    initWithTitle:[NSString stringWithFormat:@"Has pulsado la fila %d",indexPath.row]
    message:[NSString stringWithFormat:@"¡No te olvides de visitar ThebestAndroide!"]
    delegate:nil
    cancelButtonTitle:@"Aceptar"
    otherButtonTitles:nil, nil];
  [alerta show];
}

Y este es el resultado :

Indice

Ejercicio anterior

Siguiente ejercicio

Categories: developer iOS, ejercicio iOS, ios crear lista, iOS lista array, TableView, thebestandroide ejercicios ios, UITableView