New Presentación de PowerPoint · 2013. 1. 16. · Experto en Desarrollo de Aplicaciones para Dispositivos Móviles © 2012-13 Depto. Ciencia de la Computación e IA Plataforma iOS

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-13 Depto. Ciencia de la Computación e IA

Plataforma iOS

Sesión 6: Guías de estilo y personalizaciones avanzadas


Plataforma iOS © 2012-13 Depto. Ciencia de la Computación e IA Guías de Estilo

Índice de contenidos• Guías de estilo en iOS

• Características principales de la plataforma iOS• Estrategias de diseño de aplicaciones• Principales tecnologías disponibles en iOS

• Personalizaciones avanzadas• Celdas• Modo edición de tablas

2



Guías de estilo en iOS• Adaptar en la medida de lo posible las guías de estilo que

plantea Apple a nuestras aplicaciones.• http://developer.apple.com/library/ios/#documentation/UserExperience/

Conceptual/MobileHIG/Introduction/Introduction.html

• ¿Qué ocurre si no seguimos los puntos básicos que indica Apple? • Nuestra aplicación puede ser rechazada en el proceso de revisión.• Los usuarios pueden no estar familiarizados con nuestra

aplicación y pueden llegar a no saber usarla adecuadamente.• Pocas posibilidades de promoción en iTunes (Apple).

Apple tiene muy en cuenta a la hora de destacar una aplicación si ésta cumple con las guías de estilo propuestas.

3

http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html






Aspectos a tener en cuenta en iOS (1)• La pantalla

• Es el componente más importante.• Todo usuario interactúa con la aplicación mediante la pantalla.• Tener en cuenta la resolución de la pantalla:

iPhone 4, 4S (Retina Display): 960 x 640 px. (3,5”)iPhone 5 (Retina Display): 1136 x 640 px. (4”)iPhone 3G, 3GS o iPod Touch: 480 x 320 px.iPad 1, 2: 1024 x 768 px.iPad 3 (Nuevo iPad): 2048 x 1536 pxiPad Mini: 1024 x 768 px

• Si desarrollamos una aplicación universal deberemos tener en cuenta estas resoluciones, o al menos las más utilizadas.

• Más resoluciones a tener en cuenta = más trabajo de diseño.

4



Aspectos a tener en cuenta en iOS (2)• Orientación del dispositivo.

• Apple obliga a que la aplicación esté preparada para funcionar en al menos dos posiciones:

Landscape right & Landscape left / horizontal oPortrait & Portrait UpsideDown / vertical

• Mejora la usabilidad de la aplicación.• Usamos el tipo enumerado: UIInterfaceOrientation• Método: shouldAutorotateToInterfaceOrientation• Ejemplo:

5

- (BOOL)shouldAutorotateToInterfaceOrientation: UIInterfaceOrientation)interfaceOrientation

{

// Return YES for supported orientations

return (interfaceOrientation == UIInterfaceOrientationPortrait);

}



Aspectos a tener en cuenta en iOS (3)• Los gestos multitáctiles

• Gestos = movimientos de los dedos sobre la pantalla para realizar distintas acciones.

• Actualmente iOS admite hasta 5 pulsaciones al mismo tiempo en pantalla.

• Mejora la usabilidad y hace más atractiva la aplicación.

6



Aspectos a tener en cuenta en iOS (4)• Los gestos multitáctiles (dos o más dedos)

• Existen 6 tipos de gestos que podemos detectar y procesar en iOS 5 (UIKit)

Arrastre en 4 direcciones (swipe). UISwipeGestureRecognizerArrastre en cualquier dirección (pan) UIPanGestureRecognizerRotación (rotation) UIRotationGestureRecognizerPellizco (pinch) UIPinchGestureRecognizerPulsación larga (long press) UILongPressGestureRecognizerPulsación corta (tap) UITapGestureRecognizer

• Existen otros gestos que están implementados por defecto en iOS, como el arrastre sencillo (drag).

• Para detectar gestos usaremos la clase UIGestureRecognizer• Los gestos se deben de utilizar de una forma lógica, como indica

la guía de estilo.

7

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UISwipeGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UISwipeGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UISwipeGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UISwipeGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPanGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UIPanGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPanGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UIPanGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIRotateGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UIRotationGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIRotateGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UIRotationGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPinchGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UIPinchGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPinchGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UIPinchGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UILongPressGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UILongPressGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UILongPressGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UILongPressGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UITapGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UITapGestureRecognizer

