Tabs Presenter for MvvmCross

Update (20 june 2017):

Starting with MvvmCross 5.0 there is a new iOS presenter that has a lot of new features (incluiding support for tabs!) Check the docs here. See it in action here.

—————————————-

Background

As a mobile developer I enjoy staying up to date with the latest UI/UX patterns and designs. As a part of it, I put a lot of effort on respecting each platform’s ecosystem.

I think it is very important for users to feel comfortable and confident about their knowledge when using our apps. Of course, there has to be some unique features that make our app awesome and better than the others, but some characteristics of the ecosystem should be respected.

That’s the case of side menus. Althought I dislike the idea in general (as well as many other people, for many reasons), on Android it has become an established UI pattern – and it has also been integrated into the SDK -. But on iOS it isn’t the same. The most common layout structure for – fairly big – apps are bottom tabs. So I decided to build a presenter for MvvmCross that handles it.

 

MvxTabsViewPresenter

The idea behind this presenter is to provide users the ability to show four kinds of ViewControllers:

Actually, if you look at the Show method, it does really simple logic:

I will try to explain how each of this modes work:

  • Root is intended to display a TabBarViewController (that implements IMvxTabBarViewController) or a UINavigationController. If you inherit your class from MvxBaseTabBarViewController then life becomes much easier, since all of the work required by the interface is resolved there.
  • Tab is intended to display a TabViewController inside the TabBarViewController.
  • Child is intended to display a ViewController inside a host NavigationController. And here comes the interesting thing: the host can be a NavigationController that was displayed either as a Root or a Tab.
  • Modal is intended to display a ViewController as a modal (it does technically present a ViewController).

As you can see from the Show method, the line:

grabs some attributes from the ViewController.

It means the way to use this presenter – from the iOS project side – is to add custom attributes over your ViewControllers.

 

Setup

All you have to do is to install the MvvmCross-iOSSupport package inside your iOS project and then pass an instance of MvxTabsViewPresenter as a parameter to the Setup constructor inside the FinishedLaunching method of the AppDelegate class.

Note: By the time this article is being written, the nuget package (v4.3) is a little bit behind the code inside the repository, please check this PR to spot the differences (in short: the nuget version requires you to pass the tab title and icon inside the presentationValues parameter when calling the ShowViewModel method to display a tab).

 

Showing ViewControllers

To show a ViewController as a Root, you will have to add this MvxTabBarPresentationAttribute over your class:

And then the presenter will automatically detect if it is a NavigationController or a TabBarController.

To show a ViewController as a Tab, you can add the following MvxTabBarPresentationAttribute:

Where:

  • The second parameter defines the title of the tab to be displayed.
  • The third parameter sets the name of the resource that will be used to display the tab’s icon.
  • The fourth parameter tells the presenter if the ViewController should be wrapped into a NavigationController, which is extremely useful when showing Tabs, since you probably will want to display – child – ViewControllers over the “tab root”.

To show a ViewController as a child you will have to add this simple attribute:

And that’s it! It will be displayed inside any host NavigationController.

Regarding modal ViewControllers – or more properly presented ViewControllers – the parameters are the same as for tabs. The MvxTabPresentationAttribute might look like this:

This is telling the presenter to display the ViewController as a modal, but also to wrap it inside a NavigationController.

 

Now finally, from the Core project side there is not much happening. All you have to do is to call ShowViewModel<AnyViewModel>() as you always did and the Presenter (plus the attributes) will do the rest.

 

For a running sample you can checkout the TabsSample that’s inside the MvvmCross-iOSSupport repository.

 

Nicolas Milcoff.

 

 

2 comments on “Tabs Presenter for MvvmCross”

  1. broderie says:

    Appreciate this post. Let me try it out.

  2. Van Raisch says:

    I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my view, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever before.

Leave a Reply

Your email address will not be published. Required fields are marked *