Diseño de aplicaciones: opciones de navegación!

19 – Febrero de 2011!

Luis Montesano, Ana C. Murillo!

Control de navegación: “navigation controlers”!

Barra de navegación:!UINavigationController!

Barra de “tabs”:!UITabBarController!

Híbrido ...!

Pila de vistas: UINavigationController!

• Título del controlador de la vista encima de la pila.!

• Título del controlador de la vista anterior!

• Vista encima de la pila!

• Barra de herramientas de la vista encima de la pila!

Pila de vistas: UINavigationController!•  Personalizar barras de herramientas: UINavigationItem !

•  Todos los controladores de vistas tienen un “navigationItem” para personalizar títulos, botones,... (opciones en UINavigationBar.h), se visualizan cuando ese controlador está en arriba de la pila:!

• Edit/done (muy común, pre-definido) self.navigationItem.leftBarButtonItem = self.editButtonItem;!

• Botones a izq. y dcha. : definir un botón y asignarlo como navigation item de la vista actual self.navigationItem.leftBarButtonItem = fooButton; self.navigationItem.rightBarButtonItem = addButton;!

• Cambiar el título por algún “control”: self.navigationItem.titleView = segmentedControl;!

• Botón de “volver”: por defecto escribe el título de la vista anterior. Se puede cambiar self.title = @“Hello there, CS193P!”; UIBarButtonItem *heyButton = [[UIBarButtonItem alloc] initWithTitle:@“Hey!” . . .]; self.navigationItem.backButtonItem = heyButton;!

en "MyAppDelegate.h" !

#import "FirstViewController.h" !

... !

- (void)applicationDidFinishLaunching:(UIApplication *)application { !

// INICIALIZAR !

navigationController = [[UINavigationController alloc] init]; ! [window addSubview:navigationController.view]; !

FirstViewController *viewController = ![[FirstViewController alloc] !initWithNibName:@"FirstView" bundle:nil]; !

[navigationController pushViewController:viewController !animated:NO]; !

[viewController release]; !

// Override point for customization !after application launch! [window makeKeyAndVisible]; !} !

Pila de vistas: UINavigationController!En FirstViewController.m !

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { ! if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) { ! // Custom initialization! self.title = @"¡Numero Uno!"; ! } ! return self; !} !

- (void)viewDidLoad { ! [super viewDidLoad]; !

// AÑADIR BOTONES DE CONTROL! UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self !action:@selector(add:)]; ! self.navigationItem.rightBarButtonItem = barButtonItem; ! [barButtonItem release]; !

UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] !initWithTitle:@"back" style:UIBarButtonItemStyleBordered target:nil !action:nil]; ! self.navigationItem.backBarButtonItem = backBarButtonItem; ! [backBarButtonItem release]; !} !

- (void)add:(id)sender !{ ! UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Nothing to add" message:@"Sorry, try again!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil]; ! [alertView show]; ! [alertView release]; !} !

Pila de vistas: UINavigationController!

en FirstViewController.m !

- (IBAction)push:(id)sender !{ ! SecondViewController *secondViewController = [[SecondViewController alloc] initWithText:@"Something"]; ! [self.navigationController pushViewController:secondViewController animated:YES]; ! [secondViewController release]; !} !

en SecondViewController.m !

