Programar para Iphone desde uno. UIView. Nivel Piolín.

Después de publicar el Nivel Tarzán, en el que explico el funcionamiento básico de la creación de botones, así como su manejo mediante código. Ahora vuelvo para explicaros el funcionamiento de las Vistas en el Nivel Piolín.
Las Vistas son de gran importancia y es fundamental conocer su funcionamiento, ya que, para que queremos programar un algoritmo si luego no sabemos mostrar su resultado por pantalla.

Empezamos:
Como este es el Artículo “Programar para Iphone desde Uno” me basare en el anterior, “desde Cero” ,y doy por sabidas las cosas expuestas en él.

Explicación del ejemplo:

Pretendo partir la pantalla en dos vistas, he ir cambiando lo mostrado en una de estas vistas según pulse unos botones que están en la otra vista.

Creación del proyecto:

1.- Abrimos xcode.app y creamos un proyecto de tipo window.

Definición de Objetos y Acciones:

Hay que entender, que una Vista (UIView), no es más que un trozo de pantalla. Bueno también puede ser la pantalla entera.

En un principio podemos pensar que únicamente necesitaremos dos Vistas, pero en realidad necesitaremos seis.

Una que ocupará toda la pantalla, y será la principal, sobre la que van incrustadas las demás. No es imprescindible para este programa hacer esto, pero si es recomendable ponerla siempre, para cambiar en cualquier momento la pantalla al completo. Esta será nuestra supervista.

Otras dos, que iran sobre la anterior, y que dividirán la pantalla en dos partes iguales. Estas serán las vistas contenedoras, supervistas de las siguientes.

Tres más, del mismo tamaño que las anteriores. Una con los botones, que la cargaremos en la división superior de la pantalla, y las otras dos que iran alternandose a la hora de cargarse en la división inferior. Pero esto lo veremos luego.

2.- Definimos nuestros objetos y las dos acciones en el Archivo.h.

#import <UIKit/UIKit.h>
@class VISTASViewController;
@interface VISTASAppDelegate : NSObject <UIApplicationDelegate>
{
IBOutlet UIWindow *window;

IBOutlet id VISTA_PRINCIPAL;
IBOutlet id VISTA_ABAJO;
IBOutlet id VISTA_ARRIBA;

IBOutlet id VISTA_ARRIBA_BOTONES;
IBOutlet id VISTA_ABAJO_1;
IBOutlet id VISTA_ABAJO_2;

IBOutlet id BOTON_VISTA_ABAJO_1;
IBOutlet id BOTON_VISTA_ABAJO_2;
}

@property (nonatomic, retain) UIWindow *window;

- (IBAction) PULSAR_BOTON_VISTA_ABAJO_1: (id) sender;
- (IBAction) PULSAR_BOTON_VISTA_ABAJO_2: (id) sender;
@end

Creación de interface y asignación de elementos:

3.- Ahora hacemos doble click sobre el archivo.xib para abrir y editar con el interface builder nuestra pantalla.

Hay dos maneras de colocar una vista en el sitio que quieras. Una de ellas es mediante código, asignandoles las coordenadas (en ese caso solo necesitaríamos 4 vistas) y la otra es tener vistas contenedoras colocadas en su sitio mediante el interface builder sobre las que cargaremos las vistas que realmente queremos mostrar. Digamos que tendríamos vistas auxiliares. A continuación entendereis esto de lo que hablo.

Insertamos en nuestra ventana una UIView que ocupe todo. 320 x 480. La vinculamos pulsando el Control con VISTA_PRINCIPAL.

Sobre esta insertaremos otra que ocupe la mitad superior. 320 x 240 en (0,0). La vinculamos con VISTA_ARRIBA.

Y otra en la mitad inferior. 320 x 240 en (0,240). La vinculamos con VISTA_ABAJO.

Ahora crearemos otra UIView, pero esta vez arrastrando desde el library hasta el mainwindow.xib, hacemos doble click sobre ella y le ponemos de dimensiones 320 x 240. Hacemos dos copias,  les ponemos a las tres distintos nombres. Las vinculamos pulsando el Control de App Delegate  hasta las vistas, ya sea hasta la ventana que se abre al hacer doble click o hasta el nombre del archivo.

También vincularemos los botones con la acciones. Los botone los creamos en la vista superior. Deberiais saber hacerlo.

