Upload
danhermes
View
396
Download
1
Embed Size (px)
Citation preview
Xamarin Navigation Patterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon Systems
@danhermes
About me• Software consultant since 1999• Code, write, and lead teams •Minecraft, tiki cocktails, my parrot, and digital art• I love Xamarin
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
• Founded in 1999• Develop web and mobile
apps• Microsoft technology stack
We build apps for business
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
Navigation Patterns
•Hierarchical •Modal •Drill-down list •Navigation drawer•Tabs•Springboard•Carousel
Xamarin.Forms NavigationNavigation 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
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
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();
NavigationPage
public class App : Application {{ public App() {
MainPage = new NavigationPage(new HomePage()); }}
NavigationPage:Remove and Insert• Navigation.RemovePage(page);• Navigation.InsertPageBefore(insertPage, beforePage);
Back Button
public override void OnBackButtonPressed(){ // your code here base.OnBackButtonPressed ();}
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
Modals in Xamarin.Forms
• NavigationPage for full-page modals • Alerts for user notifications • Action sheets for pop-up menus
Full Screen Modal using Push and Pop• Navigation.PushModalAsync( new nextPage());
• Navigation.PopModalAsync();
Modal: Action Sheets
Button button = new Button { Text = "Show ActionSheet" };button.Clicked += async (sender, e) =>{ String action = await DisplayActionSheet("Options", "Cancel", null, "Here", "There", "Everywhere"); label.Text = "Action is :" + action;};
State Management
• Maintain the illusion of continuity during navigation• Sharing of data between screens• Pass variables directly into an instantiated ContentPage
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
Drill-down Lists
• by Item – use a ListView• by Page – use a ListView
• Grouped – use a TableView
Use PushAsync when user clicks a row
Drill-down Lists:NavigationPage
• Wrap list page in a NavigationPagepublic class App : Application{ public App() { MainPage = new NavigationPage(new DrilldownListViewByItem ()); }}
Drill-down Lists
• Demo: DrilldownListViewByItem• Demo: DrilldownListViewByPage• Demo: DrilldownTableView
Carousel using CarouselPage
this.Children.Add(new FirstPage()); this.Children.Add(new SecondPage()); this.Children.Add(new ThirdPage());
demo
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
Xamarin.iOSNavigation• 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
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
iOSState Management
iOS developers favor public properties on the destination view controller, but iOS supports passing parameters into the destination page’s constructor
Xamarin.Forms NavigationNavigation 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
Need Something Xamarin-flavored?
• I do Xamarin consultations• I do Xamarin training• My firm does Xamarin development• We help make Xamarin projects work
Xamarin Navigation Patterns
Dan Hermesdeveloper, author, consultant,
founder of Lexicon Systems
Available on Amazon
My blog: www.mobilecsharpcafe.com
Twitter: @danhermes