Resumen del capítulo 2. Anatomía de una aplicación

  • Artículo

Download SampleDescargar el ejemplo

Nota:

Este libro se publicó en la primavera de 2016 y no se ha actualizado desde entonces. Gran parte del libro sigue siendo útil, pero algunos de los materiales están anticuados y algunos temas ya no son completamente correctos o completos.

En una aplicación de Xamarin.Forms, los objetos que ocupan espacio en la pantalla se conocen como elementos visuales, encapsulados por la clase VisualElement. Los elementos visuales se pueden dividir en tres categorías correspondientes a estas clases:

Un derivado de Page ocupa toda o casi toda la pantalla. A menudo, el elemento secundario de una página es un derivado de Layout para organizar los elementos visuales secundarios. Los elementos secundarios de Layout pueden ser otras clases Layout o derivados de View (a menudo llamados elementos), que son objetos conocidos como texto, mapas de bits, controles deslizantes, botones, cuadros de lista, etc.

En este capítulo se muestra cómo crear una aplicación enfocada a la clase Label, que es el derivado de View que muestra texto.

Decir Hola

Con la plataforma Xamarin instalada, puede crear una solución de Xamarin.Forms en Visual Studio o Visual Studio para Mac. La solución Hello usa una biblioteca de clases portable para el código común.

Nota:

Las bibliotecas de clases portables se han sustituido por las bibliotecas .NET Standard. Todo el código de ejemplo del libro se ha convertido para usar las bibliotecas .NET estándar.

En este ejemplo se muestra una solución de Xamarin.Forms creada en Visual Studio sin modificaciones. La solución consta de cuatro proyectos:

  • Hello, una biblioteca de clases portable (PCL) compartida por otros proyectos.
  • Hello.Droid, un proyecto de aplicación para Android.
  • Hello.Droid, un proyecto de aplicación para iOS.
  • Hello.UWP, un proyecto de aplicación para la Plataforma universal de Windows (Windows 10 y Windows 10 Mobile).

Nota:

Xamarin.Forms ya no admite Windows 8.1, Windows Phone 8.1 o Windows 10 Mobile, pero las aplicaciones de Xamarin.Forms se ejecutan en Windows 10 Desktop.

Puede hacer que cualquiera de estos proyectos de aplicación sea el proyecto de inicio y, luego, compilar y ejecutar el programa en un dispositivo o simulador.

En muchos de los programas de Xamarin.Forms, no se modificarán los proyectos de aplicación. Con frecuencia permanecen como minúsculo código auxiliar solo para iniciar el programa. La mayor parte de su enfoque será la biblioteca común a todas las aplicaciones.

Dentro de los archivos

Los elementos visuales que se muestran en el programa Hello se definen en el constructor de la clase App. App se deriva de la clase Application de Xamarin.Forms.

Nota:

Las plantillas de solución de Visual Studio para Xamarin.Forms crean una página con un archivo XAML. XAML no se trata en este libro hasta el capítulo 7.

La sección Referencias del proyecto de PLC Hello incluye los siguientes ensamblados de Xamarin.Forms:

  • Xamarin.Forms.Core
  • Xamarin.Forms.Xaml
  • Xamarin.Forms.Platform

Las secciones Referencias de los cinco proyectos de aplicación incluyen ensamblados adicionales que se aplican a las plataformas individuales:

  • Xamarin.Forms.Platform.Android
  • Xamarin.Forms.Platform.iOS
  • Xamarin.Forms.Platform.UWP
  • Xamarin.Forms.Platform.WinRT
  • Xamarin.Forms.Platform.WinRT.Tablet
  • Xamarin.Forms.Platform.WinRT.Phone

Nota:

En las secciones Referencias de estos proyectos ya no se enumeran los ensamblados. En su lugar, el archivo de proyecto contiene una etiqueta PackageReference que hace referencia al paquete NuGet de Xamarin.Forms. En la sección Referencias de Visual Studio se muestra el paquete de Xamarin.Forms en lugar de los ensamblados de Xamarin.Forms.

Cada uno de los proyectos de aplicación contiene una llamada al método estático Forms.Init en el espacio de nombres Xamarin.Forms. Esto inicializa la biblioteca de Xamarin.Forms. Se define una versión diferente de Forms.Init para cada plataforma. Las llamadas a este método se pueden encontrar en las clases siguientes:

Además, cada plataforma debe crear una instancia de la ubicación de clase App en la biblioteca compartida. Esto sucede en una llamada a LoadApplication en las clases siguientes:

De lo contrario, estos proyectos de aplicación son programas normales en los que no hay que hacer nada.

¿PCL o SAP?

Es posible crear una solución de Xamarin.Forms con el código común en una biblioteca de clases portable (PCL) o en un proyecto de recursos compartidos (SAP). Para crear una solución de SAP, seleccione la opción Compartido en Visual Studio. La solución HelloSap muestra la plantilla de SAP sin modificaciones.

Nota:

Las bibliotecas de clases portables se han sustituido por las bibliotecas .NET Standard. Todo el código de ejemplo del libro se ha convertido para usar las bibliotecas .NET estándar. De lo contrario, las bibliotecas PCL y .NET Standard son conceptualmente muy similares.

El enfoque de la biblioteca empaqueta todo el código común en un proyecto de biblioteca al que hacen referencia los proyectos de aplicación de la plataforma. Con el enfoque de SAP, el código común existe de hecho en todos los proyectos de aplicación de la plataforma y se comparte entre ellos.

La mayoría de los desarrolladores de Xamarin.Forms prefieren el enfoque de la biblioteca. En este libro, la mayoría de las soluciones usan una biblioteca. Las que usan SAP incluyen un sufijo Sap en el nombre del proyecto.

