vistas y vistas personalizadas

Índice de hoy!
• Repaso
opciones diseño navegación!
- Tab, Navigation y Tablas!
- Vistas “personalizadas” – Pintar directamente en pantalla!
• Transferir
Repaso diseños de navegación y
vistas personalizadas!
al dispositivo!
• Aprovechando
las “ventajas” del hardware móvil: sensores!
- Eventos “touch”!
- Vistas web, mapas, localización: mapKit!
- Otros sensores: giróscopo, acelerómetro, cámara: motionKit!
25 Febrero!
Ana C. Murillo!
Control de navegación: “navigation
controlers”!
Barra de navegación:!
Barra de “tabs”:!
UINavigationController!
UITabBarController!
Híbrido ...!
Esquema general!
• Crear
proyecto nuevo!
- Window-based: solo ventana “base”, ninguna “subview” añadida.!
- View-based, Navigation-based y Tab-based incluyen
automáticamente una subview a la ventana principal inicializada de la
manera correspondiente en cada caso!
- (void)applicationDidFinishLaunching:(UIApplication *)application {!
... !
ó [window addSubview:[(my)viewController view]];!
//inicializa por defecto el viewController con appNameViewController (UIView) en
MainWindow.xib!
ó [window addSubview:[(my)navigationController view]]; !
//inicializa por defecto con RootViewController (que es una tableView) en MainWindow.xib!
ó [window addSubview:[(my)tabBarController view]]; //LO MISMO QUE!
[window addSubview:(my)tabBarController.view];!
[window makeKeyAndVisible];!
Esquema general!
• Crear
Vistas con tablas!
! Class: ! UITableView, UITableViewCell, UITableViewController
Protocols: UITableViewDelegate, UITableViewDataSource!
proyecto nuevo!
:UIScrollView, 1columna, varias filas/secciones!
- Window-based: solo ventana “base”, ninguna “subview” añadida.!
- View-based, Navigation-based y Tab-based incluyen
automáticamente una subview a la ventana principal inicializada de la
manera correspondiente en cada caso!
UITableViewStylePlain!
Cabecera tabla!
UITableViewStyleGrouped!
Cabecera tabla!
Cabecera sección!
Cabecera sección!
Celda!
• Y
personalizar (my) viewControllers antes de hacer el
“addsubview” (código o IB)!
Celda!
Pie sección!
Pie sección!
Sección!
//inicializar viewController!
Sección!
!
//inicializar viewController inicial y hacer “push” en la pila del navigationControler
!
Pie tabla!
Pie tabla!
//inicializar viewControllers necesarios y “rellenar” vector del tabBarControler
Vistas con tablas!
Vistas con tablas: demo!
! Class: ! UITableView, UITableViewCell, UITableViewController
Protocols: UITableViewDelegate, UITableViewDataSource!
Usually:!
UITableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>!
DataSource: Qué se ve
(datos) y sus propiedades!
• NSArray !
• Cuántas secciones y filas?!
• Data for a given [section, row]!
• Contenido de headers y footers.!
• Propiedades de “edición” de
elementos de la tabla: insert, rearrange,
delete!
Delegate: Cómo se ve y qué
ocurre con la vista (eventos)?!
• Tamaño de celdas, filas, cabeceras!
• Estilo de celdas!
• “Eventos” de celda_va_a_aparecer!
• “Eventos” de fila_seleccionada y
permisos de ser seleccionado o no!
• Auto-select/deselect filas si hace falta!
• Recarga datos antes de hacerse visible.!
• Otros: edit button, flashes scroll, deja
sitio para el teclado si hace falta!
Añadimos vista de tabla a la “agenda” base!
(más avanzado: ejemplo “The Elements”)!
Vistas personalizadas!
• Vista
(UIView): área rectangular de la pantalla!
• Dibuja
y/o maneja eventos en esa zona!
• Jerarquía
• Una
de vistas: !
superview: - (UIView *) superview !
• Varias
(o ninguna) subviews: - (NSArray *) subviews !
! El orden importa ! pila con transparencias!!
Vistas personalizadas!
• Normalmente
con I.Builder, pero a veces es necesario diseñar
vista “manual”: dibujo personalizado y/o manejar
eventos(siguiente bloque).!
• Superposición
• Podemos
utilizar transparencias para ver las sub-vistas de
abajo:!
• Al
dibujar, 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
• CGFloat
en pantalla ! “tipo C”: !
(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)!
entre vistas: se ve la que está más arriba!
Dibujar en pantalla!
(local): alto y largo de la
vista. Se usa cuando se está
implementando una vista!
• Bounds
y center (global):
rectángulo que contiene a la
vista. Centro relativo a la superview. Se usa para posicionar la
vista dentro de su “superview”.!
• Frame
• Origen: arriba
• Frame
a la izquierda!!!
>= bounds (rotaciones)!
View B bounds: ((0,0),(200,250)) !
View B frame: ((140,65),(320,320)) !
View B center: (300, 225)!
Dibujar en pantalla!
• Subclase
de UIView: implementar el método drawRect!
Dibujar en pantalla!
• Contexto
• Determina
! - (void)drawRect:(CGRect)clipRect;!
• Sólo
• Se
• 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!
• Path
dónde va el dibujo (pantalla, pdf,...)!
dura una ejecución de drawRect (nunca almacenar)!
obtiene el contexto actual: !
" " CGContextRef context = UIGraphicsGetCurrentContext();!
• Estilo
del dibujo. Se pueden configurar múltiples opciones
(fuente, color, tamaño,...)!
" "
CGContextSetLineWidth(context, 1.0); !
DIBUJAR EN PANTALLA!
a dibujar: !
• Empezar
• Mover
!
del dibujo: !
el path: CGContextBeginPath(context);!
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);!
puede almacenar un path para reutilizarlo, usando CGPath en
lugar de CGContext!
• Se
DEMO: happy!
Vistas con imágenes!
Mostrar una imagen “grande” en un “scroll view”!
UIImage *image = [UIImage imageNamed:@"smartphones.jpg"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect screenBounds = [[UIScreen mainScreen] bounds];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:screenBounds];
[scrollView addSubview:imageView];
scrollView.contentSize = image.size;
[self.view addSubview:scrollView];!
Transferir al dispositivo!