[Xamarin.Forms] Principales novedades de la versión 3.1

Introducción

Contamos con nueva versión de Xamarin.Forms, la 3.1. Una versión que tiene una variedad de novedades centradas en reducir la cantidad de controles personalizados y código específico en nuestras aplicaciones. En este artículo, vamos a hacer un rápido repaso sobre las novedades principales.

Novedades

Entre el conjunto de novedades principales encontramos:

Pestañas en la parte inferior

Google añadió BottomNavigationView en Android Support Library 25, y gracias a ello, ha sido posible añadirlo en Xamarin.Forms de forma sencilla utilizando Platform Specific.

<TabbedPage
     xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
     BarBackgroundColor="LightBlue"
     android:TabbedPage.ToolbarPlacement="Bottom"
     android:TabbedPage.BarItemColor="Gray"
     android:TabbedPage.BarSelectedItemColor="Black"
     Title="Bottom Tabs">
     <TabbedPage.Children>
          <ContentPage 
               Title="First"
               Icon="first">
               <Grid />
          </ContentPage>
          <ContentPage
               Title="Second"
               Icon="second">
               <Grid />
          </ContentPage>
          <ContentPage
               Title="Third"
               Icon="third">
               <Grid />
          </ContentPage>
     </TabbedPage.Children>
</TabbedPage>

Se puede establecer la posición de las pestañas con la propiedad ToolbarPlacement. También se cuentan con propiedades destinadas a personalizar el estilo de las pestañas:

  • BarItemColor: Color del icono y texto de cada pestaña.
  • BarSelectedItemColor: Color del icono y texto de la pestaña seleccionada.

Pestañas en la parte inferior

Auto-Resize Editor

Otra pequeña novedad bastante requerida. Según se va escribiendo en un control de tipo Editor, el control va creciendo automáticamente. Lo podemos conseguir gracias a la propiedad AutoSize que permite los siguientes valores:

  • Disabled: Valor por defecto. El control no crecerá.
  • TextChanges: El control crece automáticamente para permitir mostrar el contenido.
<Editor
     Text="AutoResize"
     AutoSize="TextChanges"/>

El resultado:

Autoresize Editor

Return key para Entry

Con la nueva propiedad ReturnType del Entry podemos modificar la apariencia del botón para completar la acción en el teclado virtual.

<Entry 
     ReturnType="Send"/>

Los valores posibles para ReturnType son:

  • Default
  • Done
  • Go
  • Next
  • Search
  • Send

El resultado:

Return Key

AutoCapitalization keyboard para el Entry

A veces en ciertos formularios no deseamos que el teclado automáticamente establezca la primera letra en mayúsculas. Por ejemplo, al introducir un correo electrónico. Ahora podemos controlar el comportamiento del teclado con KeyboardFlags:

<Entry 
     Placeholder="Insert text">
     <Entry.Keyboard>
          <Keyboard x:FactoryMethod="Create">
               <x:Arguments>
                    <KeyboardFlags>CapitalizeNone</KeyboardFlags>
               </x:Arguments>
          </Keyboard>
     </Entry.Keyboard>
</Entry>

Puedes consultar los valores posibles de KeyboardFlags en el siguiente enlace.

Auto Capitalization

Opciones de scrollbar Vertical y Horizontal

Se han añadido propiedades para controlar la visibilidad de las barras de scroll del ScrollView, tanto horizontal como vertical.

<ScrollView
     VerticalScrollBarVisibility="Always" 
     HorizontalScrollBarVisibility="Never">
</ScrollView>

Bindable Span

Otra novedad bastante interesante. Ahora podemos usar enlace a datos en Spans además de poder personalizar el color de cada Span:

<Label>
     <Label.FormattedText>
          <FormattedString>
               <FormattedString.Spans>
                    <Span Text="Test" />
                   <Span Text="{Binding Info}"
                         TextColor="Red" />
               </FormattedString.Spans>
          </FormattedString>
     </Label.FormattedText>
</Label>

Invocar JavaScript desde WebView

Ahora podemos invocar de forma sencilla código JavaScript desde el control WebView, utilizando una cadena con la posibilidad de obtener el valor de retorno.

string result = await EvaluateJsWebView.EvaluateJavaScriptAsync(
"var test = function(){ return 'This string came from Javascript'; }; test();");

Lo conseguimos con el nuevo método EvaluateJavaScriptAsync que evalua el código pasado como parámetro y retorno un valor siempre en formato de cadena.

Otros

Hay muchos más pequeños cambios como:

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

Anuncios

Un pensamiento en “[Xamarin.Forms] Principales novedades de la versión 3.1

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s