- iOS 10.0+
- Xcode 9.4+
UINavigation enables you to display your app’s navigational controls in a bar along the top of the iOS device’s screen. You can use it to design a distinctive navigation bar that matches your app’s design and creates intuitive interaction for your users.
This sample code project demonstrates how to use
UIView classes as building blocks in your application’s user interface.
The project walks you through a set of examples that customize the look and behavior of
UINavigation, including views, prompts, buttons and titles of your applications navigation bar.
The sample code demonstrates different ways to modify the navigation bar directly using the appearance proxy, and indirectly by modifying the view controller’s
UINavigation. Among the levels of customization are varying bar styles, and applying custom left and right buttons known as
Change the Bar Style
You can change the bar style to match the overall appearance of your app’s design.
Tap the “Style” button to the left of the main page to change the navigation bar’s style or
UIBar. This button takes you to an action sheet where you can change the background’s appearance to default, black-opaque, or black-translucent.
To change the bar style to black-translucent:
NOTE: A navigation controller determines its
preferred based on the navigation bar style. As a result, the status bar matches the bar style, without any extra code required.
Customize the Right View
You can apply a custom
UIView to the right side of the navigation bar instead of using a
This part of the sample demonstrates placing three kinds of
UIBar on the right side of the navigation bar: a button with a title, a button with an image, and a button with a
UISegmented. An additional segmented control allows the user to toggle between the three. The initial bar button is defined in the storyboard, by dragging a
UIBar out of the object library and into the navigation bar. It also shows how to create and add each button type using code.
This code shows how to set a segmented control as the right bar button item:
Customize the Title View
You also can configure the navigation bar to use a
UIView as the title, using
UISegmented as the custom title view (center).
This code shows how to set a segmented control as the title view:
Modify the Navigation Prompt
You can provide a prompt or single line of text to the top of the navigation bar.
This part of the sample demonstrates how to use the
prompt property of a
UINavigation to display a custom line of text above the navigation bar.
Here’s how to set the navigation item’s prompt:
You can apply a custom background to a
UINavigation by adding a bar tint color or background image.
Here’s how to set the background image of a navigation bar:
Customize the Back Button
In addition, you can use an image as the back button without any back button text and without the back arrow that normally appears next to the back button, like so:
Modify Your Large Title
Another option for customizing your navigation bar includes setting its title at a larger size, thus increasing the size of the
UINavigation. For more information, refer to the
Large source file.
The code below shows how to set the background image of a navigation bar: