CoverFlow en MonoTouch

Un cover flow es un software de interfaz gráfica en tres dimensiones integrado en iTunes, Mac OS X, y otros productos Apple Inc. Para mover de un tirón a través de imágenes visuales de los documentos, favoritos web, álbumes o fotografías.(Wikipedia, http://es.wikipedia.org/wiki/Cover_Flow).

Es un control muy atractivo a la vista como a la vez util, por lo que tener uno de esos controles en nuestra aplicacion, le sumaria puntos a favor. Desafortunadamente el control usado en las aplicaciones de Apple, no esta disponible para ser usado por terceros, por lo cual vamos a utilizar un control llamado OpenFlow (https://github.com/thefaj/OpenFlow) que tiene muchas de las caracteristicas del control de Apple, pero no todas.

Para poder usar el control en MonoTouch, usaremos un Binding hecho por Miguel de Icaza llamado OpenFlowSharp (https://github.com/migueldeicaza/OpenFlowSharp).

Nuestro primer paso es obtener la dll de OpenFlowSharp que la pueden obtener aqui o crearla desde el codigo fuente.

Nuesro siguiente paso es agregar a nuestro proyecto la dll como se muestra en la siguiente imagen:

Despues nos dirigiremos al controlador que deseamos que despliegue el Cover Flow y agregaremos los siguientes metodos:

private OpenFlowSharp.OpenFlowView openFlow;

private AutoResetEvent signal = new AutoResetEvent (false);

private Queue tasks = new Queue ();

#region IOpenFlowDataSource Implementation

public void RequestImage (OpenFlowView view, int index)

{

NSAction task;

task = delegate {

var img = UIImage.FromFile ("images/" + index + ".png");

InvokeOnMainThread (delegate {

openFlow [index] = img;

} );

} ;

lock (tasks) {

tasks.Enqueue (task);

}

signal.Set ();

}

public UIImage GetDefaultImage ()

{

return UIImage.FromFile ("images/not_available.png");

}

#endregion

Nuestro siguiente paso sera que el controlador implemente la interfaz IopenFlowDataSource:

public partial class OpenFlowExampleViewController : UIViewController, IOpenFlowDataSource

Luego agregaremos un par de metodos mas, que nos ayudaran a completar la tarea de cargado de las imagenes:

#region Helpers

private void LoadAllImages ()

{

// Load images all at once

for (int i = 0; i < 5; i++) {

var img = UIImage.FromFile ("images/" + i + ".png");

openFlow [i] = img;

}

openFlow.NumberOfImages = 5;

}

//Async

private void Worker ()

{

// Create the NSAutoreleasePool so that any NSObjects that

// the ObjC runtime creates are disposed using it, otherwise

// ObjC just leaks them.

using (var releasePool = new NSAutoreleasePool ()) {

while (signal.WaitOne ()) {

while (true) {

NSAction task;

lock (tasks) {

if (tasks.Count > 0)

task = tasks.Dequeue ();

else

break;

}

task ();

}

}

}

}

#endregion

Como penultimo paso agregaremos las siguientes lineas de codigo al contructor de la clase controladora:

openFlow = new OpenFlowView (UIScreen.MainScreen.Bounds, this);

this.View = openFlow;

LoadAllImages ();

Thread t = new Thread (Worker);

t.Start ();

signal.Set ();

Y como nuestro ultimo paso agregaremos imagenes en la carpeta “Images” que debemos de crearla previamente. Ahora si lanzamos la aplicacion veremos algo asi:

 

Como aclaracion, les indico que el cargado de las imagenes se lo hace de forma asincronica, muy util cuando las imagenes son obtenidas desde internet, pero si deseamos hacer la carga de manera sincrona simplemente deberemos de comentar las siguientes lineas de codigo:

//Thread t = new Thread (Worker);

//t.Start ();

//signal.Set ();

Suerte.

Source: Aquí.

PD. Las imagenes que se encuentran en el codigo fuente estan ubicadas aqui: http://www.supercars.net/gallery/132868/861/2.html