- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Search Input Summary
- Content
- Accessibility
- Contributing
- Localisation
Navigation bar
The navigation bar component encapsulates a title and icon/text actions for controlling views.
Backpack/NavigationBar
Large - no back button
Day | Night |
---|---|
Large - with back button
Day | Night |
---|---|
Collapsed
Day | Night |
---|---|
Large - with style onImage
Day | Night |
---|---|
Collapsed - with style onImage
Day | Night |
---|---|
Usage
BPKNavigationBar is an implementation of parts of UIKit's UINavigationBar, specifically the large title behaviour from iOS 11 and later. It is intended to be used when the main view of a view controller scrolls in which case the navigation bar tracks the state of the scroll view.
largeTitleTextColor can be used to adjust the colour of the large title and largeTitleLayoutMargins can be used to adjust the layout position of the large title.
style can be set to .default or .onImage. When the style is set to .onImage, the navigation bar will be transparent when expanded.
Objective-C
#import <Backpack/NavigationBar.h>
BPKNavigationBar *navigationBar = [[BPKNavigationBar alloc] initWithFrame:CGRectZero];
// In viewDidLoad
[navigationBar setUpForScrollview:myScrollView];
// Optional setup of custom navigation buttons
navigationBar.leftButton.hidden = NO;
navigationBar.leftButton.title = @"Back";
[navigationBar.leftButton addTarget:self action:@selector(leftButtonPressed) forControlEvents:UIControlEventTouchUpInside];
navigationBar.rightButton.hidden = NO;
navigationBar.rightButton.title = @"Done";
[navigationBar.rightButton addTarget:self action:@selector(rightButtonPressed) forControlEvents:UIControlEventTouchUpInside];
// In scrollViewDidScroll:
[navigationBar updateWithScrollView:scrollView];
// In scrollViewDidEndDecelerating:
[navigationBar makeTitleVisibleWithScrollView:scrollView];
// In scrollViewDidEndDragging:
if (!willDecelerate) {
[navigationBar makeTitleVisibleWithScrollView:scrollView];
}
Swift
import Backpack
let navigationBar = BPKNavigationBar(frame: .zero)
// In viewDidLoad
navigationBar.setUp(for: myScrolView)
// Optional setup of custom navigation buttons
navigationBar.leftButton.isHidden = false
navigationBar.leftButton.title = "Back"
navigationBar.leftButton.addTarget(self, action: #selector(leftButtonPressed), for: .touchUpInside)
navigationBar.rightButton.isHidden = false
navigationBar.rightButton.title = "Done"
navigationBar.rightButton.addTarget(self, action: #selector(rightButtonPressed), for: .touchUpInside)
// In scrollViewDidScroll:
navigationBar.update(with: scrollView)
// In scrollViewDidEndDecelerating:
navigationBar.makeTitleVisible(with: scrollView)
// In scrollViewDidEndDragging:
if !decelerate {
navigationBar.makeTitleVisible(with: scrollView)
}
Appearance attributes
(UIColor *)largeTitleTextColor
(BPKNavigationBarStyle) style
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Oct 31, 2022, 13:20