App iPhone

Aplicaciones iPhoneA

PARTE 1: EJEMPLO DE APLICACIÓN: helloWorld_001

Inicio

Abrimos Xcode.

En la pantalla que aparece seleccionamos Create a new Xcode Project.

También se puede crear un nuevo proyecto seleccionando New Proyect desde el menú.

En el dialogo que aparece hacemos click sobre Single View Application.

Se generan 5 archivos importantes:

ViewController.h

Vamos al archivo ViewController.h, teniendo en la primera línea:

#import <UIKit/UIKit.h>

Con esto podremos utilizar el UIKit Framework.

A continuación nos encontramos con la siguiente línea de código:

@interface ViewController : UIViewController{

@ Transformará el código en una acción.

Indicamos que va a hacer uso de Interfaz Builder, para ello utilizamos IBOutlet, indicando que algo será escrito en UILabel.

IBOutlet UILabel *label;

Incluimos el botón en el código:

-(IBAction) hello : (id)sendr;

A continuación podemos ver el código completo de ViewController.h:

ViewController.m

Lo primero es implementar el método hello en ViewController.m:

-(IBAction) hello : (id)sendr{ }

Incluimos las instrucciones que ejecutará el método:

-(IBAction) hello : (id)sendr{Label.text = @”Hello World!”;

}

A continuación podemos ver el código completo de ViewController.m:

ViewController.xib

Vamos a ViewController.xib, abriéndose el Interfaz Builder:

Añadimos una Label a nuestra vista.

Añadimos un Round Rect Button a nuestra vista.

Asociamos Label con File´s Owner, seleccionando label en el cuadro que se abre:

Asociamos Round Rect Button con File´s Owner, seleccionando hello en el cuadro que se abre:

Ejecución

Vamos a Command y seleccionamos Run, con lo que se compilará y se ejecutará el proyecto:

PARTE 2: EJEMPLO DE APLICACIÓN: helloWorld_002

Inicio

Abrimos Xcode.

En la pantalla que aparece seleccionamos Create a new Xcode Project.

También se puede crear un nuevo proyecto seleccionando New Proyect desde el menú.

En el dialogo que aparece hacemos click sobre Master-Detail Application.

Se generan varios archivos importantes:

MasterViewController.m

Vamos al archivo MasterViewController.m, teniendo pequeñas porciones de código preprogramado.

Compilamos y ejecutamos sin hacer ninguna modificación del código, obteniendo una tabla en la pantalla del simulador.

La pantalla se muestra así debido a UITableViewController.

Lo primero que vamos a modificar en la tabla es el número de filas de la misma, para ello vamos a modificar el código dejándolo como se muestra a continuación (Cambiamos el return de 0 a 1):

Incluimos el código necesario para que nos muestre el texto que deseamos:

cell.textLabel.text = @”Hello World!”;

A continuación tenemos el código completo de MasterViewController.m:

Ejecución

Vamos a Command y seleccionamos Run, con lo que se compilará y se ejecutará el proyecto:

Si seleccionamos el texto vemos que se queda activo.

PARTE 3: EJEMPLO DE APLICACIÓN: helloWorld_003

Inicio

Abrimos Xcode.

En la pantalla que aparece seleccionamos Create a new Xcode Project.

También se puede crear un nuevo proyecto seleccionando New Proyect desde el menú.

En el dialogo que aparece hacemos click sobre Master-Detail Application.

Se generan varios archivos importantes:

MasterViewController.m

Vamos al archivo MasterViewController.m, teniendo pequeñas porciones de código preprogramado.

Compilamos y ejecutamos sin hacer ninguna modificación del código, obteniendo una tabla en la pantalla del simulador.

La pantalla se muestra así debido a UITableViewController.

Lo primero que vamos a modificar en la tabla es el número de filas de la misma, para ello vamos a modificar el código dejándolo como se muestra a continuación (Cambiamos el return de 0 a 1):

Incluimos el código necesario para que nos muestre el texto que deseamos:

cell.textLabel.text = @”Hello World!”;

Vamos a centrar el texto de nuestra aplicación, para ello vamos a utilizar el siguiente código:

[[cell textLabel] setTextAlignment : UITextAlignmentCenter];

Con esto le decimos a la celda con la etiqueta de texto (cell textLabel) que obedezca las instrucciones que se de setTextalignment, que en este caso será centrar el texto (UITextAlignmentCenter).

Vamos a colocar un botón Edit que nos permita eliminar el texto de nuestra aplicación. El código necesario para su creación se mostraba comentado cuando hemos creado este proyecto:

-(void) viewDidLoad{[super viewDidLoad];

}

A continuación tenemos el código completo de MasterViewController.m:

Ejecución

Compilamos y ejecutamos obteniendo lo siguiente:

PARTE 4: EJEMPLO DE APLICACIÓN: helloWorld_004

Inicio

Abrimos Xcode.

En la pantalla que aparece seleccionamos Create a new Xcode Project.

También se puede crear un nuevo proyecto seleccionando New Proyect desde el menú.

En el dialogo que aparece hacemos click sobre Single View Application.

Se generan varios archivos importantes:

ViewController.h

Vamos al archivo ViewController.h, añadiendo un Outlet y la acción del botón.

El código completo será el siguiente:

ViewController.m

Implementamos la acción:

-(IBAction) hello : (id)sender{text.label = @”Hello World!”;

}

El código completo será el siguiente:

Imagen de fondo

Arrastramos la imagen hasta nuestro proyecto, apareciendo un cuadro en el que tendremos que dejar marcada la opción Copy ítems into your destination group´s folder. Con esto nos aseguramos de que aunque cambie la imagen o sea borrada, se mantenga en nuestra aplicación.

La imagen tendrá que tener una dimensión de 320 x 480 píxeles y sólo podrá ser en formato PNG.

ViewController.xib

Para poder poner nuestra imagen de fondo tendremos que incluir un objeto Image View, seleccionando en el menú de la derecha la imagen que queramos poner de fondo.

Añadimos una Label a nuestra vista.

Añadimos un Round Rect Button a nuestra vista.

Asociamos Label con File´s Owner, seleccionando label en el cuadro que se abre:

Asociamos Round Rect Button con File´s Owner, seleccionando hello en el cuadro que se abre:

Compilamos y ejecutamos la aplicación, obteniendo el siguiente resultado:

PARTE 5: EJEMPLO DE APLICACIÓN: helloWorld_005

Inicio

Abrimos Xcode.

En la pantalla que aparece seleccionamos Create a new Xcode Project.

También se puede crear un nuevo proyecto seleccionando New Proyect desde el menú.

En el dialogo que aparece hacemos click sobre Single View Application.

Se generan varios archivos importantes:

Imágenes

Tenemos que tener 3 imágenes:

- Imagen de fondo: 320 x 480 píxeles.- Imagen que va a aparecer: 300 x 299 píxeles.- Icono: 57 x 57 píxeles.

Para añadir las imágenes arrastramos las mismas a nuestro proyecto.

Para poner el Icono de nuestra aplicación tendremos que ir al archivo helloWorld_005-info.plist, creamos un nuevo elemento (Icon files) y en item0 ponemos el nombre de la imagen que queremos como icono.

ViewController.h

Vamos al archivo ViewController.h, añadiendo dos Outlet y la acción del botón.

El código completo será el siguiente:

*label y *uiImageView son punteros, con esto decimos al Interfaz Builder que utilice la imagen y la etiqueta que hay en la dirección de memoria a la que apuntan dichos punteros.

@property declara que nuestro objeto tiene una propiedad con un tipo específico.

@synthesize implementa los métodos declarados en @property.

nonatomic indica que dejamos que Apple se encargue de la gestión, mientras que retain indica que nosotros vamos a gestionar el control de memoria.

Tenemos que añadir la acción del botón:

-(IBAction) buttonPressed : (id) sender;

ViewController.m

Lo primero será incluir @synthesize para que se implementen los métodos declarados en @property:

@synthesize label, uiImageView;

A continuación vamos a hacer que al pulsar el botón se muestre la etiqueta:

text.label = @”Hello World Again”;

También tenemos que conseguir que al pulsar el botón se muestre la imagen, para ello vamos a utilizar el método imageNamed, que nos proporcionará un puntero que apuntará a nuestra imagen:

UIImage *imageSource = [UIImage imageNamed : @”imagen.png”];

Con la siguiente línea de código vamos asociar la imagen que hay en la dirección a la que apunta *imageSource con la dirección a la que apunta *uiImageView:

uiImageView.image = imageSource;

El código completo será.

ViewController.xib

Lo primero será poner la imagen de fondo. A continuación colocaremos la etiqueta, el botón y la imagen que queramos que aparezca.

La imagen que queremos que aparezca la seleccionaremos en la opción Highlighted del menú de la derecha.

A continuación relacionaremos File´s Owner con los elementos que componen nuestra aplicación:

- Botón File´s Owner (Seleccionando buttonPressed).- File´s Owner Label (Seleccionando label).- File´s Owner ImageView (Seleccionando uiImageView).

Ejecución

Compilamos y ejecutamos el proyecto.