http://developer.apple.com/library/ios/documentation/UIKit/Reference/UITapGestureRecognizer_Class/Reference/Reference.html#//apple_ref/occ/cl/UITapGestureRecognizer



Aspectos a tener en cuenta en iOS (5)• La multitarea

• Multitarea = ejecución en segundo plano de varias aplicaciones.• Disponible a partir de iOS 4.• Apple “recomienda” que nuestra aplicación soporte multitarea.• Implementación muy sencilla (en un principio).

Métodos de la clase Delegate: applicationDidEnterBackground y applicationWillEnterForeground

• Varios puntos a tener en cuenta:- ¿La aplicación seguirá su proceso en segundo plano o se

detendrá?- ¿Qué hacemos con los sonidos?- ¿Y si tenemos peticiones a Internet activas?

8



Aspectos a tener en cuenta en iOS (6)• Preferencias y ayuda.

• Si la aplicación usa preferencias de configuración propias, éstas deberán aparecer en el panel de configuración de los ajustes del dispositivo (App “Ajustes”).

• Fichero “Settings bundle” de tipo plist (xml).

9



Aspectos a tener en cuenta en iOS (7)• Principales tecnologías anteriores a iOS 5

• Si la aplicación que desarrollemos permite hacer uso de cualquiera de las tecnologías disponibles en iOS: ¡Usadlas!

• Multitarea.• Imprimir (AirPrint).• iAD (publicidad)• Vista rápida de documentos.• Sonidos.• Control por voz (VoiceOver)• Menú contextual de edición en textos (copiar/pegar/seleccionar).• Teclado (personalizaciones, tipos).• Servicios de localización (GPS, Brújula, acelerómetro,

giroscopio...).• Notificaciones push, in-apps (micro-pagos).

10



Aspectos a tener en cuenta en iOS (8)• Principales tecnologías aparecidas en iOS 5, iOS 6

• iCloud (compartir en la nube).

• iMessage (mensajería instantánea).• Core Image (modificación avanzada de imágenes).• Airplay (mirroring, Apple TV).• Integración con Twitter y Facebook• Siri, Apple Maps, Step-By-Step Navigation

11






12



Personalizaciones avanzadas: Celdas• Muy habitual en el desarrollo de aplicaciones iOS.• Objetivos: conseguir un aspecto atractivo al usuario, mejorar la

usabilidad y distinguirnos del resto de aplicaciones.• Ejemplo: App Twinkle (cliente Twitter).

13



Programando celdas personalizadas (1)• Pasos a realizar (sin usar Story Boards):

• 1) Creamos la clase de la celda. Heredará de UITableViewCell y contendrá todos los elementos que queremos que tenga la celda (etiquetas, imágenes, campos de formulario, etc...).

• 2) Diseñamos la celda mediante Interface Builder: uso del componente Table View Cell

• 3) Pestaña Identity Inspector: escribimos el nombre de la clase que referencia a la celda.

• 4) Pestaña Attributes Inspector: escribimos un identificador para la celda, por ejemplo: TableViewCell

14



Programando celdas personalizadas (2)• 5) En el método cellForRowAtIndexPath deberemos de

inicializar la celda con el fichero Nib (Interface Builder) que hemos diseñado anteriormente:

15

