Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to...
Transcript of Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to...
![Page 1: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/1.jpg)
Download class materials from
university.xamarin.com
Navigation Patterns
IOS205
![Page 2: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/2.jpg)
Information in this document is subject to change without notice. The example companies,
organizations, products, people, and events depicted herein are fictitious. No association with
any real company, organization, product, person or event is intended or should be inferred.
Complying with all applicable copyright laws is the responsibility of the user.
Microsoft or Xamarin may have patents, patent applications, trademarked, copyrights, or other
intellectual property rights covering subject matter in this document. Except as expressly
provided in any license agreement from Microsoft or Xamarin, the furnishing of this document
does not give you any license to these patents, trademarks, or other intellectual property.
© 2014-2017 Xamarin Inc., Microsoft. All rights reserved.
Xamarin, MonoTouch, MonoDroid, Xamarin.iOS, Xamarin.Android, Xamarin Studio, and Visual
Studio are either registered trademarks or trademarks of Microsoft in the U.S.A. and/or other
countries.
Other product and company names herein may be the trademarks of their respective owners.
![Page 3: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/3.jpg)
1. Progress through pages of data
with stack-based navigation
2. Show different views of related
data with tab navigation
3. Display hierarchical relationships
with master/detail navigation
Objectives
![Page 4: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/4.jpg)
❖ iOS provides several ways to structure navigation in your application –
must decide the most effective way to present your information
Navigation patterns
Stack Tabs Master/Detail
![Page 5: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/5.jpg)
Progress through pages of data with
stack-based navigation
![Page 6: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/6.jpg)
1. Create a Navigation Controller
programmatically
2. Utilize the designer to create a
Navigation Controller
3. Customize the Navigation
Controller
Tasks
![Page 7: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/7.jpg)
❖ When we have a hierarchy of data, it’s convenient to use stack
navigation to browse and interact with the content
Stack navigation
Settings Notifications Passbook Notification Center
![Page 8: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/8.jpg)
❖ When a new view controller is
pushed onto the stack, it becomes
visible and hides the previous
screen
❖ Only one view controller is ever
visible at a time (the last one added)
❖ Great for displaying multi-level
relationships because it allows
"drilling" into details
Stack navigation
RootVisible
![Page 9: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/9.jpg)
❖ Stack-based navigation is built into iOS through the use of the
UINavigationController class
What is UINavigationController?
Acts as a parent to any number
of child view controllers (stored
in a stack)
Displays a Navigation Bar
above the currently
displayed view controller
![Page 10: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/10.jpg)
❖ We can create a UINavigationController programmatically, most
often added as the root view controller for the app
Create a Navigation Controller
public override bool FinishedLaunching(UIApplication application,NSDictionary launchOptions)
{window = new UIWindow (UIScreen.MainScreen.Bounds);var navVC = new UINavigationController(new FirstPageVC());
window.RootViewController = navVC;window.MakeKeyAndVisible();return true;
}
Can pass in the initial view controller
to display on the constructor
![Page 11: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/11.jpg)
❖ To navigate forward, we add (or "push") a child View Controller onto the
Navigation Controller ’s stack
Forward navigation [programmatically]
UINavigationController navVC = ...;...navVC.PushViewController(newViewController, animated:true);
Displays the new View Controller and adds it to the navigation stack, if there
was a view controller already shown, then it is hidden and a back button is
added to the navigation bar
![Page 12: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/12.jpg)
❖ View Controllers that have been added to the navigation controller can
use the NavigationController property to access it
The NavigationController property
var navCon = myViewController.NavigationController;
navCon.PushViewController(newViewController, animated:true);
The NavigationController property is only valid when this view controller is owned
by a navigation controller, otherwise it will be null!
![Page 13: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/13.jpg)
❖ Back Navigation removes the top view controller and navigates back
through the stack of child screens
Back navigation [definition]
![Page 14: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/14.jpg)
❖ When a screen is "popped" off the
stack, it's removed from the
Navigation Controller and the
screen below becomes visible
❖ Must always have at least one view
controller on the stack – popping
off the last entry will result in an
error
Back navigation
VisibleVisible
![Page 15: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/15.jpg)
❖ We can navigate back using the PopViewController method on the
Navigation Controller
Back navigation [programmatically]
var navVC = new UINavigationController(clockVC);...navVC.PopViewController(animated:true);
navVC.PopToRootViewController(animated:true);
![Page 16: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/16.jpg)
❖ Navigation controller includes methods to influence the stack directly
and properties to interrogate the current state of the navigation stack
Changing the stack
public class UINavigationController{
UIViewController TopViewController { get; }UIViewController VisibleViewController { get; }UIViewController[] ViewControllers { get; set; }
UIViewController[] PopToRootViewController(bool animated);UIViewController[] PopToViewController(
UIViewController viewController, bool animated);void SetViewControllers(UIViewController[] controllers, bool animated);
}
![Page 17: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/17.jpg)
Stack Navigation programmatically
Demonstration
![Page 18: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/18.jpg)
❖ Every View Controller has a NavigationItem property that can be
used to change the behavior and appearance of the Navigation
Controller
NavigationItem
Prompt
Title
RightBarButtonItem(s)
![Page 19: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/19.jpg)
❖ UIBarButtonItem objects can be used to add buttons to the
Navigation Bar
UIBarButtonItem
RightBarButtonItem(s)LeftBarButtonItem(s)
![Page 20: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/20.jpg)
❖ The UIBarButtonItems are available in the UINavigationItemproperty
UIBarButtonItems
LeftBarButtonItem RightBarButtonItem BackBarButtonItem
Appears to the left of the
title – note this replaces
the default back button
Appears to the right of
the title on the navigation
bar
Appears to the left of the
title when navigating one
level deeper
You can add multiple buttons on the left and right sides using the plural forms which
take an array of buttons – LeftBarButtonItems and RightBarButtonItems
![Page 21: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/21.jpg)
❖ To add bar button items programmatically, set the properties in the
currently active UIViewController using the NavigationItemproperty
Add BarButtonItems programmatically
this.NavigationItem.LeftBarButtonItem = new UIBarButtonItem(...);
this.NavigationItem.RightBarButtonItem = new UIBarButtonItem(...);
this.NavigationItem.BackBarButtonItem = new UIBarButtonItem(...);
![Page 22: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/22.jpg)
❖ iOS supports two sizes for the page title displayed in the navigation bar
Navigation bar title size
LargeNormal
![Page 23: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/23.jpg)
❖ UINavigationBar can display large titles by setting the PrefersLargeTitles
property to true
Navigation bar large titles
public override void ViewDidLoad(){
NavigationController.NavigationBar.PrefersLargeTitles = true;}
![Page 24: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/24.jpg)
❖ By default, setting PrefersLargeTitles to true will cause child pages to
have large titles as well
Title size inheritance
![Page 25: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/25.jpg)
❖ NavigationItem has a property called LargeTitleDisplayMode to control
whether a view controller wants to participate in having large titles
Participating in large titles
public override void ViewDidLoad(){
NavigationItem.LargeTitleDisplayMode = UINavigationItemLargeTitleDisplayMode.}
The default value is Automatic
![Page 26: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/26.jpg)
❖ The visibility of the navigation bar can be changed by setting properties
on the UINavigationController
Hiding the Navigation Bar
These properties are
accessed directly from an
instance of a UINavigationController
![Page 27: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/27.jpg)
❖ We can add a UINavigationController to a Storyboard using the
iOS Designer
UINavigationController in the Designer
Use the Toolbox and
search for Navigation
Controller
Design provides a
UINavigationControllerand one child
UIViewController
![Page 28: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/28.jpg)
❖ To add view controllers to the navigation stack using the designer - use
the Show Segue
Navigation using Segues
![Page 29: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/29.jpg)
❖ To interact with a View Controller before it’s displayed via a Segue,
override the PrepareForSegue method on the source View Controller
Prepare for Segue
public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
{base.PrepareForSegue (segue, sender);
var aboutVC = segue.DestinationViewController asAboutViewController;
...}
Must cast the destination
View Controller to access
custom properties and
methods
![Page 30: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/30.jpg)
❖ To instantiate a View Controller defined in a Storyboard programmatically,
use the InstantiateViewController method
Instantiating a View Controller
UIViewController controller = ...;var sb = controller.Storyboard;
var newVC = sb.InstantiateViewController ("myViewController");
controller.PushViewController (newVC, true);
The parameter must be a valid
storyboard identifierCan then push the new controller
onto the navigation stack
![Page 31: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/31.jpg)
Add a UINavigationController to a storyboard
Individual Exercise
![Page 32: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/32.jpg)
1. Create a Navigation Controller
programmatically
2. Utilize the designer to create a
Navigation Controller
3. Customize the Navigation
Controller
Summary
![Page 33: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/33.jpg)
Show different views of related data
with tab navigation
![Page 34: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/34.jpg)
1. Create a Tab Bar Controller
2. Populate a Tab Bar Controller
3. Customize the Tab Bar Controller
Tasks
![Page 35: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/35.jpg)
❖ Tab navigation allows users to quickly switch
between view controllers by selecting tabs
displayed at the bottom of the screen
▪ Ideal for 3-5 screens of equal importance
Tab navigation
The active page's
tab is highlighted
![Page 36: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/36.jpg)
❖ iOS implements tab navigation with the UITabBarController
What is a UITabBarController?
Displays tabs at the bottom of the screen,
each tab can show an icon and a label
A UITabBarController can hold a UINavigationController within a tab
![Page 37: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/37.jpg)
❖ A UITabBarItem is an object used to describe the appearance of a
single tab within a Tab Bar Controller
UITabBarItem
var tbi = new UITabBarItem("Clock", UIImage.FromBundle("clock.png"), 0);
UITabBarItem constructor takes a title, an image, and an
integer "tag" which can be used to identify the item later
![Page 38: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/38.jpg)
❖ Every View Controller has a TabBarItem property which can be set to
an instance of a UITabBarItem
Using the UITabBarItem
var tabViewController = new ClockViewController();var tbi = new UITabBarItem("Clock", UIImage.FromBundle("clock.png"), 0);tabViewController.TabBarItem = tbi;
Setting the TabBarItem property will determine the title and image shown
on a tab for this view controller when it's added to a tab bar controller
![Page 39: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/39.jpg)
❖ Add children to tab controller using the ViewControllers property
UITabBarController programmatically
public class MyTabBarController : UITabBarController{
public override void ViewDidLoad(){
base.ViewDidLoad();
var vc1 = new ClockViewController {TabBarItem = new UITabBarItem("Clock",
UIImage.FromBundle("clock"), 0);};...this.ViewControllers = new UIViewController[] { vc1, vc2, vc3 };
}}
The ViewControllersproperty is set to an array
of UIViewControllers
![Page 40: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/40.jpg)
❖ Images can be set on the tabs; resource images or system image can be
displayed
TabBar images
Image base size should be at
least 25x25 (32x32 is ideal)
Prefer monochromatic, transparent
images for template (stencil) filtering
Remember to include @2x (64x64) and @3x (96x96) images for high-resolution devices
![Page 41: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/41.jpg)
❖ UITabBarSystemItem provides a small selection of built-in images that
can be used to decorate the tabs
UITabBarSystemItem
var tab1 = new FavoritesViewController ();
tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);
Each item has a set title that
cannot be changed
Favorites
UITabBarSystemItems can also be set from the property panel in the designer
![Page 42: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/42.jpg)
❖ The UITabBarController can show up to 5 tabs on the iPhone and 8
tabs on the iPad or iPhone 6+; if more tabs are added then the system
creates a "more" tab and displays the remainder in a system-provided
Table View
Overflowing the UITabBarController
Overflow (more) tab
![Page 43: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/43.jpg)
❖ To respond to selection events on the UITabBarController, subscribe
to the ViewControllerSelected event handler
Detecting tab selection
public class ClockTabBarController : UITabBarController{
public override void ViewDidLoad(){
...this.ViewControllerSelected += TabSelected;
}...
}
![Page 44: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/44.jpg)
❖ To determine which tab is selected, use TabBar.SelectedItem property
TabBar selected item
public class ClockTabBarController : UITabBarController{
...void TabSelected (object sender, UITabBarSelectionEventArgs e){
var alert = new UIAlertView("Tab tapped", this.TabBar.SelectedItem.Title, null, "OK", null);
alert.Show(); }...
}
![Page 45: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/45.jpg)
❖ A Badge can be added to a tab to display a small amount of text by
setting the BadgeValue property on a UITabBarItem
Tab Badges
updatesVC.TabBarItem.BadgeValue = "7";
updatesVC.TabBarItem.BadgeValue = null;
![Page 46: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/46.jpg)
❖ The Xamarin iOS designer can be used to add a UITabBarControllerto a Storyboard
Add a Tab Bar Controller to a Storyboard
Use the Toolbox and
search for TabBar
ControllerProvides a
UITabBarControllerand two child UIViewControllers
![Page 47: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/47.jpg)
❖ The designer will show additional UI and properties when a child view
controller is connected to a UITabBarController via a Segue
Customizing the Tabs from the Designer
Set the title and
tab bar image
![Page 48: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/48.jpg)
Add a UITabBarController to a Storyboard
Individual Exercise
![Page 49: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/49.jpg)
1. Create a Tab Bar Controller
2. Populate a Tab Bar Controller
3. Customize the Tab Bar Controller
Summary
![Page 50: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/50.jpg)
Display hierarchical
relationships with
master/detail navigation
![Page 51: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/51.jpg)
1. Create a Split View Controller
2. Use a Split View Controller
programmatically
3. Use the iOS Designer to define a
Split View Controller
Tasks
![Page 52: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/52.jpg)
❖ A Master/Detail navigation pattern displays a “Master” list used for
primary navigation along side a second visual area displaying the
“Details” for the currently selected item
Master/Detail navigation
Item 1
Item 2
Item 3
Item 4
Item 2
Details
Master Detail
![Page 53: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/53.jpg)
❖ The UISplitViewController class manages the display of two side-
by-side view controllers
What is the UISplitViewController?
Left displays a list of
items for navigation
(Master)
Right displays details
about the selected item
(Detail)
![Page 54: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/54.jpg)
❖ When the Split View Controller is used on smaller displays (iPhone), it
“collapses” so only one View Controller is shown, effectively mimicking a UINavigationController
Master/Detail Responsive design
iPhone iPadNavigation on tablets is limited to two levels. Best practice is to limit to two levels for
consistent behavior on phone and tablet.
![Page 55: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/55.jpg)
❖ When creating a UISplitViewController programmatically, the
master/detail views are assigned to the ViewControllers property
Creating a SplitView Controller
public class EventSplitViewController : UISplitViewController{
MasterViewController masterView;DetailViewController detailView;
public EventSplitViewController() : base(){
masterView = new MasterViewController();detailView = new DetailViewController();
ViewControllers = new UIViewController[] { masterView, detailView };}
}
![Page 56: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/56.jpg)
❖ There is an adaptive method ShowViewController, defined on the
UIViewController which is used for forward navigation
Navigating programmatically
public void ShowViewController(UIViewController controller, NSObject sender)
Sets the master view, or current navigation view, or modal view
![Page 57: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/57.jpg)
❖ The ShowDetailViewController method is used to update the
detail view in a Split View Controller
Navigating programmatically
public void ShowDetailViewController(UIViewController controller, NSObject sender)
Replaces the detail view (right side of a split view)
![Page 58: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/58.jpg)
❖ The Xamarin iOS designer can be used to add a
UISplitViewController to a Storyboard
Add a Split View Controller [Designer]
Provides a UISplitViewController
and three child view
controllers
Use the Toolbox and
search for Split View
Controller
![Page 59: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/59.jpg)
❖ The Xamarin iOS designer provides a UITableViewController within
a UINavigationController for the Master UI, and a simple
UIViewController for the details UI
Master/Detail View Controllers
UIViewController(Detail)
UITableViewController(Master)
![Page 60: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/60.jpg)
Flash Quiz
![Page 61: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/61.jpg)
① Which method would you use to replace the Master view for a
UISplitViewController?
a) PushViewController
b) PresentModalViewController
c) ShowViewController
Flash Quiz
![Page 62: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/62.jpg)
① Which method would you use to replace the Master view for a
UISplitViewController?
a) PushViewController
b) PresentModalViewController
c) ShowViewController
Flash Quiz
![Page 63: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/63.jpg)
② The UISplitViewController will show both the master and detail
views when displayed on an iPad Mini
a) True
b) False
Flash Quiz
![Page 64: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/64.jpg)
② The UISplitViewController will show both the master and detail
views when displayed on an iPad Mini
a) True
b) False
Flash Quiz
![Page 65: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/65.jpg)
Add a UISplitViewController to a Storyboard
Individual Exercise
![Page 66: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/66.jpg)
1. Create a Split View Controller
2. Use a Split View Controller
programmatically
3. Use the iOS Designer to define a
Split View Controller
Summary
![Page 67: Navigation Patterns · with master/detail navigation Objectives iOS provides several ways to structure navigation in your application – ... TabBar images Image base size should](https://reader034.fdocuments.net/reader034/viewer/2022050315/5f77e8c30c84c973c3304d06/html5/thumbnails/67.jpg)
Thank You!
Please complete the class survey in your profile:
university.xamarin.com/profile