Con el enfoque de SAP, el código del proyecto compartido puede ejecutar código diferente para las distintas plataformas mediante directivas de preprocesador de C# (#if, #elif y #endif) con estos identificadores predefinidos:

  • iOS: __IOS__
  • Android: __ANDROID__
  • UWP: WINDOWS_UWP

En una biblioteca compartida, puede determinar en qué plataforma está trabajando en tiempo de ejecución, como verá más adelante en este capítulo.

Etiquetas de texto

En la solución Greetings se muestra cómo agregar un nuevo archivo de C# al proyecto Greetings. Este archivo define una clase denominada GreetingsPage que se deriva de ContentPage. En este libro, la mayoría de los proyectos contienen un solo derivado de ContentPage cuyo nombre es el nombre del proyecto con el sufijo Page anexado.

El constructor GreetingsPage crea una instancia de una vista Label, que es la vista de Xamarin.Forms que muestra el texto. La propiedad Text se establece en el texto mostrado por Label. Este programa establece Label en la propiedad Content de ContentPage. El constructor de la clase App crea entonces una instancia de GreetingsPage y la establece en su propiedad MainPage.

El texto se muestra en la esquina superior izquierda de la página. En iOS, esto significa que se superpone a la barra de estado de la página. Hay varias soluciones posibles para este problema:

Solución 1. Incluir relleno en la página

Establezca una propiedad Padding en la página. Padding es de tipo Thickness, una estructura con cuatro propiedades:

Padding define un área dentro de una página donde se excluye el contenido. Esto permite que Label evite sobrescribir la barra de estado de iOS.

Solución 2. Incluir relleno solo para iOS (solo SAP)

Establezca una propiedad "Padding" solo en iOS mediante un proyecto SAP con una directiva de preprocesador de C#. Esto se muestra en la solución GreetingsSap.

Solución 3. Incluir relleno solo para iOS (PCL o SAP)

En la versión de Xamarin.Forms usada para el libro, se puede seleccionar una propiedad Padding específica de iOS en una biblioteca PCL o un proyecto SAP mediante el método estático Device.OnPlatform o Device.OnPlatform<T>. Estos métodos están ahora en desuso.

Los métodos Device.OnPlatform se usan para ejecutar código específico de la plataforma o para seleccionar valores específicos de la plataforma. A nivel interno, hacen uso de la propiedad estática de solo lectura Device.OS, que devuelve un miembro de la enumeración TargetPlatform:

Los métodos Device.OnPlatform, la propiedad Device.OS y la enumeración TargetPlatform están todos en desuso actualmente. Use en su lugar la propiedad Device.RuntimePlatform y compare el valor devuelto de string con los siguientes campos estáticos:

  • iOS, la cadena "iOS"
  • Android, la cadena "Android"
  • UWP, la cadena "UWP", referida a la Plataforma universal de Windows

La propiedad estática de solo lectura Device.Idiom está relacionada. Esto devuelve un miembro de TargetIdiom, que tiene estos miembros:

En iOS y Android, el límite entre Tablet y Phone es un ancho vertical de 600 unidades. En la plataforma Windows, Desktop indica una aplicación UWP que se ejecuta en Windows 10 y Phone indica una aplicación UWP que se ejecuta en una aplicación de Windows 10.

Solución 3a. Establecimiento de márgenes en la etiqueta

Aunque la propiedad Margin se introdujo demasiado tarde como para incluirse en el libro, también es de tipo Thickness y puede establecerla en Label para definir un área fuera de la vista que se incluya en el cálculo del diseño de la vista.

La propiedad Padding solo está disponible en los derivados de Layout y Page. La propiedad Margin está disponible en todos los derivados de View.

Solución 4. Etiqueta centrada dentro de la página

Puede centrar el objeto Label dentro del objeto Page (o colocarlo en uno de otros ocho lugares); para ello, establezca las propiedades HorizontalOptions y VerticalOptions de Label en un valor de tipo LayoutOptions. La estructura LayoutOptions define dos propiedades:

  • Una propiedad Alignment de tipo LayoutAlignment, una enumeración con cuatro miembros: Start, lo que significa izquierda o arriba según la orientación, Center, End, lo que significa derecha o abajo según la orientación, y Fill.

  • Una propiedad Expands de tipo bool.

Por lo general, estas propiedades no se usan directamente. En su lugar, se proporcionan combinaciones de estas dos propiedades mediante ocho propiedades estáticas de solo lectura de tipo LayoutOptions:

HorizontalOptions y VerticalOptions son las propiedades más importantes en el diseño de Xamarin.Forms y se describen con más detalle en el Capítulo 4. Desplazamiento de la pila.

Este es el resultado con las propiedades HorizontalOptions y VerticalOptions de Label, ambas establecidas en LayoutOptions.Center:

Triple screenshot of greetings program

Solución 5. Texto centrado dentro de la página

También puede centrar el texto (o colocarlo en otros ocho lugares de la página) mediante el establecimiento de las propiedades HorizontalTextAlignment y VerticalTextAlignment de Label en un miembro de la enumeración TextAlignment:

  • Start, lo que significa izquierda o arriba (según la orientación)
  • Center
  • End, lo que significa derecha o abajo (según la orientación)

Estas dos propiedades solo se definen mediante Label, mientras que las propiedades HorizontalAlignment y VerticalAlignment se definen mediante View y las heredan todos los derivados de View. Aunque los resultados visuales pueden parecer similares, son muy diferentes (como se muestra en el siguiente capítulo).