Olá, neste post irei demonstrar como implementar Top Tabbed Page para iOS.
Antes que você me pergunte
“Abas no topo da página não vão contra as diretrizes da Apple ?”
Sim… mas já tentou explicar isso para um cliente ? (Acho que eu não preciso de outra justificativa né ? kkkk)
Bom, se você encontra-se em uma situação parecida, esse post com certeza é para você. Sem mais delongas, vamos ao código.
ADICIONANDO O NUGET PACKAGE
Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.
Digite “Naxam.TopTabbedPage.Forms” e selecione o plugin como demonstrado na imagem a seguir.
Selecione o projeto compartilhado e clique no botão “Install”.
Compartilhado
Em seu projeto compartilhado, crie uma TabbedPage como você já está acostumado e lembre-se de referencia-lá na MainPage da classe App.cs.
MainPage = new NavigationPage(new MainTabbedPage());
Xaml
Referencie o namespace do plugin e utilize TopTabbedPage.
<?xml version="1.0" encoding="utf-8" ?> | |
<forms:TopTabbedPage | |
xmlns="http://xamarin.com/schemas/2014/forms" | |
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" | |
xmlns:local="clr-namespace:TopTabbedPageDemo" | |
x:Class="TopTabbedPageDemo.MainTabbedPage" | |
xmlns:forms="clr-namespace:Naxam.Controls.Forms;assembly=Naxam.TopTabbedPage.Forms" | |
BarBackgroundColor="#2196F3"> | |
<local:Page1 Title="PAGE 1"/> | |
<local:Page2 Title="PAGE 2"/> | |
<local:Page3 Title="PAGE 3"/> | |
</forms:TopTabbedPage> |
Code-behind
Lembre-se de modificar a herança da classe para TopTabbedPage.
using Xamarin.Forms.Xaml; | |
using Naxam.Controls.Forms; | |
namespace TopTabbedPageDemo | |
{ | |
[XamlCompilation(XamlCompilationOptions.Compile)] | |
public partial class MainTabbedPage : TopTabbedPage | |
{ | |
public MainTabbedPage() | |
{ | |
InitializeComponent(); | |
} | |
} | |
} |
iOS
Em seu projeto .iOS inicialize o Plugin na classe AppDelegate.
AppDelegate.cs
using Foundation; | |
using Naxam.Controls.Platform.iOS; | |
using UIKit; | |
namespace TopTabbedPageDemo.iOS | |
{ | |
[Register("AppDelegate")] | |
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate | |
{ | |
public override bool FinishedLaunching(UIApplication app, NSDictionary options) | |
{ | |
TopTabbedRenderer.Init(); | |
global::Xamarin.Forms.Forms.Init(); | |
LoadApplication(new App()); | |
return base.FinishedLaunching(app, options); | |
} | |
} | |
} |
Resultado


Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.