Con la llegada de iOS 11, Apple ha añadido varios nuevos diseños de elementos en su plataforma movil. Uno de estos cambios son los titulos grandes en la parte superior de la barra de navegación y que ahora pueden ser desplazados si necesitan más espacio. Esta nueva opción puede ser a función aun no está oficialmente soportada en Xamarin.
Activar Titulos Grandes (Large Titles)
Para añadir soporte para estos titulos en Xamarin.Forms lo único que necesitamos es anular (override) el NavigationRender actual para activarlos. Simplemente añadimos este Renderizado a nuestro proyecto iOS y se mostrarán en todas partes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))] namespace LargeTitles.Forms.iOS.CustomRenderers { public class CustomNavigationRenderer : NavigationRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); // Activar los Titulos Grandes en iOS 11 if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { // Activamos los titulos grandes NavigationBar.PrefersLargeTitles = true; // Coge los mismos TextAttributes que un titulo normal porque Xamarin.Forms // NavigationPage no tiene una propiedad dedicada para esto todavia. UINavigationBar.Appearance.LargeTitleTextAttributes = new UIStringAttributes { ForegroundColor = (Element as NavigationPage)?.BarTextColor.ToUIColor() }; } } } } |
Decidir cuando mostrar titulos grandes
Tener siempre activa esta característica activa es posible que no nos resulte interesante, sin embargo tener la posibilidad de usarla cuando nos interese es importante. De está manera podremos tener más flexibilidad a la hora de realizar nuestros diseños.
Para conseguir esto vamos a crear un nuevo tipo de contenido de página ContentPage en nuestro proyecto.
|
1 2 3 4 5 6 7 8 |
public class LargeTitleContentPage : ContentPage { /// <summary> /// Propiedad para iOS11 para añadir titulos grandes /// </summary> /// <value><c>true</c> si queremos titulos grandes; sino, <c>false</c>.</value> public bool HasLargeTitle { get; set; } } |
Todas las páginas tienen que tener la posibilidad de establecer esta posibilidad de titulos grandes, por defecto la dejaremos activada para las páginas que hereden de la nuestra. Para ello tenemos que declararlo en el fichero XAML.
|
1 2 3 4 5 6 7 8 9 10 11 |
<controls:ModernContentPage xmlns="http://xamarin.com/schemas/2014/forms"; xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"; xmlns:controls="clr-namespace:LargeTitles.Forms.Controls;assembly=LargeTitles.Forms" x:Class="LargeTitles.Forms.Pages.TestPage" Title="Hola mundo!" HasLargeTitle="false"> <!-- ... --> </controls:ModernContentPage> |
Añadir un renderizador personalizado o custom renderer
Lo último que nos queda es crear un renderizador para nuestra nueva página, este respetará nuestra propiedad HasLargeTitle y establecerá la nueva propiedad LargeTitleDisplayMode introducida en iOS 11. Para ello usaremos el siguiente código.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[assembly: ExportRenderer(typeof(LargeTitleContentPage), typeof(LargeTitleContentPageRenderer))] namespace LargeTitles.Forms.iOS.CustomRenderers { public class LargeTitleContentPageRenderer : PageRenderer { public override void ViewWillAppear(bool animated) { base.ViewWillAppear(animated); // Comprobar si estamos en iOS 11 y si debe mostrarse el titulo grande o no if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0)) { if ((Element as ModernContentPage)?.HasLargeTitle == true) NavigationController.TopViewController.NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.Always; else NavigationController.TopViewController.NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.Never; } } } |
Con estas poquitas lineas de código habremos conseguido añadir esta nueva característica en nuestras aplicaciones de Xamarin.Forms
Si os ha gustado este articulo no olvideís que podeís encontrar muchos más en la seccion xamarin