[Entrada original publicada en www.mono-hispano.org]

Paralelamente a la serie MonoTouch N que quizá tiene más componente de tutorial que esta, he decidido crear una serie que muestre cómo realizar acciones concretas, aunque es muy recomendable tener unos conocimientos básicos sobre MonoTouch para llevarla a cabo.

Para comenzar la serie, nada mejor que comenzar con algo bastante práctico y útil, como es la interfaz de usuario, en concreto, con el componente TabBar. Que permite navegar entre pantallas de forma bastante fluida.

tab_bar_icons_closeup

 

En primer lugar, crearemos un nuevo proyecto en MonoDevelop File->New->Solution->MonoTouch->iPhone->Empty Project y le ponemos de nombre, ProbandoTabBar.

Lo primero que debemos hacer es dirigirnos a la clase AppDelegate y crear una variable con ámbito de clase del tipo UITabBarController la llamaremos tabBar.

Lo primero que debemos hacer es agregamos dos ViewController al proyecto que serán las pantallas entre las que navegaremos. Para ello: Botón derecho sobre el proyecto->Add->New File…-> iPhoneViewController y la denominamos MainView. Repetimos el proceso para la segunda, y la denominamos OtherView.

Una vez creadas, hacemos doble click sobre el .Xib que nos ha generado, abrirá XCode y ponemos un elemento distintivo, como puede ser un Label con un texto cualquiera.

clip_image004
Repetimos el proceso con la segunda, y volvemos a Xcode.

De vuelta en MonoDevelop, nos digirimos a la clase AppDelegate y crear una variable con ámbito de clase del tipo UITabBarController la llamaremos tabBar

Dento del método FinishedLaunching, creamos el siguiente código:

   1:  public override bool FinishedLaunching (UIApplication app, NSDictionary options)
   2:   
   3:  {
   4:   
   5:  // create a new window instance based on the screen size
   6:   
   7:  window = new UIWindow (UIScreen.MainScreen.Bounds);
   8:   
   9:  //Se instancian las pantallas:
  10:   
  11:  MainView mainView = new MainView();
  12:   
  13:  OtherView otherView = new OtherView();
  14:   
  15:  //Se establece el contenido del titulo que se mostrarﾃ｡ en el tabBar.
  16:   
  17:  mainView.TabBarItem.Title = "MainView";
  18:   
  19:  otherView.TabBarItem.Title = "OtherView";
  20:   
  21:  //Se instancia el tabBar
  22:   
  23:  tabBar = new UITabBarController();
  24:   
  25:  //Se agregan las pantallas al tabBar
  26:   
  27:  tabBar.SetViewControllers(new UIViewController[]{mainView,otherView},false);
  28:   
  29:  //Se asigna el tabBar como vista principal
  30:   
  31:  window.RootViewController=tabBar;
  32:   
  33:  // make the window visible
  34:   
  35:  window.MakeKeyAndVisible ();
  36:   
  37:  return true;
  38:   
  39:  }

El código queda explicado por sí mismo además de por los comentarios. Compilamos:

clip_image006

 

Como último detalle quisiera comentar que para añadir una imagen en el TabBarItem se puede acceder desde cualquier instancia de UIViewController o derivadas como en nuestro caso, MainView u OtherView, a través de la propidad de la misma UIViewController.TabBarItem.Image. Otra cuestión que puede resultar útil es implementar el evento de UITabBarController ViewControllerSelected que nos permitirá acceder al ViewController seleccionado cuando cambie.

Pues esto es todo, cualquier duda no dudéis en comentarla.