Dan Hermes, author of Xamarin Mobile Application Development, talks about how to give your users what they need to get around your Xamarin app quickly, moving from screen to screen with confidence and ease. Menus, tappable icons, buttons, tabs, and lists all offer ways to navigate your app. Dan will discuss industry-standard approaches for tying an app’s screens together in elegant and usable ways called navigation design patterns, based upon the concepts in his new book. Here are the most common mobile UI navigation patterns used in Xamarin development:
• Hierarchical
• Modal
• Drill-down list
• Navigation drawer
• Tabs
• Springboard
• Carousel
Learn how to use these navigation patterns in Xamarin.Forms and how to approach them in Xamarin.Android and Xamarin.iOS. Moving between screens also requires passing data between them. Dan will talk about different ways to maintain state during navigation.
You will learn about how to:
• Create navigation to get your user from screen-to-screen
• Create many kinds of menus
• Manage state and passing data between pages
• Combine navigation patterns to form a complete app
1. Xamarin Navigation Patterns
Dan Hermes
developer, author, consultant,
founder of Lexicon Systems
dan@lexiconsystemsinc.com
www.mobilecsharpcafe.com
@danhermes
2. About me
• Software consultant since 1999
• Code, write, and lead teams
• Minecraft, tiki cocktails, my parrot, and digital art
• I love Xamarin
3. Xamarin Book
Now Available on Amazon
“This weighty book gives clear guidance that will help you
build quality apps, starting with architectural considerations,
and then jumping into practical code strategies.”
- Bryan Costanich, Vice President, Xamarin
“Dan Hermes’ extraordinary book is the most intelligent work
on cross-platform mobile development I’ve seen.”
– Jesse Liberty, Director of New Technology Development, Falafel Software,
Xamarin Certified Developer / Xamarin MVP
4. • Founded in 1999
• Develop web and mobile
apps
• Microsoft technology stack
We build apps for business
9. What is Navigation?
• Gives users what they need to get around
an app quickly, moving from screen to
screen with confidence and ease
• This may include menus, tappable icons,
buttons, tabs, and list items, as well as
many types of gesture-sensitive screens to
display data, information, and options to
the user
19. Hierarchical
• stack-based pattern
• allows users to move down into a stack of screens
• pop back out again, one screen at a time
• drill-down or breadcrumb
21. Hierarchical Navigation
using NavigationPage
• Instantiate a NavigationPage and pass in a ContentPage
• In the child page:
• Set Title and Icon Properties
• Navigation.PushAsync (new MyPage)
• Navigation.PopAsync();
27. Modal Types
1. Box: floats on top of the main page and is usually an alert, dialog
box, or menu that the user can respond to or cancel
2. Screen: replaces the main page entirely, interrupting the
hierarchical navigation stack
28. Modals in Xamarin.Forms
• NavigationPage for full-page modals
• Alerts for user notifications
• Action sheets for pop-up menus
29. Full Screen Modal
using Push and Pop
• Navigation.PushModalAsync( new nextPage());
• Navigation.PopModalAsync();
35. State Management
• Maintain the illusion of continuity during navigation
• Sharing of data between screens
• Pass variables directly into an instantiated ContentPage
36. Passing Data
• Pass data values directly into a page’s constructor
• Static Properties dictionary on the Application object to persist key/
value pairs to disk
• Static data instance (global) available to all pages
• Static properties on the Application object
39. Drill-down Lists
• by Item – use a ListView
• by Page – use a ListView
• Grouped – use a TableView
Use PushAsync when user clicks a row
40. Drill-down Lists:
NavigationPage
• Wrap list page in a NavigationPage
public class App : Application
{
public App()
{
MainPage = new NavigationPage(new DrilldownListViewByItem
());
}
}
46. Xamarin.Android
Navigation
• Hierarchical navigation using Toolbar or ActionBar
• Modal using DialogFragment, AlertDialog, and PopupMenu
• Drill-down list using ListView
• Navigation drawer using DrawerLayout
• Tabs using ActionBar
47. Xamarin.iOS
Navigation
• Hierarchical navigation using UINavigationController, the push segue,
or the PushViewController
• Modal using the modal segue, the PresentViewController, and
UIAlertAcontroller
• Drill-down list using UINavigationController
• Navigation drawer using components
• Tabs using UITabBarController
48. Android
State Management
Android uses a class called Bundle, which is a
dictionary that contains passed values,
housed inside a class called Intent, which we
use to call new activities
49. iOS
State Management
iOS developers favor public properties on the
destination view controller, but iOS supports
passing parameters into the destination
page’s constructor
50. Xamarin.Forms Navigation
Navigation Pattern Xamarin.Forms Class
Hierarchical NavigationPage
Modal NavigationPage, alerts, and ActionSheets
Drill-down lists NavigationPage, ListView, and TableView
Navigation drawer MasterDetailPage
Tabs TabbedPage
Springboard images with gesture recognizers
Carousel CarouselPage
51. It’s all on GitHub
https://github.com/danhermes/xamarin-book-examples
52. Need Something Xamarin-flavored?
• I do Xamarin consultations
• I do Xamarin training
• My firm does Xamarin development
• We help make Xamarin projects work
53. Xamarin Navigation
Patterns
Dan Hermes
developer, author, consultant,
founder of Lexicon Systems
dan@lexiconsystemsinc.com
Available on
Amazon
My blog: www.mobilecsharpcafe.com
Twitter: @danhermes
Notas del editor
Why all the funny names? CROSS PLATFORM terms
Inspired in part by by Adam Kemp’s blog post, Navigation in Xamarin.Forms
and Mobile Design Pattern Gallery by Theresa Neil
@TheRealAdamKemp
Why all the funny names? CROSS PLATFORM terms
Inspired in part by by Adam Kemp’s blog post, Navigation in Xamarin.Forms
and Mobile Design Pattern Gallery by Theresa Neil
@TheRealAdamKemp
Why all the funny names? CROSS PLATFORM terms
Inspired in part by by Adam Kemp’s blog post, Navigation in Xamarin.Forms
and Mobile Design Pattern Gallery by Theresa Neil
@TheRealAdamKemp
Carousel – we’ll get to it. – Doesn’t show well in a static image
images
Drill-down (push onto stack), pop back up
images
Dropdown menu - ToolBarItems
Single, interruptive pop-up or screen
can usually be dismissed with a Cancel button
Both the global and Application object techniques use the singleton pattern, and are useful for app-wide classes such as data access or business objects.
Activity and fragment properties are available but not recommended (rotation, low mem, etc.)