Question

I’m attempting to create a UITabBarController which implements a UINavigationBar, something I’d do in Xcode in a matter of minutes. However, I’m struggling using MVVMCross with MonoTouch. Some of the code is below –

From the first VC (this is for the user to accept terms & conditions, so once accepted, there’s no option to go back to it, hence the true flag) –

this.RequestNavigate<TabHostViewModel>(true);

My tabBar is set up like so, which works fine –

ViewControllers = new UIViewController[]
{
    CreateTabFor("Home", "", ViewModel.homeViewModel),
    CreateTabFor("History", "", ViewModel.journeyHistoryViewModel),
    CreateTabFor("Contacts", "", ViewModel.contactsViewModel),
    CreateTabFor("About", "", ViewModel.aboutViewModel),
};

…etc.

I try to set up the first view (HomeView in this case) like so in ViewDidLoad –

this.NavigationController.NavigationBar.TintColor = myNavBarColour;

However, it seems that NavigationController in undefined, unless I create my own when I set up the TabBar –

UIViewController HomeViewController = CreateTabFor("Home", "", ViewModel.homeViewModel);
UINavigationController HomeNavController = new UINavigationController(HomeViewController);

ViewControllers = new UIViewController[]
{
    HomeNavController,
    CreateTabFor("History", "", ViewModel.journeyHistoryViewModel),
    CreateTabFor("Contacts", "", ViewModel.contactsViewModel),
    CreateTabFor("About", "", ViewModel.aboutViewModel),
};

Now I can do whatever I like with the navigation bar, but the trouble is I have two navigation bars, one at the top with no title, and the new one I’ve just created immediately below it.

Anyone with any thoughts?

Many thanks.

Answer 1

I’m not entirely clear on your setup.

However, I think what you are looking for is what the conference sample does

• http://slodge.blogspot.co.uk/2012/03/update-on-mvvmcross-sqlbits-conference.html
• https://github.com/slodge/MvvmCross/tree/master/Sample%20-%20CirriousConference

Within this sample:

• the home view hosts the tabbar
• each tab has its own embedded NavigationController
• each subview is hosted inside one of the navigation controllers

This code is:

    private UIViewController CreateTabFor(string title, string imageName, IMvxViewModel viewModel)
    {
        var controller = new UINavigationController();
        controller.NavigationBar.TintColor = UIColor.Black;
        var screen = this.CreateViewControllerFor(viewModel) as UIViewController;
        SetTitleAndTabBarItem(screen, title, imageName);
        controller.PushViewController(screen, false);
        return controller;
    }

    private void SetTitleAndTabBarItem(UIViewController screen, string title, string imageName)
    {
        screen.Title = ViewModel.TextSource.GetText(title);
        screen.TabBarItem = new UITabBarItem(title, UIImage.FromBundle("Images/Tabs/" + imageName + ".png"),
                                             _createdSoFarCount);
        _createdSoFarCount++;
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        if (ViewModel == null)
        {
            _needViewDidLoadCall = true;
            return;
        }

        _needViewDidLoadCall = false;

        var viewControllers = new UIViewController[]
                              {
                                CreateTabFor("Welcome", "home", ViewModel.Welcome),
                                CreateTabFor("Sessions", "sessions", ViewModel.Sessions),
                                CreateTabFor("Favorites", "favorites", ViewModel.Favorites),
                                CreateTabFor("Tweets", "twitter", ViewModel.Twitter),
                              };
        ViewControllers = viewControllers;
        CustomizableViewControllers = new UIViewController[] { };
        SelectedViewController = ViewControllers[0];
    }

The navigation is then intercepted inside the Presenter logic (configured in the AppDelegate) – the ConferencePresenter defers the ShowView logic to:

    public bool ShowView(IMvxTouchView view)
    {
        if (TryShowViewInCurrentTab(view))
            return true;

        return false;
    }

    private bool TryShowViewInCurrentTab(IMvxTouchView view)
    {
        var navigationController = (UINavigationController)this.SelectedViewController;
        navigationController.PushViewController((UIViewController)view, true);
        return true;
    }

---

This logic is a little complicated, but the aim of this navigation and presenter design is to allow you to customise the presentation to suit the application. This can also be changed dynamically at runtime – so you can, for example, choose to use different presentation logic on a iPad instead of a iPhone.