Documentos de Académico
Documentos de Profesional
Documentos de Cultura
con Storyboard
Da 2: Storyboard, UIViewController y
UITableViewController.
mircoles, 24 de abril de 13
Taller iOS: Da 2.
Interface Builder (Storyboard)
Introduccin (MVC grfico) y multiples escenas
Controlador de controladores
Navigation Controller & Tab Bar Controller.
View Controller
Ciclo de vida
Objetos de clase UIView
View, Label, Image, Image View, Button & Scroll View.
Table View Controller
Table View, Cells y Table View Controller.
Ejercicio: Aplicacin de portafolio. (Caso de estudio)
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
Define cul es el
controlador inicial.
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
Editor estndar
mircoles, 24 de abril de 13
Interface Builder
Editor estndar
mircoles, 24 de abril de 13
Editor adjunto
Interface Builder
Editor estndar
mircoles, 24 de abril de 13
Editor adjunto
Editor de versiones
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
Panel izquierdo
(explorador de archivos)
mircoles, 24 de abril de 13
Interface Builder
Panel izquierdo
(explorador de archivos)
mircoles, 24 de abril de 13
Panel inferior
(Debugging)
Interface Builder
Panel izquierdo
(explorador de archivos)
mircoles, 24 de abril de 13
Panel inferior
(Debugging)
Panel derecho
(Inspector de
archivos y objetos)
Interface Builder
Panel izquierdo
(explorador de archivos)
Panel inferior
(Debugging)
Panel derecho
(Inspector de
archivos y objetos)
Organizador
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
Inspector de archivo
(del .storyboard)
mircoles, 24 de abril de 13
Interface Builder
Inspector de archivo
(del .storyboard)
mircoles, 24 de abril de 13
Ayuda rpida
Interface Builder
Inspector de archivo
(del .storyboard)
mircoles, 24 de abril de 13
Ayuda rpida
Identidad
Interface Builder
Inspector de archivo
(del .storyboard)
Ayuda rpida
Atributos
mircoles, 24 de abril de 13
Identidad
Interface Builder
Inspector de archivo
(del .storyboard)
Ayuda rpida
Identidad
Tamao y posicin
Atributos
mircoles, 24 de abril de 13
Interface Builder
Inspector de archivo
(del .storyboard)
Ayuda rpida
Identidad
Conexiones
(con el controlador)
Tamao y posicin
Atributos
mircoles, 24 de abril de 13
Controlador de controladores
Tab Bar Controller Es una clase que implementa
mecanismos para controlar varios View Controllers
simultaneos y la interfaz grfica para controlarlos.
mircoles, 24 de abril de 13
UITabBar
Almacena un arreglo de Tab Bar Items.
UITabBarItem
Es un objeto que opera de modo estricto.
Permite mostrar una imagen (slo en negativo).
Permite especificar un nombre para el item.
Est conectado a un controlador o a un Navigation Controller.
Funciona en modo radio-button.
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
Controlador de controladores
Navigation Controller Es una clase que implementa
mecanismos para controlar varios View Controllers
secuenciales. Tambin hereda elementos grficos para
controlar el flujo.
mircoles, 24 de abril de 13
Navigation Controller
Creacin
initWithRootViewController:
Mtodos importantes
- (void)pushViewController:(UIViewController *)viewController animated:
(BOOL)animated
- (UIViewController *)popViewControllerAnimated:(BOOL)animated
- (NSArray *)popToViewController:(UIViewController *)viewController
animated:(BOOL)animated
- (NSArray *)popToRootViewControllerAnimated:(BOOL)animated
Propiedades
@property (nonatomic, copy) NSArray *viewControllers
@property (nonatomic, readonly) UINavigationBar *navigationBar
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
mircoles, 24 de abril de 13
Interface Builder
Outlet
Es la instancia de un objecto declarado en el
Interface Builder.
View
(storyboard)
ViewController
mircoles, 24 de abril de 13
io
n
A
ct
Ou
tl
et
Action
Es un evento en la interfaz grfica, puede ser desde
un Touch, un keyDown del teclado, etc.
Interface Builder
IBOutlet
Es un identificador sincronizar un outlet en el Interface
Builder.
@interface ViewController : UIViewController
@property (nonatomic, weak) IBOutlet UILabel *pantalla;
@end
IBAction
Es un tipo datos void con el nico propsito de sincronizar
una accin con un evento en el Interface Builder.
View
(storyboard)
Outlet
ViewController
mircoles, 24 de abril de 13
Action
@synthesize
@property (nonatomic, weak) IBOutlet UILabel *label;
@property (nonatomic, strong) IBOutlet UIView *view;
View
(storyboard)
label
view
ViewController
mircoles, 24 de abril de 13
@synthesize
@property (nonatomic, weak) IBOutlet UILabel *label;
@property (nonatomic, strong) IBOutlet UIView *view;
weak Se utiliza con Outlets principalmente; son
subviews de otros views que hemos aadido a
las escenas en el storyboard.
View
(storyboard)
label
view
ViewController
mircoles, 24 de abril de 13
@synthesize
@property (nonatomic, weak) IBOutlet UILabel *label;
@property (nonatomic, strong) IBOutlet UIView *view;
weak Se utiliza con Outlets principalmente; son
subviews de otros views que hemos aadido a
las escenas en el storyboard.
View
(storyboard)
label
view
ViewController
mircoles, 24 de abril de 13
@synthesize
@property (nonatomic, weak) IBOutlet UILabel *label;
@property (nonatomic, strong) IBOutlet UIView *view;
weak Se utiliza con Outlets principalmente; son
subviews de otros views que hemos aadido a
las escenas en el storyboard.
View
(storyboard)
label
view
ViewController
mircoles, 24 de abril de 13
@synthesize
@property (nonatomic, weak) IBOutlet UILabel *label;
@property (nonatomic, strong) IBOutlet UIView *view;
weak Se utiliza con Outlets principalmente; son
subviews de otros views que hemos aadido a
las escenas en el storyboard.
View
(storyboard)
mircoles, 24 de abril de 13
label
view
ViewController
View Controller
UIViewController
Es una clase que proporciona control sobre las vistas en las
aplicaciones para iOS.
Hereda de UIResponder (que a su vez, hereda de NSObject).
Uso comn: Subclase
Al disear nuestras propias aplicaciones con necesidades especficas,
hacemos subclases de UIViewController para aadir ah la
funcionalidad deseada o requerida.
Cada escena en el Storyboard utiliza un View Controller.
Si requerimos funcionalidad especfica para una escena, creamos una
subclase de UIViewController y le decimos que use la nuestra.
mircoles, 24 de abril de 13
View Controller
@property (nonatomic, retain) UIView *view
UIViewController
mircoles, 24 de abril de 13
View Controller
@property (nonatomic, retain) UIView *view
UIViewController
mircoles, 24 de abril de 13
View Controller
@property (nonatomic, retain) UIView *view
mircoles, 24 de abril de 13
UIViewController
View Controller
Inicializacin iOS 4
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)nibBundle
UIViewController
mircoles, 24 de abril de 13
View Controller
Inicializacin iOS 4
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)nibBundle
Propiedades
@property (nonatomic, retain) UIView *view
@property (nonatomic, copy) NSString *title
@property (nonatomic, readonly, retain) UIStoryboard *storyboard
UIViewController
mircoles, 24 de abril de 13
View Controller
Inicializacin iOS 4
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)nibBundle
Propiedades
@property (nonatomic, retain) UIView *view
@property (nonatomic, copy) NSString *title
@property (nonatomic, readonly, retain) UIStoryboard *storyboard
Eventos
- (void)loadView
- (void)viewDidLoad
UIViewController
mircoles, 24 de abril de 13
View Controller
Inicializacin iOS 4
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)nibBundle
Propiedades
@property (nonatomic, retain) UIView *view
@property (nonatomic, copy) NSString *title
@property (nonatomic, readonly, retain) UIStoryboard *storyboard
Eventos
- (void)loadView
- (void)viewDidLoad
No recomendable si
usas Storyboard
UIViewController
mircoles, 24 de abril de 13
View Controller
Inicializacin iOS 4
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)nibBundle
Propiedades
@property (nonatomic, retain) UIView *view
@property (nonatomic, copy) NSString *title
@property (nonatomic, readonly, retain) UIStoryboard *storyboard
Eventos
- (void)loadView
- (void)viewDidLoad
No recomendable si
usas Storyboard
(void)viewWillAppear:(BOOL)animated
(void)viewDidAppear:(BOOL)animated
(void)viewWillDisappear:(BOOL)animated
(void)viewDidDisappear:(BOOL)animated
mircoles, 24 de abril de 13
UIViewController
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
Ejemplo
LoginViewController *controller =
[self.storyboard instantiateViewControllerWithIdentifier:@"LoginIdentifier"];
[self.navigationController pushViewController:controller animated:YES];
mircoles, 24 de abril de 13
View Controller
Calculadora
View
(storyboard)
Calculadora
UIViewController
mircoles, 24 de abril de 13
View Controller
Calculadora
View
(storyboard)
Calculadora
UIViewController
mircoles, 24 de abril de 13
View Controller
Calculadora
pr
e
si
on
ar
D
ig
it
o:
Calculadora
UIViewController
mircoles, 24 de abril de 13
View
(storyboard)
View Controller
Calculadora
View
(storyboard)
pr
es
io
na
rO
pe
ra
d
or
pr
e
si
on
ar
D
ig
it
o:
Calculadora
UIViewController
mircoles, 24 de abril de 13
View Controller
Calculadora
View
(storyboard)
ra
d
or
pr
e
pr
es
io
na
rO
r:
pe
do
ra
pe
:
on )
nC le
i ub
ac do
er (
op r n
tu
re
UIViewController
mircoles, 24 de abril de 13
si
tO
on
se
ar
D
ig
it
o:
Calculadora
View Controller
Calculadora
View
(storyboard)
:
or
ra
d
pe
rO
es
io
na
pr
UIViewController
mircoles, 24 de abril de 13
t:
se
tT
ex
r:
do
:
on )
nC le
i ub
ac do
er (
op r n
tu
re
ra
pe
pr
e
si
tO
on
se
ar
D
ig
it
o:
Calculadora
Calculadora Algebraica
View
(storyboard)
Calculadora
ViewController
mircoles, 24 de abril de 13
Calculadora Algebraica
View
(storyboard)
Calculadora
ViewController
mircoles, 24 de abril de 13
Calculadora Algebraica
pr
e
si
o
na
rS
bo
lo
Calculadora
ViewController
mircoles, 24 de abril de 13
View
(storyboard)
Calculadora Algebraica
View
(storyboard)
pr
es
io
na
rE
nt
pr
e
er
:
si
o
na
rS
bo
lo
Calculadora
ViewController
mircoles, 24 de abril de 13
Calculadora Algebraica
View
(storyboard)
rE
pr
es
io
na
evaluarExpresion:
return (double)
ViewController
mircoles, 24 de abril de 13
nt
pr
e
er
:
si
o
na
rS
bo
lo
Calculadora
Calculadora Algebraica
View
(storyboard)
er
:
nt
rE
pr
ViewController
mircoles, 24 de abril de 13
t:
es
io
na
evaluarExpresion:
return (double)
se
tT
ex
pr
e
si
o
na
rS
bo
lo
Calculadora
UIImage
UIResponder
UIView
UIImageView
mircoles, 24 de abril de 13
UILabel
UIControl
UIScrollView
UIButton
UITableView
CGSize
C struct con dos CGFloats dentro: width & height
CGSize s = CGSizeMake(100.0, 200.0);
s.height += 50;
// incrementa el tamao 50 puntos a lo alto
CGRect
C struct con un CGPoint llamado origin y un CGSize llamado size
CGRect aRect = CGRectMake(x, y, width, height);
aRect.size.height += 45;
// incrementa la altura del rectngulo
aRect.origin.x += 30;
// mueve el rectngulo a la derecha
mircoles, 24 de abril de 13
UIView
UIView Define un rea rectangular en pantalla.
Se pueden agregar y remover views
[self.view addSubview:subview];
if(subview.superview)
[subview removeFromSuperview];
mircoles, 24 de abril de 13
UIView
UIView Define un rea rectangular en pantalla.
Se pueden agregar y remover views
[self.view addSubview:subview];
if(subview.superview)
[subview removeFromSuperview];
Atributos de tamao y posicin
@property CGRect bounds;
UIView
UIView Atributos ms importantes
@property(nonatomic)
@property(nonatomic,
@property(nonatomic)
@property(nonatomic,
NSInteger tag;
copy) UIColor *backgroundColor;
UIViewContentMode contentMode;
getter=isHidden) BOOL hidden;
Ejemplos de uso:
myView.tag = 3;
myView.backgroundColor = [UIColor whiteColor]; // clearColor
myView.contentMode = UIViewContentModeScaleToFill;
[myView setHidden:YES];
if ([myView isHidden]) {
}
mircoles, 24 de abril de 13
Creando views
Interface Builder Arrastras el objeto UIView a una escena.
Si necesitas conectar el Outlet (instancia de ese objeto) con el
Controlador, utilizas un IBOutlet. La instancia se crear y destruir
automticamente.
Cdigo alloc & initWithFrame:
Enva siempre el frame para evitar comportamiento inesperado:
CGRect rect = CGRectMake(20, 20, 100, 30);
UIView *view = [[UIView alloc] initWithFrame:rect];
[self.view addSubview:view];
mircoles, 24 de abril de 13
Creando views
Interface Builder Arrastras el objeto UIView a una escena.
Si necesitas conectar el Outlet (instancia de ese objeto) con el
Controlador, utilizas un IBOutlet. La instancia se crear y destruir
automticamente.
Cdigo alloc & initWithFrame:
Enva siempre el frame para evitar comportamiento inesperado:
CGRect rect = CGRectMake(20, 20, 100, 30);
UIView *view = [[UIView alloc] initWithFrame:rect];
[self.view addSubview:view];
mircoles, 24 de abril de 13
UILabel
mircoles, 24 de abril de 13
UILabel
UILabel Crea un rea rectangular donde se puede escribir texto
Atributos ms importantes:
@property
@property
@property
@property
@property
(nonatomic,
(nonatomic,
(nonatomic,
(nonatomic)
(nonatomic)
Ejemplo de uso:
label.text = @Hello!;
label.textColor = [UIColor greenColor];
label.font = [UIFont fontWithName:@Helvetica size:15.0];
[label setLineBreakMode:NSLineBreakByWordWrapping];
[label setNumberOfLines:0];
mircoles, 24 de abril de 13
UIImage
mircoles, 24 de abril de 13
UIImage
UIImage Carga una imagen a partir de un archivo o contexto
Mtodos ms importantes:
+ (UIImage *)imageNamed:(NSString *)imageName
- (id)initWithData:(NSData *)data
Ejemplo de uso:
UIImage *image = [UIImage imageNamed:@home.png];
UIImage *image = [[UIImage alloc] initWithData:data];
mircoles, 24 de abril de 13
UIImageView
mircoles, 24 de abril de 13
UIImageView
UIImageView Es una clase contenedora para mostrar imgenes
Mtodo ms importante:
- (id)initWithImage:(UIImage *)image
Ejemplo de uso:
UIImage *image = [UIImage imageNamed:@home.png];
UIImage *imageView = [[UIImageView alloc] initWithImage:image];
mircoles, 24 de abril de 13
UIButton
mircoles, 24 de abril de 13
UIButton
UIButton Es un area rectangular que permite al usuario interaccin
Los botones tienen estados de control:
UIControlStateNormal
UIControlStateHighlighted
UIControlStateSelected
UIControlStateDisabled
Mtodo ms popular
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
Ejemplo de uso:
[button setTitle:@"Hola mundo" forState:UIControlStateNormal];
[button setTitle:@"Ouchs!" forState:UIControlStateHighlighted];
mircoles, 24 de abril de 13
UIButton
mircoles, 24 de abril de 13
UIButton
UIButton Ms mtodos populares
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state;
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state;
- (void)setImage:(UIImage *)image forState:(UIControlState)state;
- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state;
Ejemplo de uso:
[button setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
[button setTitleColor:[UIImage imageNamed:@imagen.png]
forState:UIControlStateNormal];
mircoles, 24 de abril de 13
UIButton
UIButton Mtodo de clase
+ (id)buttonWithType:(UIButtonType)buttonType;
Ejemplo de uso:
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(x, y, width, height);
mircoles, 24 de abril de 13
UIButton
UIButton Mtodo de clase
+ (id)buttonWithType:(UIButtonType)buttonType;
Ejemplo de uso:
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(x, y, width, height);
Ejemplo de uso:
[button addTarget:self action:@selector(tapButton:)
forControlEvents:UIControlEventTouchUpInside]
- (void)tapButton:(id)sender {
}
mircoles, 24 de abril de 13
UIScrollView
UIScrollView Es una clase que provee soporte para mostrar contenido ms
largo de lo que puede caber en pantalla.
Habilita al usuario mtodos para su interaccin con gestos automticamente.
mircoles, 24 de abril de 13
UIWebView
UIWebView Es una instancia del motor de Safari para iOS.
Mtodos importantes
-
(void)loadRequest:(NSURLRequest *)request
(void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL
(void)reload
(void)stopLoading
- (void)goBack
- (void)goForward
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
UITableViewController
mircoles, 24 de abril de 13
UITableViewController
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13
Datasoure
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
(NSInteger)section
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
mircoles, 24 de abril de 13
Datasoure
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
(NSInteger)section
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
Delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
(NSIndexPath *)indexPath
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
mircoles, 24 de abril de 13
Ejercicios
mircoles, 24 de abril de 13
mircoles, 24 de abril de 13