Tutorial sobre las imágenes Xamarin.Forms
Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:
- Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
- Tutorial sobre el diseño de pila (StackLayout).
En este tutorial aprenderá a:
- Crear Xamarin.Forms
Imageen XAML. - Personalizar la apariencia de
Image. - Mostrar un archivo de imagen local de cada proyecto de plataforma.
Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo mostrar una imagen y personalizar su aspecto. En las capturas de pantalla siguientes se muestra la aplicación final:
También usará la Recarga activa de XAML para Xamarin.Forms para ver cambios en la UI sin tener que volver a compilar la aplicación.
Creación de una imagen
Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.
Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada ImageTutorial.
Importante
Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine ImageTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.
Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Explorador de soluciones, en el proyecto ImageTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ImageTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" HeightRequest="300" /> </StackLayout> </ContentPage>Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto
Imageen unStackLayout. La propiedadImage.Sourceespecifica la imagen que se mostrará mediante un URI. La propiedadImage.Sourcees del tipoImageSource, que permite que las imágenes se obtengan de archivos, URI o recursos. Para obtener más información, consulte Mostrar imágenes en la guía Imágenes en Xamarin.Forms.La propiedad
HeightRequestespecifica el alto del elementoImageen unidades independientes de dispositivo.Nota
No es necesario establecer la propiedad
WidthRequesten este ejemplo. Esto se debe a que, de forma predeterminada, el elementoImagemantiene la relación de aspecto de la imagen.En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:
Nota
La vista
Imagealmacena en caché automáticamente las imágenes descargadas durante un período de 24 horas. Para obtener más información, vea Almacenamiento en caché de imágenes descargadas en la guía Imágenes en Xamarin.Forms.
Personalización de la apariencia
En MainPage.xaml, modifique la declaración
Imagepara personalizar su apariencia:<Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" Aspect="Fill" HeightRequest="{OnPlatform iOS=300, Android=250}" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Este código establece la propiedad
Aspect, que define el modo de escalado de la imagen, enFill. El miembroFillse define en la enumeraciónAspecty ampliará la imagen para rellenar por completo la vista, aunque la imagen se distorsione. Para obtener más información sobre el escalado de imágenes, vea Mostrar imágenes en la guía Imágenes en Xamarin.Forms.La extensión de marcado
OnPlatformle permite personalizar la apariencia de la interfaz de usuario para cada plataforma. En este ejemplo, la extensión de marcado se usa para establecer las propiedadesHeightRequestyWidthRequesten 300 unidades independientes de dispositivo para iOS y en 250 unidades independientes de dispositivo para Android. Para obtener más información sobre la extensión de marcadoOnPlatform, vea Extensión de marcado OnPlatform en la guía Consumo de las extensiones de marcado XAML.Además, la propiedad
HorizontalOptionsespecifica que la imagen se centrará horizontalmente.Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:
En Visual Studio, detenga la aplicación.
Presentación de una imagen local
Es posible agregar archivos de imagen a proyectos de plataforma y hacer referencia a ellos desde código compartido de Xamarin.Forms. Este método de distribución de imágenes es necesario cuando las imágenes son específicas de la plataforma, por ejemplo, al usar resoluciones diferentes en plataformas diversas, o bien al emplear diseños que difieren ligeramente.
En este ejercicio, modificará la solución ImageTutorial para mostrar una imagen local, en lugar de una imagen descargada de un URI. La imagen local es el logotipo de Xamarin. Para descargarla, haga clic en el botón siguiente.
Importante
Para usar una imagen única en todas las plataformas, es necesario usar el mismo nombre de archivo en todas las plataformas. Debe ser un nombre de recurso de Android válido, es decir, solo se permiten letras minúsculas, números, el carácter de subrayado y el punto.
En el Explorador de soluciones, en el proyecto ImageTutorial.iOS, expanda Catálogos de activos y haga doble clic en Activos para abrirlo. Después, en la pestaña Assets.xcassets, haga clic en el botón Más y seleccione Agregar conjunto de imágenes:
En la pestaña Assets.xcassets, seleccione el nuevo conjunto de imágenes. Se mostrará el editor:
Arrastre XamarinLogo.png del sistema de archivos al cuadro 1x de la categoría Universal:
En la pestaña Assets.xcassets, haga clic con el botón derecho en el nombre del nuevo conjunto de imágenes y cámbieselo a XamarinLogo:
Guárdelo y cierre la pestaña Assets.xcassets.
En el Explorador de soluciones, en el proyecto ImageTutorial.Android, expanda la carpeta Recursos. Después, arrastre XamarinLogo.png del sistema de archivos a la carpeta drawable:
Nota
Visual Studio establecerá automáticamente la acción de compilación para la imagen en AndroidResource.
En el proyecto ImageTutorial, en MainPage.xaml, modifique la declaración
Imagede modo que muestre el archivo local XamarinLogo:<Image Source="XamarinLogo" WidthRequest="{OnPlatform iOS=300, Android=250}" HorizontalOptions="Center" />Este código establece la propiedad
Sourceen el archivo local que se va a mostrar. La propiedadWidthRequestse establece en 300 unidades independientes del dispositivo en iOS y en 250 unidades independientes del dispositivo en Android. Además, la propiedadHorizontalOptionsespecifica que la imagen se centrará horizontalmente.Nota
Si se trata de imágenes PNG en iOS, se puede omitir la extensión .png del nombre de archivo especificado en la propiedad
Source. En el caso de otros formatos de imagen, la extensión es necesaria.En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido:
En Visual Studio, detenga la aplicación.
Para obtener más información sobre las imágenes locales, vea Imágenes locales en la guía Imágenes en Xamarin.Forms.
¡Enhorabuena!
Ha completado el tutorial, donde ha aprendido a:
- Crear Xamarin.Forms
Imageen XAML. - Personalizar la apariencia de
Image. - Mostrar un archivo de imagen local de cada proyecto de plataforma.
Pasos siguientes
Para obtener más información sobre los conceptos básicos de creación de aplicaciones móviles con Xamarin.Forms, continúe al tutorial sobre la cuadrícula.
Vínculos relacionados
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.