A las vistas inferiores que hemos creado les añadimos cualquier elemento. Solo para distinguirlas.

Implementación de funciones:

Como ya lo tenemos todo vinculado, es hora de implementar nuestra sencilla función.

4.- Cerramos interface builder y nos vamos al Archivo.m. Allí escribiremos nuestras dos funciones de pulsar botón y usaremos la función applicationDidFinishLaunching para inicializar la ventana:

- (void)applicationDidFinishLaunching:(UIApplication *)application

{
// Override point for customization after app launch
[window addSubview:VISTA_PRINCIPAL];
[VISTA_PRINCIPAL addSubview:VISTA_ARRIBA];
[VISTA_PRINCIPAL addSubview:VISTA_ABAJO];
[VISTA_ARRIBA addSubview:VISTA_ARRIBA_BOTONES];
[VISTA_ABAJO addSubview:VISTA_ABAJO_1];
[window makeKeyAndVisible];
}

- (IBAction) PULSAR_BOTON_VISTA_ABAJO_1: (id) sender
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationTransition:(UIViewAnimationTransitionCurlUp) forView:VISTA_ABAJO cache:NO];
[VISTA_ABAJO_2 removeFromSuperview];
[VISTA_ABAJO addSubview:VISTA_ABAJO_1];
[UIView commitAnimations];
}

- (IBAction) PULSAR_BOTON_VISTA_ABAJO_2: (id) sender
{
[VISTA_ABAJO_1 removeFromSuperview];
[VISTA_ABAJO addSubview:VISTA_ABAJO_2];
}

Con el metodo addSubview de las UIView, cargamos sobre una Vista otra vista. Y con el método removeFromSuperview, lo que hacemos es eliminar la vista de donde sea que este cargada.

En la función PULSAR_BOTON_VISTA_ABAJO_2 he puesto el cambio de vista normal y corriente y en la función PULSAR_BOTON_VISTA_ABAJO_2 lo he puesto para que sea animado.

5.- Compilamos y comprobamos el funcionamiento.

Espero que haya sido de utilidad y para cualquier duda estamos en los foros. También podeis dejar comentarios.

Otros Artículos de la serie:

Programar para Iphone desde cero. UIButton. Nivel Tarzán.

Programar para Iphone desde dos. UITextField. Nivel Barragán.

Programar para Iphone desde tres. NSMutableArray. Nivel Luis Aragonés.

Programar para Iphone desde cuatro. Controllers. Nivel Cantinflas.

6 Responses to “Programar para Iphone desde uno. UIView. Nivel Piolín.”

1. Resident says:

   19 June, 2008 at 14:27

   Que buena pinta tiene, luego me pongo ha ello.

   Como siempre muchas gracias y un saludo.
2. Resident says:

   19 June, 2008 at 16:59

   Ya esta probado, muchas gracias resulta muy útil. Poco a poco se va complicando el tema.

   un saludo.
3. Anonymous says:

   7 August, 2008 at 10:16

   hola…
   me encantaria programar algo para iphone alguien me podria desir que programa puedo utilizar tanto para mac com para win
   gracias

   pahermoso@hotmail.com
4. pequenionoa says:

   10 August, 2008 at 16:08

   Necesitas Xcode y el SDK para Iphone que te lo puedes descargar de la pagina de Apple. Pero necesitaras OSX. No se puede con Windows.
   Saludos.
5. Miguel Perez says:

   2 April, 2009 at 02:42

   Saludos…. no puedo correr este programa de ayuda que está muy bueno….,
   sigo todos los pasos, pero creo que al ligar los objetos al delegado se me complica, no todos quedan ligados y al correrlo no me aparece nada de nada…
   puede alguien ayudarme… plis
6. Echalotte says:

   6 April, 2009 at 05:41

   Excelente tutorial. Muy clarificador del uso de Vistas.

   Solo tenes que arreglar un pequeño error de tipeo en el párrafo anterior al que dice “5.- Compilamos y …” donde dice “PULSAR_BOTON_VISTA_ABAJO_2 lo he puesto para que sea animado.” debería decir
   “PULSAR_BOTON_VISTA_ABAJO_1 lo he puesto para que sea animado.”. Es decir, tenes que cambiar ABAJO_2 por ABAJO_1.

   Saludos