Adapta tu aplicación para todos los tipos de dispositivos
Xamarin.Forms ha soportado durante un largo tiempo, iOS, Android y Windows. Se han añadido nuevas plataformas para mantenerse al día frente a Tizen, macOS, Linux y Widnows WPF. Estas plataformas corren en infinidad de dispositivos diferentes como teléfonos tables, ordenadores y TVs. Esto presenta un enorme reto para los desarrolladores frente a como diseñar una interfaz que se escale de forma inteligente y que sea coherente con el dispositivo en que se esta visualizando.
Respuesta al tamaño de pantalla
Por defecto las capas y controles de Xamarin.Forms están diseñados para ser auto-adaptados (responsive) y normalmente aumentan o reducen su tamaño para ocupar todo el espacio disponible en la pantalla. Si necesitamos más control, la clase Xamarin.Forms Page tiene el evento SizeChanged con el que podemos determinarel espacio disponible en pantalla en tiempo de ejecución. Este evento es lanzado cuando se muestra la página, permitiendonos asi ajustar o cambiar la interfaz de la página basada en la altura (Height) o anchura (Width) de la pantalla.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); SizeChanged += MainPageSizeChanged; } void MainPageSizeChanged(object sender, EventArgs e) { miImagen.WidthRequest = Math.Min(this.Width, 400); } } |
Respuesta a la orientación
También podemos usar el evento SizeChanged para responder a los cambios de orientación. Este evento s lanza cuando la pantalla ha sido girada. Nosotros podemos terminar la orientacion comparando las propiedades de anchura y altura de la página.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public partial MainPage : ContentPage { public MainPage() { InitializeComponent(); SizeChanged += MainPageSizeChanged; } void MainPageSizeChanged(object sender, EventArgs e) { //si la altura es mayor que la anchura sabemos que esta en vertical bool isPortrait = this.Height > this.Width; stackLayout.Orientation = (isPortrait ? StackOrientation.Horizontal : StackOrientation.Vertical); } } |
Respuesta al tipo de dispositivo
A menudo tenemos que pensar sobre como adaptar nuestra interfaz en terminos de tamaño de pantalla, para eso necesitamos responder como el usuario interactua con el dispositivo. Por ejemplo, en los dispositivos moviles usamos la pantalla tactil y un ratón con teclado en los ordenadores de escritorio. Xamarin.Forms porporciona la propiedad estática Idiom dentro de la clase Device que podemos usar para comprobar el tipo de dispositivo en el que esta corriendo la aplicación. Los dispositivos están ordenados en cuatro categorias: Telefono (Phone), Tableta (Tablet), Sobremesa(Desktop) y TV.
|
1 2 3 4 5 6 7 8 9 10 11 |
switch (Device.Idiom) { case TargetIdiom.Desktop: ... case TargetIdiom.Phone: ... case TargetIdiom.Tablet: ... case TargetIdiom.TV: ... } |
Podemos usar Device.Idiom para cambiar la interfaz que mostramos. Tenemos muchas posibilidades dependiendo del numero de cambios que necesitamos hacer.
Para pequeños cambios como ajustar el tamaño podemos actualizar las capas y controles directamente.
|
1 2 3 4 5 6 7 8 9 10 |
if (Device.Idiom == TargetIdiom.Desktop) { buttonAbout.HeightRequest = 25; buttonAbout.WidthRequest = 40; } else { buttonAbout.HeightRequest = 40; buttonAbout.WidthRequest = 70; } |
Si tenemos que añadir o eliminar partes de interfaz, Xamarin.Forms tiene el objeto ContentView el cual nos permite crear controles compuestos. Podemos definir partes de interfaz con comportamiento que podemos rehusar y decidir que control mostrar basandonos en la propiedad Idiom. Podemos pensar en el objeto ContentView como una vista parcial de la clase Page en Xamarin.Forms.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
void AddColorPicker () { IMyColorPicker colorPicker; if (Device.Idiom == TargetIdiom.Desktop) colorPicker = new ColorPickerMouseView(); else colorPicker = new ColorPickerTouchView(); colorPicker.VerticalOptions = LayoutOptions.Start; colorPicker.ColorChanged += ColorPickerColorChanged; mainLayout.Children.Add(colorPicker) } |
Cuando la interfaz cambia de forma significativa entre los tipos de dispositivos podemos crear varias paginas diferentes. Podemos usar Device.Idiom para decidir que página mostrar. Podemos usar ContentViews dentro de estas páginas para evitar duplicar contenido. También podemos tener en cuenta que si estamos bajo el patrón MVVM podemos definir un único modelo de vista (View Model) y usarlo para cada versión de página que hayamos creado.
|
1 2 3 4 5 6 7 8 9 10 |
ContentPage page; if(Device.Idiom == TargetIdiom.Desktop) page = new InfoDesktopPage(new MyInfoViewModel(...)); else if(Device.Idiom == TargetIdiom.TV) page = new InfoTVPage(new MyInfoViewModel(...)); else //Phone or Tablet page = new InfoMobilePage(new MyInfoViewModel(...)); Navigation.PushAsync(page); |
Resulta interesante para profundizar sobre la clase ContentView echar un vistazo a la documentacion oficial aquí.
No dejes de aprender más sobre xamarin con Enagora