Introducción
Necesitar personalizar la barra superior de la aplicación añadiendo un logo, o un texto personalizado (utilizando una fuente específica, múltiples líneas, etc.) es bastante habitual. Hasta ahora, en Xamarin.Formsera algo posible pero…utilizando un Custom Renderer. Es un punto positivo de Xamarin.Forms, poder crear un Custom Renderer para acceder a características y elementos específicos de cada plataforma. Sin embargo, añade la necesidad de añadir más código (por plataforma) para conseguir un resultado.
Sin embargo, con la llegada de Xamarin.Forms 3.2 nos llega TitleView, una nueva opción para personalizar la barra superior sin necesidad de llegar a necesitar código específico por plataforma.
TitleView
TitleViewes parte de NavigationPage, donde se muestra el contenido del título de una ContentPage.
Cabecera personalizada
Comenzamos por un ejemplo sencillo. Vamos a personalizar la cabecera con un icono y título:
<NavigationPage.TitleView>
<StackLayout
Orientation="Horizontal"
VerticalOptions="Center"
Spacing="10">
<Image
Source="Icon.png"
Aspect="AspectFit" />
<Label
Text="TitleView"
FontSize="18"
TextColor="White"
VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
Podemos añadir el contenido deseado tal y como haríamos en el contenido de una página.
El resultado:
Comandos
Podemos utilizar los eventos, comandos e incluso GestureRecognizersen los elementos de la cabecera:
<NavigationPage.TitleView>
<StackLayout
Orientation="Horizontal"
VerticalOptions="Center"
Spacing="10">
<Image
Source="Icon.png"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnHeaderIconTapped"/>
</Image.GestureRecognizers>
</Image>
<Label
Text="TitleView"
FontSize="18"
TextColor="White"
VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
En este sencillo, ejemplo, mostramos un dialogo al pulsar sobre el logo de la cabecera:
Barra de búsqueda
Pasemos a un ejemplo más complejo y típico. Vamos a añadir una barra de búsqueda:
<NavigationPage.TitleView>
<Frame
CornerRadius="{OnPlatform 12, UWP=1}"
BackgroundColor="{OnPlatform Transparent, Android={StaticResource WhiteColor}}"
HasShadow="False"
IsClippedToBounds="True"
Padding="0">
<Frame.Content>
<SearchBar
x:Name="SearchBar"
Placeholder="Search movie..."
HorizontalOptions="FillAndExpand"
SearchCommand="{Binding SearchCommand}"
SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
<SearchBar.Behaviors>
<behaviors:SearchTextChangedBehavior />
</SearchBar.Behaviors>
</SearchBar>
</Frame.Content>
</Frame>
</NavigationPage.TitleView>
Mostramos un listado de peliculas de modo que, cada vez que cambia el texto de la barra de búsqueda, se actualiza el contenido de la página con el listado de películas filtrado.
El resultado:
Puedes encontrar el ejemplo en GitHub:
Limitaciones o problemas conocidos actuales
Entre el listado de limitaciones actuales encontramos:
- SearchBar debe ser contenido en un panel con HorizontalOptions=LayoutOptions.Fill y VerticalOptions=LayoutOptions.Fill, o bien, utilizar WidthRequest y HeightRequest específicos para que todo se vea correctamente en iOS.
- TitleView no es compatible con Android FormsApplicationActivity.
- El contenido no puede ser más grande que el tamaño predeterminado de la barra de navegación en iOS/UWP. En caso de intentarlo, habrá recorte de forma automática.
- Ya contábamos con las propiedades BackTitle, Title, TitleIcon y ahora con TitleView ocupando el mismo espacio en la barra de navegación, puede que haya conflictos y espacio limitado para admitir todas estas propiedades al mismo tiempo. Esto variará según la plataforma y el tamaño de la pantalla.
Más información
- GitHub: TitleView
- Xamarin Blog: Xamarin.Forms 3.2.0 Released: Going Big with Little Things