Tab navigation for Xamarin.iOS using MvvmCross

Bottom tabs on the Facebook mobile app

Notes

  • This walkthrough will show how to setup a brand new MvvmCross project from scratch for tab navigation, however, specific details about setting up MvvmCross are beyond the scope of this walkthrough.
  • We want to be able to perform nested navigation within each tab

Step 1: Solution Setup

We will start by setting up our MvvmCross solution. In Visual Studio, through the new project wizard choose the Blank Native App (iOS, Android) template. Complete the wizard leaving everything else as is.

Replace the PCL project with a .Net Standard Library

Step 2: MvvmCross Setup

Now that we have a nice clean solution setup, lets add MvvmCross. We will start by installing the MvvmCross Nuget package into our iOS project and the Core project.

//TabsViewModel.cs
public class TabsViewModel : MvxViewModel
{
public TabsViewModel(){ }
}
//App.cs
public class App : MvxApplication
{
public App()
{
}

public override void Initialize()
{
base.Initialize();
//Tell MvvmCross to show this ViewModel first
RegisterAppStart<TabsViewModel>();
}
}
[Register("AppDelegate")]
public class AppDelegate : MvxApplicationDelegate<MvxIosSetup<App>, App>
{
}
[MvxRootPresentation(WrapInNavigationController=false)]
public class TabsViewController : MvxTabBarViewController<TabsViewModel>
{
public TabsViewController()
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
}
}

Step 3: Setup Tabs

The Facebook app has 5 tabs; we need to create ViewModels to represent each one of these tabs. We will create the ViewModels as such:

  1. Requests — RequestsViewModel
  2. Messages — MessagesViewModel
  3. Notification — NotificationsViewModel
  4. More — MoreViewModel
public class NewsFeedViewModel : MvxViewModel
{
}
public class RequestsViewModel : MvxViewModel
{
}
public class MessagesViewModel : MvxViewModel
{
}
public class NotificationsViewModel : MvxViewModel
{
}
public class MoreViewModel : MvxViewModel
{
}
public class TabsViewModel : MvxViewModel
{
private readonly IMvxNavigationService _navigationService;
public TabsViewModel(IMvxNavigationService navigationService)
{
_navigationService = navigationService;
}
public Task SetupTabs()
{
return Task.WhenAll(
_navigationService.Navigate(typeof(NewsFeedViewModel)),
_navigationService.Navigate(typeof(RequestsViewModel)),
_navigationService.Navigate(typeof(MessagesViewModel)),
_navigationService.Navigate(typeof(NotificationsViewModel)),
_navigationService.Navigate(typeof(MoreViewModel)
));
}
}
  • We expose a method that calls Navigate on the MvxNavigationService for each of our individual Tabs
[MvxTabPresentation(TabName = "News Feed", TabIconName = "unselected", TabSelectedIconName = "selected", WrapInNavigationController = true)]
public class NewsFeedViewController : MvxViewController<NewsFeedViewModel>
{
public override void ViewDidLoad()
{
base.ViewDidLoad();
View.BackgroundColor = UIColor.Red;
NavigationItem.Title = "News Feed";
}
}
[MvxRootPresentationAttribute(WrapInNavigationController = false)]
public class TabsViewController : MvxTabBarViewController<TabsViewModel>
{
private bool _tabsInitialized;
public TabsViewController()
{
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
}
public override async void ViewWillAppear(bool animated)
{
base.ViewWillAppear(animated);
if (!_tabsInitialized) {
await ViewModel.SetupTabs();
_tabsInitialized = true;
}
}
}
Xamarin.iOS + MvvmCross + Tabs = 🔥 🔥 🔥

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store