- (id)initWithText:(NSString *)someText !{ ! if (self = [self initWithNibName:@"SecondView" !bundle:nil]) { !

// Custom initialization! self.title = @"Second"; ! self.text = someText; ! } ! return self; !} !

Pila de vistas: UINavigationController! Pila de vistas: UINavigationController!

DEMO: push-pop!

Vector de vistas: UITabBarController!

• Controlador de la vista seleccionada!

•  Iconos/nombres de todos los controladores de vistas!

- (void)applicationDidFinishLaunching:(UIApplication *)application { !

tabBarController = [[UITabBarController alloc] init]; !

// Create a few view controllers! UIViewController *redViewController = [[UIViewController alloc] init]; ! redViewController.title = @"Red"; ! redViewController.tabBarItem.image = [UIImage imageNamed:@"faves.png"]; ! redViewController.view.backgroundColor = [UIColor redColor]; !

UIViewController *blueViewController = [[UIViewController alloc] init]; ! blueViewController.title = @"Blue"; ! blueViewController.tabBarItem.image = [UIImage imageNamed:@"search.png"]; ! blueViewController.view.backgroundColor = [UIColor blueColor]; !

MyViewController *myViewController = [[MyViewController alloc] initWithNibName:@"MyView" bundle:nil]; !

// Add them as children of the tab bar controller! tabBarController.viewControllers = ![NSArray arrayWithObjects:redViewController, !blueViewController, myViewController, nil]; !

// Don't forget memory management! [redViewController release]; ! [blueViewController release]; ! [myViewController release]; !

// Add the tab bar controller's view to the window! [window addSubview:tabBarController.view]; ! [window makeKeyAndVisible]; !} !

Vector de vistas: UITabBarController!

Vector de vistas: UITabBarController!

Si añadimos muchos elementos al vector, añade automaticamente botón de “more ...” para:!

• visualizar el resto y acceder!

• configurar el orden!

Vector de vistas: UITabBarController!

DEMO: MyTab!

UITabBarController + UINavigationController!Muy común combinarlos!

... !

SimpleFirstController *thirdNavView = [[SimpleFirstController alloc] init]; !"thirdNavView.title=@"Alumnos"; !

"UINavigationController *navigationController3=[[UINavigationController alloc] init]; !"[navigationController3 pushViewController:thirdNavView animated:NO]; "!"[thirdNavView release]; !

"NSArray *controllerArray =[[NSArray alloc] !initWithObjects:navigationController1,navigationController2,navigationController3, nil]; " "!"[tabController setViewControllers:controllerArray]; !

... !

Vistas personalizadas!

• Vista: área rectangular de la pantalla!

• Dibuja y/o maneja eventos en esa zona!

•  Jerarquía de vistas: !

• Una superview: - (UIView *)superview !

• Varias (o ninguna) subviews: - (NSArray *)subviews !

•  (el orden importa... transparencias!)!

Vistas personalizadas!• Normalmente con I.Builder, pero a veces es necesario diseñar

vista “manual”: dibujo personalizado y/o manejar eventos (siguiente clase).!

• Superposición entre vistas: se ve la que está más arriba!

• Podemos utilizar transparencias para ver las sub-vistas de abajo:!

• Al dibujar (siguiente...), transparencia por defecto es: opaco 100%. !

• Para ocultar una vista del todo: hidden property= YES!

DIBUJAR en pantalla!• Accedemos a los “pixels” de la pantalla que queremos pintar!

• Coordenadas en pantalla: !

• CGFloat (un float “normal”, usar siempre este tipo para graficos)!

• CGPoint (struct de C con dos CGFloats: x,y. Se crea con CGPointMake(x, y) )!

• CGSize (struct de C con dos CGFloats: width and height. Se crea con CGSizeMake(width, height)!

• CGRect (struct de C con un CGPoint origin y un CGSize size. Se crea con CGRectMake(x, y, width, height)!

DIBUJAR en pantalla!• Bounds (local): alto y largo de la

vista. Se usa cuando se está implementando una vista!

•  Frame y center (global): rectángulo que contiene a la vista. Centro relativo a la super-view. Se usa para posicionar la vista dentro de su “superview”.!

• Origen: arriba a la izquierda!!!

•  Frame >= bounds (rotaciones)!

View B bounds: ((0,0),(200,250)) !

View B frame: ((140,65),(320,320)) !

View B center: (300, 225)!

• Subclase de UIView: implementar el método drawRect.!

•  - (void)drawRect:(CGRect)clipRect;!

•  se puede optimizar, no es necesario, no dibujando lo que hay fuera de clipRect!

• NUNCA!! llamar directamente a drawRect: avisar que la vista no está actualizada y necesita “redibujar”: drawRect será llamado en el momento adecuado.!

•  - (void)setNeedsDisplay ó - (void)setNeedsDisplayInRect:(CGRect)clipRect!

DIBUJAR EN PANTALLA!

• Contexto del dibujo: !•  Determina dónde va el dibujo (pantalla, pdf,...)!

•  Sólo dura una ejecución de drawRect (nunca almacenar)!

•  Se obtiene el contexto actual: !

•  - (CGContextRef)UIGraphicsGetCurrentContext();!

•  CGContextRef context = UIGraphicsGetCurrentContext();!

• Estilo del dibujo. Se pueden configurar múltiples opciones (fuente, color, tamaño,...): CGContextSetLineWidth(context, 1.0); !

DIBUJAR EN PANTALLA!• Path a dibujar: !

•  Empezar el path: CGContextBeginPath(context);!

•  Mover el “lápiz”, haciendo rectas y arcos: !

•  CGContextMoveToPoint(context, 75, 10); CGContextAddLineToPoint(context, 10, 150); ...!

•  Cerrar el path: CGContextClosePath(context);!

•  Establecer propiedades y dibujar el path: !

[[UIColor greenColor] setFill]; !

[[UIColor redColor] setStroke]; CGContextDrawPath(context, kCGPathFillStroke);!

•  Se puede almacenar un path para reutilizarlo, usando CGPath en lugar de CGContext!

DIBUJAR EN PANTALLA!

DEMO: happy!

DIBUJAR EN PANTALLA! Model-View-Controler!• RECORDAR: Flujo de información a través de los

controladores!

Vistas con tablas y “scroll”!

• Vistas más flexibles: UIScrollView!

• Para mostrar más cosas de las que caben en la pantalla!

• Soporta eventos de zoom y de “scroll”!

• Subclases: UITableView and UITextView!

Vistas con tablas y “scroll”!• UITableView: mostrar listas de contenido (1columna,

varias filas) permitiendo “scroll” vertical!

UITableViewStylePlain! UITableViewStyleGrouped!

Cabecera tabla! Cabecera tabla!

Pie tabla!

Pie tabla!

Cabecera sección! Cabecera sección!

Pie sección!Pie sección!

Sección!Sección!

Celda!Celda!

Vistas con tablas y “scroll”!Solución simple! Solución más eficiente!

Utilizar un vector para pasar los datos a mostrar![myTableView setList:myListOfStuff];!Pero!! Se cargan todos los datos al principio y se quedan en memoria!

Otro objeto (datasource: UITableViewController) pasa los datos a la tabla (como un “delegate”). Los datos se cargan conforme hacen falta!!

Cuantas secciones visibles?!Qué mostrar en celda de sección 1?!

5!John Appleseed!

Vistas con tablas y “scroll”!Muchas opciones de configuración en UITableView!

• Re-utilizar celdas!

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@“MyIdentifier”];if (cell == nil) { cell = [[[UITableViewCell alloc]initWithStyle:... reuseIdentifier:@“MyIdenifier”] autorelease]; }!

• Cargar datos bajo demanda: cuando una fila se hace visible (automático) o cuando se llama explicitamente “reloadData”!

- (void)viewWillAppear:(BOOL)animated{[super viewWillAppear:animated];[self.tableView reloadData];}

Vistas con tablas y “scroll”!

Muchas opciones de configuración en UITableView!

• Apariencia de filas y celdas: estilos de celda(UITableViewCellStyleDefault,...), otros “accesorios” (UITableViewCellAccessoryType)!

• Responder a eventos de selección: didSelectRowAtIndexPath:(NSIndexPath *)indexPath; willSelectRowAtIndexPath (NSIndexPath *)indexPath!

• El UITableViewControllerCrea automáticamente un Table view, es su “delegate” y “datasource”.!

• Se ocupa de acciones por defecto: reloadData al princripio, de-selecciona filas al navegar hacia atrás, ...!