# Header stack view The header stack view component is a view that coordinates the layout of two vertically stacked bar views. ## Design & API Documentation

• Material Design guidelines: App Bar
• API: MDCHeaderStackView

- - - ## Installation ### Installation with CocoaPods To add this component to your Xcode project using CocoaPods, add the following to your `Podfile`: ```bash pod 'MaterialComponents/HeaderStackView' ``` Then, run the following command: ```bash pod install ``` - - - ## Overview This view's sole purpose is to facilitate the relative layout of two horizontal bars. The bottom bar will bottom align and be of fixed height. The top bar will stretch to fill the remaining space if there is any. The top bar is typically a navigation bar. The bottom bar, when provided, is typically a tab bar. - - - ## Usage ### Importing Before using header stack view, you'll need to import it: #### Swift ```swift import MaterialComponents.MaterialHeaderStackView ``` #### Objective-C ```objc #import "MaterialHeaderStackView.h" ``` Header stack view provides MDCHeaderStackView, which is a UIView subclass. #### Swift ```swift let headerStackView = MDCHeaderStackView() ``` #### Objective-C ```objc MDCHeaderStackView *headerStackView = [[MDCHeaderStackView alloc] init]; ``` You may provide a top bar: #### Swift ```swift headerStackView.topBar = navigationBar ``` #### Objective-C ```objc headerStackView.topBar = navigationBar; ``` You may provide a bottom bar: #### Swift ```swift headerStackView.bottomBar = tabBar ``` #### Objective-C ```objc headerStackView.bottomBar = tabBar; ```