Introducción a iOS 7 - Departamento de Lenguajes y Sistemas

INTERACCIÓN PERSONA-­‐ORDENADOR 4º CURSO – GRADO EN I.I. TECNOLOGÍAS INFORMÁTICAS
iOS
Sevilla, 2014 Dpto. Lenguajes y Sistemas Informá?cos E. T. S. Ingeniería Informá?ca
Programación en iOS
Limitaciones de Programación •
•
•
•
•
•
•
Sólo una aplicación ac?va Sólo una ventana para cada aplicación Acceso limitado al sistema de archivos • Cada aplicación ?ene un espacio independiente (sandbox) donde se almacenas datos, preferencias, … • No es fac?ble acceder a ciertos puertos de red • Privilegios limitados (el usuario no puede acceder como usuario root) Tiempo de respuesta • Cuando un proceso tarda en ser ejecutado, el sistema lo elimina automá?camente Tamaño de pantalla • iPhone No Re?na: 320x480 • iPhone Re?na (2x): 640x960 • iPhone 5: 640x 1136 Recursos del sistema • RAM: 512 -­‐ 1024 MB total • Pero menos de la mitad, disponible de facto para una app • Se requiere ges?ón cuidadosa y “pesimista” del espacio • No existe recolector de basura (garbage collector), sus?tuido por la tecnología ARC No existe ratón ni teclado fsico
Diseño
Arquitectura MVC Modelo (Datos)
Información
.plist CoreData SQLite Controlador (Negocio)
IBOutlet
IBAc?on
UIViewController
Vista (Presentación)
UIView .storyboard IBOutlet Aspecto (propiedades para acceder a objetos UVIew) IBAc4on Comportamiento (métodos callback para responder a eventos)
Patrón delegado NSObject
Aplicación
• AppDelegate: Clase delegada de UIApplica?on • Comienza la aplicación con un controlador raíz UIResponder
Controlador Raíz
UIApplica4on
UIViewController
UIView
Arquitectura de una aplicación
NSObject
UIResponder
XYZAppDelegate
UIApplica4on
id<UIApplicationDelegate> delegate
UIWindow *keyWindow
+ (UIApplication *)sharedApplication
UIWindow *window
XYZViewController *viewController
@protocol UIApplica4onDelegate
(BOOL)
(void)
(void)
(void)
(void)
(void)
application:
didFinishLaunchingWithOptions:
applicationWillResignActive:
applicationDidEnterBackground:
applicationWillEnterForeground:
applicationDidBecomeActive:
applicationWillTerminate:
(UIApplication
(NSDictionary
(UIApplication
(UIApplication
(UIApplication
(UIApplication
(UIApplication
UIViewController
UIView *view
(void)viewDidLoad
(void)didReceiveMemoryWarning
XYZViewController
*) *)
*)
*)
*)
*)
*)
UIView
UIView
*superview
NSArray
*subviews
UIWindow *window
NSInteger tag
UIWindow
UIViewController *rootViewController
(void) makeKeyAndVisible
Una app es una instancia de UIApplica?on que delega en una instancia XYZAppDelegate XYZAppDelegate crea una ventana (UIWindow) que será la que gobierne la interacción con el usuario. • La interacción real se realiza en una vista (raíz) asociada a la ventana de la que de la que nace la estructura jerárquica de todas las vistas. • Cada vista es gobernada por un controlador de vista. • Los eventos son capturados por las vistas que lo transmiten a su controlador para que o bien los manipule o los suba a su supervista (hasta llegar en úl?ma instancia a la ventana y de ahí a la aplicación)
UILabel & UIBuron
NSObject
UIResponde
r
UIView
BOOL hidden
UIView
hidden indica si el objeto debe hacerse o no visible
UIControl
vistas que permiten mayor interacción (eventos) con el usuario
UILabel
text propiedad que almacena el texto de la etiqueta
UIButton
setTitle:forState para cambiar el texto (título) del botón según el
estado en el que se encuentre (UIControlState)
UIControl
UILabel
NSString *text
UIBuGon
(void)
setTitle: (NSString *)
forState: (UIControlState)
UIControlState enumerado con los distintos
estados en los que puede encontrarse un botón
Propiedades modificables en U?lidades/Inspector (Icono Atributos)
UIControlStateNormal
UIControlStateHighlighted
UIControlStateDisabled
UIControlStateSelected
UIControlStateApplication
UIControlStateReserved
Outlets
Outlet: Propiedad que conecta la vista (objeto en storyboard) con la clase que controla la vista principal.
• Mediante estas propiedades podemos modificar atributos de los objetos UIView desde el controlador. • Por defecto, suelen ser propiedades catalogadas como débiles
Para realizar la conexión 1. Se ac?va en el editor el modo asistente para enfrentar en dos ventanas el controlador (.h) 2. Se selecciona el control en la escena 3. Se arrastra al mismo ?empo que se pulsa Ctrl hasta la interfaz del controlador 4. Se selecciona del menú contextual saliente, la opción de añadir una conexión Outlet 5. Se fijan los parámetros del outlet (Name, Type, Storage)
6
Ac?ons
Actions son métodos para responder a eventos provocados por el
usuario.
La conexión se realiza como con las propiedades IBOutlet, salvo que en el menú contextual el valor para Connec?on debe ser Ac?on. • Name: Da nombre a la acción. El nombre escogido debe reflejar el comportamiento que será implementado. Ejemplos: showAlert, playCurrentTrack, shareImage (Evitar: buronClicked textChanged) • Type: El ?po del objeto control sobre el que se ha producido el evento. Puede ser genérico (id) o no (ej: UIBurom) • Event: Es el ?po de evento al que responderá la acción. Un mismo control puede recibir dis?ntos ?pos de eventos, aunque los más frecuentes son: que se ha pulsado o que ha cambiado su estado. • Arguments: Determina el número de argumentos del método, pudiendo ser: • Ninguno (método sin argumentos) • Sender: Añade un argumento (sender) que indica el objeto sobre el que se materializó el evento. • Este argumento permite compar?r una misma acción entre varios objetos con comportamiento similar. • Sender y Event: suministra detalles adicionales sobre el control y el evento que ha acontecido (es el menos frecuente)
7
Conexión y Problemas
La conexión se realiza del siguiente modo 1. Se ac?va el editor en modo asistente: escena frente a controlador (.h) 2. Se selecciona el control en la escena 3. Se arrastra al mismo ?empo que se pulsa Ctrl hasta la interfaz 4. Se selecciona del menú la opción de añadir una conexión Ac?on 5. Se fijan los valores de la acción La conexión genera un método vacío que debe ser implementada para reflejar la respuesta del controlador ante el evento acaecido en la vista Para asegurar que la conexión se ha realizado correctamente, podemos comprobarla en U?lidades/Inspector en el icono conexiones Desde este panel podemos destruir las conexiones que hemos realizado
8
Colores y e?quetas (tag)
Atributos de UIBuron
NSObject
UIColor
UIResponder
+ (UIColor *) redColor
+ (UIColor *) greenColor
+ (UIColor *) blueColor
UIViewController
UIView *view
ViewController
UIView
NSInteger tag
UIColor
*backgroundColor
UIControl
UIBuGon
• UIColor es una clase para manipular colores (modelo RGB alpha) • UIView presenta dos propiedades • background para establecer el color de fondo de la vista (con UIColor) • tag asocia un entero (constante) a cada vista para su iden?ficación única el el código • La vista principal de la aplicación es accesible por su controlador ViewController a través de la propiedad view de su superclase UIViewController
Deslizante (slider) Atributos de UISlider
NSObject
UIColor
UIResponder
+ (UIColor *) colorWithRed:(CGFloat)
green:(CGFloat)
blue:(CGFloat)
alpha:(CGFloat)
UIView
NSInteger tag
UIColor
*backgroundColor
CGFloat es una redefinición de double Cada tono se indica con un valor [0..1] UILabel
UIControl
NSString *text
UISlider
float *value
(void) setValue:(float)value
animated:(BOOL)animated
value propiedad que refleja el valor actual setValue:animated: fija el valor (YES es el valor más frecuente de animated:)
UISlider • Control deslizante para establecer un valor (float) dentro de un rango • El evento “Value Changed” se dispara cada vez que el valor de value es cambiado Conmutador y grupo
• UISwitch Controlador que muestra un conmutador (dos estados excluyentes) • on propiedad que refleja el estado del conmutador • UISegmentedControl Controlador que muestra un grupo con?guo de botones (relacionados operacionalmente) • selectedSegmentIndex propiedad que refleja el botón pulsado
NSObject
UIResponder
UIView
UIControl
UISwitch
BOOL on
UISegmentedControl
NSInteger selectedSegmentIndex
Selectores (Picker)
– Obje?vo: Escoger entre uno o varios conjuntos (components) de ítems (rows) – Aspecto: Rodillos con desplazamiento ver?cal destacando el ítem escogido – Delegación: Se apoya en dos protocolos: – UIPickerViewDelegate: Suministra los valores a mostrar en los ítems de los componentes – UIPickerViewDataSource: Define la estructura del selector (número de componentes y de ítems por componente)
NSObject
Selector de un componente con el ítem Albéniz seleccionado
UIResponder
UIView
UIPickerView
id<UIPickerViewDataSource> dataSource
id<UIPickerViewDelegate> delegate
-(NSInteger) selectedRowInComponent:(NSInteger)
@protocol UIPickerViewDataSource
(NSInteger) numberOfComponentsInPickerView:(UIPickerView*)
(NSInteger)
pickerView:(UIPickerView*)
numberOfRowsInComponent:(NSInteger)
@protocol UIPickerViewDelegate
(NSString *) pickerView:(UIPickerView*)
titleForRow:(NSInteger)
forComponent:(NSInteger)
Ejemplo (Picker)
UIViewController
NSArray *dataPicker
UIPickerView
id<UIPickerViewDataSource> dataSource
id<UIPickerViewDelegate> delegate
-(NSInteger) selectedRowInComponent:
@protocol UIPickerViewDataSource
(NSInteger) numberOfComponentsInPickerView:
(NSInteger) pickerView: numberOfRowsInComponent:
@protocol UIPickerViewDelegate
(NSString *) pickerView:titleForRow:forComponent:
Modelos (Bundle y plist)
NSArray
NSObject
NSBundle
+mainBundle
-(NSString *) pathForResource: (NSString *) name
ofType: (NSString *) extension
(id) arrayWithContentsOfFile: (NSString *) aPath
(BOOL) writeToFile: (NSString *) aPath
atomically: (BOOL) flag
NSDici4onary
(id) dictionaryWithContentsOfFile: (NSString *)
(BOOL) writeToFile: (NSString *) aPath
atomically: (BOOL) flag
La clase Bundle permite acceder a los recursos privados de una aplicación (imágenes, listas de propiedades, …) Las listas de propiedades (.plist) son una estrategia simple para implementar la persistencia de datos (modelos) Propiedad para almacenar el modelo
mainBundle da acceso al bundle pathForResource:ofType: devuelve la ubicación fsica plistPath del recurso (plist) para almacenar localmente el modelo en la propiedad (colección)
writeToFile:atomically: revierte los cambios hechos durante la ejecución al área privada
14
UIDatePicker UIDatePicker
• Selector (Picker) de fechas (NSDate)
• 4 componentes: día, hora, minutos, AM/PM
NSObject
UIResponder
NSFormaGer
NSDate
+ (NSDate*) date
UIView
NSDate Manejo de fechas • date: crea un ejemplar con la fecha actual
UIControl
NSDateFormaGer
+ (NSString *)localizedStringFromDate: (NSDate *)date
dateStyle: (NSDateFormatterStyle) dateStyle
timeStyle: (NSDateFormatterStyle) timeStyle
UIDatePicker
NSDate* date
- (void)setDate: (NSDate *) date
animate: (BOOL)
animated
date devuelva la fecha seleccionada
setDate:animate: fija la fecha
NSDateFormatter
Visualización de fecha en distintos formatos
NSDateFormatterStyle Tipo enumerado con los distintos estilos:
typedef enum { NSDateFormatterNoStyle,
NSDateFormatterShortStyle, NSDateFormatterMediumStyle,
NSDateFormatterLongStyle, NSDateFormatterFullStyle }
UIPickerView (2)
UIPickerView
id<UIPickerViewDataSource> dataSource
id<UIPickerViewDelegate> delegate
(NSInteger) selectedRowInComponent:
(void) selectRow:(NSInteger)
inComponent:(NSInteger)
animated:(BOOL)
(void) reloadComponent:(NSInteger)
@protocol UIPickerViewDelegate
(NSString *) pickerView:(UIPickerView*)
titleForRow:(NSInteger)
forComponent:(NSInteger)
(UIView *)
(void)
pickerView:
viewForRow:
forComponent:
reusingView:
(UIPickerView *)
(UIView *)
(NSInteger)
(UIView *)
pickerView:(UIPickerView *)
didSelectRow:(NSInteger)
inComponent:(NSInteger)
UIPickerView ofrece otros métodos para interacciones más ricas:
selectRow:inComponent:animated:
método para fijar el item seleccionado en un componente (en general,
el argumento animated se fija a TRUE)
reloadComponent:
método para actualizar los valores de los items de un componente
pickerView:viewForRow:forComponent:reusingView:
permite que los ítems sean objetos UIView (en vez de NSString)
pickerView:didSelectRow:inComponent:
método ejecutado por el selector tras seleccionar un item en un
componente (facilita responder de forma inmediata a los cambios de
selección)
@protocol UIPickerViewDataSource
(NSInteger) numberOfComponentsInPickerView:
(NSInteger) pickerView:numberOfRowsInComponent:
UIImage & UIImageView
Inspector/Atributos
UIImageView vista contenedora (visor) de imágenes UIView
• La vista UIImageView suele expandirse para ocupar toda la vista principal
• Mode (Atributos/Inspector) ajusta la visualización de la imagen en el visor
• Medidas/Inspector ajuste del tamaño del visor (X, Y, anchura y altura)
• Images.xcassets Almacén de las imágenes/iconos de la aplicación
NSObject
UIResponder
UIImage
+ (UIImage *) imageNamed: (NSString *)
imageNamed: Crea un objeto UIImage
desde la imagen (ej: .png) de Images.xcassets
UIView
Inspector/Medidas
UIImagetView
UIImage *image
(id) initWithImage: (UIImage *)
image imagen contenida en la vista (propiedad en Atributos/Inspector)
initWithImage: crea un objeto UIImageView con una imagen en Images.xcassets
17
Animaciones UIImageView
Las animaciones se consiguen mediante el cambio sucesivo de la imagen UIImage contenida en la vista UIImageView
• animationImages propiedad que almacena las imágenes UIImage usadas en un ciclo de la animación
• animationDuration propiedad que establece el tiempo empleado en mostrar un ciclo
• startAnimating
método para dar comienzo a la animación (cambio sucesivo y circular de las imágenes en animationImages)
• stopAnimating
método para dar por concluida la animación
• isAnimating
método booleano que indica si la animación está o no detenida
NSObject
UIImage
Imagen 0
Imagen 1
Imagen 2
Imagen 3
UIResponder
UIView
Animación basada en un ciclo de cuatro imágenes
UIImagetView
La duración del ciclo influirá a la hora de ver el avance
del círculo rojo en la circunferencia
NSArray *animationImages
NSTimeInterval animationDuration
(void) startAnimating
(void) stopAnimating
(BOOL) isAnimating
18