-‐ (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"TableViewCell"; TableViewCell *cell = (TableViewCell*)[tableView dequeueReusableCellWithIdentifier: CellIdentifier]; if (cell == nil) { // Cargamos el Nib de la celda NSArray *array = [[NSBundle mainBundle] loadNibNamed:@"TableViewCell" owner:self options:nil]; cell = [array objectAtIndex:0]; // TODO: Faltan comprobaciones... } // Configuramos la celda cell.labelTitulo.text = [NSString stringWithFormat: @"Título noticia número %d", indexPath.row+1]; cell.labelTexto.text = @"Texto de pruebas..."; cell.labelAutor.text = @"Autor/es de la noticia"; cell.imagen.image = [UIImage imageNamed:@"logo_mvl.png"]; return cell;}






16



Edición y personalización de tablas (1)• Las tablas (TableView) se pueden

personalizar en su totalidad.• Objetivo: Añadir funcionalidades

que nos puedan ser de utilidad en nuestras aplicaciones.

• Se utilizan los elementos propios de la API de TableView del framework UIKit:• Botones de borrado.• Botón de nuevo.• Imagen de arrastre.

• Uso muy frecuente en aplicaciones de gestión como ToDos.

17



Edición y personalización de tablas (2)• Lista de propiedades personalizables más importantes y los

métodos de los protocolos UITableViewDelegate y UITableViewDataSource que las implementan.

18

Altura de la celda heightForRowAtIndexPath:

Número de secciones numberOfSectionsInTableView

Número de filas numberOfRowsInSection

Título para el encabezado de sección

titleForHeaderInSection

Celda en fila cellForRowAtIndexPath

http://developer.apple.com/library/IOs/documentation/UIKit/Reference/UITableViewDelegate_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDelegate/tableView:heightForRowAtIndexPath:

http://developer.apple.com/library/IOs/documentation/UIKit/Reference/UITableViewDelegate_Protocol/Reference/Reference.html#//apple_ref/occ/intfm/UITableViewDelegate/tableView:heightForRowAtIndexPath:



Programando el modo edición en tablas (1)• 1) Creamos el botón que ejecutará la acción de pasar a modo

de edición la tabla y le asignamos un Outlet.

• 2) Programamos la acción del botón de editar:• 2.1) Para comprobar si la tabla está ya en modo de edición

usamos el valor de la propiedad: editing del Table View.• 2.2) Si ya está en modo de edición, pasamos a modo normal la

tabla:

• 2.3) Si no está en modo de edición, pasamos a modo de edición:

19

[self.tableView setEditing:NO animated:NO];

[self.tableView setEditing:YES animated:NO];



Programando el modo edición en tablas (3)• El código de la acción del botón de editar quedaría algo similar

a lo siguiente:

20

-‐(void) editarTabla:(id)sender { if (self.editing) { [self.tableView setEditing:NO animated:NO]; [self.navigationItem.leftBarButtonItem setTitle:@"Editar"]; [self.navigationItem.leftBarButtonItem setStyle:UIBarButtonItemStylePlain]; } else { [self.tableView setEditing:YES animated:YES]; [self.navigationItem.leftBarButtonItem setTitle:@"Hecho"]; [self.navigationItem.leftBarButtonItem setStyle:UIBarButtonItemStyleDone]; } }



Programando el modo edición en tablas (4)• 3) Implementamos el borrado y la inserción de elementos:

21

-‐ (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { if (editingStyle == UITableViewCellEditingStyleDelete) { [self.arrayTareas removeObjectAtIndex:indexPath.row]; [self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationRight]; [self.tableView reloadData]; } else if (editingStyle == UITableViewCellEditingStyleInsert) { [self.arrayTareas insertObject:@"Otra tarea" atIndex:[self.arrayTareas count]]; [self.tableView insertRowsAtIndexPaths:[NSArray arrayWithObject: [NSIndexPath indexPathForRow:[self.arrayTareas count] inSection:0]] withRowAnimation:UITableViewRowAnimationFade]; [self.tableView reloadData]; }}



Programando el modo edición en tablas (5)• 4) Programamos el estilo para el modo de edición de cada fila

de la tabla.• Indicamos para cada fila si se puede borrar, añadir una nueva o

ninguna opción.

22

-‐ (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath: (NSIndexPath *)indexPath { if (self.editing == NO || !indexPath) return UITableViewCellEditingStyleNone; if (self.editing && indexPath.row == ([self.arrayTareas count])) //ultima fila { return UITableViewCellEditingStyleInsert; } else { return UITableViewCellEditingStyleDelete; } return UITableViewCellEditingStyleNone;}



Programando el modo edición en tablas (6)• 5) Implementamos el método de reordenación de las filas:

23

-‐ (void)tableView:(UITableView *)tableView moveRowAtIndexPath: (NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath{ NSString *item = [[self.arrayTareas objectAtIndex:fromIndexPath.row] retain]; [self.arrayTareas removeObject:item]; [self.arrayTareas insertObject:item atIndex:toIndexPath.row]; [item release];} -‐ (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath{ // Devolver NO si no queremos que el item se pueda mover return YES;}



¿Preguntas?

24

Documents

New Presentación de PowerPoint · 2013. 1. 16. · Experto en Desarrollo de Aplicaciones para Dispositivos Móviles © 2012-13 Depto. Ciencia de la Computación e IA Plataforma iOS