Adaptando Apps Xamarin.Forms a tabletas
Descargar como PPTX, PDF0 recomendaciones5,340 vistas
El documento explora la adaptación de aplicaciones Xamarin.Forms para tabletas, destacando el uso de C# para lógica compartida y la importancia de la clase 'device' para personalizar la experiencia de usuario según el tipo de dispositivo. Se menciona cómo Xamarin.Forms facilita la creación de interfaces nativas y el soporte para diversas plataformas, incluyendo iOS, Android y Windows. Además, se tocan aspectos sobre la adaptación de recursos gráficos y la detección de dispositivos para optimizar la visualización en cada formato.
Adaptando Apps Xamarin.Forms a tabletas
- 1. Javier Suárez @jsuarezruiz Adaptando Apps Xamarin.Forms a Tabletas
- 2. • Blog: http://geeks.ms/blogs/jsuarez • Email: javiersuarezruiz@hotmail.com • Twitter: @jsuarezruiz
- 3. Xamarin: Aplicaciones nativas multiplataforma
- 4. Xamarin Código compartido C# • 100% acceso a APIs nativas • Rendimiento iOS C# UI Windows C# UIAndroid C# UI Shared C# Mobile
- 5. • La UI es específica de cada plataforma. • La lógica de la Aplicación es en C# y compartida mediante el uso de PCLs o proyectos Shared. • 70% aprox. De código compartido. El enfoque tradicional de Xamarin En enfoque con Xamarin Classic
- 6. Xamarin + Xamarin.Forms Tradicional Con Xamarin.Forms: Más código compartido, nativo iOS C# UI Windows C# UIAndroid C# UI Shared C# Backend Shared UI Code Shared C# Backend
- 7. • Permite crear facilmente y con rapidez interfaces de usuario nativas compartidas • Los elementos de Xamarin.Forms son mapeados a elementos nativos y behaviors propios de cada plataforma • Podemos mezclar Xamarin.Forms con APIs nativas Xamarin.Forms
- 9. iOS En el caso de iOS, es decir, iPads, la plantilla automática de Xamarin.Forms incluye soporte. Podemos revisarlo verificando si la propiedad Info.plist > Devices tiene asignado el valor Universal. Añadiendo soporte a Tabletas
- 10. Android El ecosistema Android es bastante variado y complejo contando con una enorme diversidad de tamaños de pantalla. Desde Apps Xamarin.Forms tenemos soporte a toda la variedad. Windows Xamarin.Foms cuenta con soporte a aplicaciones Universal Windows Platform también conocido por las siglas en inglés UWP. Las aplicaciones Universales en Windows 10 permite acceder a una enorme variedad de familias de dispositivos, desde teléfonos a tabletas y PCs. Añadiendo soporte a Tabletas
- 11. Podemos utilizar la clase Device para acceder a la enumeración Device.Idiom para verificar si estamos en teléfono o tableta. Detectando si estamos en teléfono o tableta if (Device.Idiom == TargetIdiom.Tablet) { } else { } • Phone: Indica que estamos en un teléfono. iPhone, iPod touch, Windows Phone y dispositivos Android por debajo de los 600 dips. • Tablet: Estamos ante iPad, dispositivos Windows 8.1 o dispositivos Android por encima de los 600 dips. • Desktop: Valor que obtenemos en aplicaciones UWP. • Unsupported: No soportado.
- 12. La clase Device es muy importante en Xamarin.Forms ya que nos permite acceder a una serie de propiedades y métodos con el objetivo de personalizar la aplicación según dispositivo y plataforma. Podemos detectar la plataforma gracias a la enumeración Device.OS o personalizar elementos de la interfaz gracias al método Device.OnPlatform entre otras opciones. Detectando si estamos en teléfono o tableta <Label Text="{Binding Driver.CompleteName}" TextColor="White" XAlign="Center"> <Label.FontSize> <OnIdiom x:TypeArguments="x:Double" Phone="24" Tablet="28"/> </Label.FontSize> </Label>
- 13. Adaptando recursos (iOS) Patrón Definición @2x Pensado para pantallas retina. Image.png Si tenemos una imagen de 320x480 pixeles, Image@2x.png será una versión de 640x960 pixels de la imagen. @3x Añadido para soporte al iPhone 6 Plus. Si tenemos una imagen de 414x736 pixeles, Image@2x.png será una versión de 1242x2208 pixels de la imagen. ~iphone Usada por Xamarin.iOS en iPhone y iPod Touch. ~ipad Usada por Xamarin.iOS en iPad.
- 14. Adaptando recursos (Android) En Android tenemos disponibles varias unidades de medida que nos ayudarán a que nuestra aplicación se vea correctamente sea cual sea el tamaño de la pantalla. dp (Density-independent Pixels) Es una unidad abstracta que se basa en la densidad física de la pantalla. Esta unidad es equivalente a un píxel en una pantalla con una densidad de 160 dpi. Formula: dp = px / (dpi / 160) Ejemplo, 100 px on a Nexus 5: dp = 100 / (445 / 160) = 36
- 15. Adaptando recursos (Android) Tipo Tamaño Teléfono < 600dp Tablet 7” >= 600dp / 10” > 720dp <manifest ... > <supports-screens android:requiresSmallestWidthDp="600" /> ... </manifest>
- 16. Adaptando recursos (Android) ldpi (low) ~120dpi mdpi (medium) ~160dpi hdpi (high) ~240dpi xhdpi (extra-high) ~320dpi xxhdpi (extra-extra-high) ~480dpi xxxhdpi (extra-extra-extra-high) ~640dpi
- 17. DEMO Adaptando la App Xamarin.Forms a Tabletas
- 18. El “efecto” de nuestros cambios Teléfonos Tablet
- 19. • La clase Device nos permite detectar si estamos ante teléfonos y tabletas, el sistema operativo y otras opciones básicas para personalizar la aplicación y ofrecer la mejor experiencia posible. • Los recursos de la aplicación son importantes. Debemos asegurarnos de facilitar recursos para cada tipo de dispositivo donde la aplicación puede correr. • Podemos crear vistas específicas por plataforma en caso necesario y modificar el flujo de navegación. Conclusiones
- 20. P & R
Notas del editor
- #15: http://developer.android.com/intl/es/guide/practices/screens_support.html