material-components_material-components-ios/components/HeaderStackView

title	layout	section	excerpt
Header Stack View	detail	components	The Header Stack View component is a view that coordinates the layout of two vertically stacked bar views.

Header Stack View

[](docs/assets/header_stack_view.mp4)

The Header Stack View component is a view that coordinates the layout of two vertically stacked bar views.

Material Design Specifications

• App Bar

API Documentation

• MDCHeaderStackView

---

Installation

Requirements

• Xcode 7.0 or higher.
• iOS SDK version 7.0 or higher.

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/HeaderStackView'

Then, run the following command:

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:

Objective-C

#import "MaterialHeaderStackView.h"

Swift

import MaterialComponents

Header Stack View provides MDCHeaderStackView, which is a UIView subclass.

Objective-C

MDCHeaderStackView *headerStackView = [[MDCHeaderStackView alloc] init];

Swift

let headerStackView = MDCHeaderStackView()

You may provide a top bar:

Objective-C

headerStackView.topBar = navigationBar;

Swift

headerStackView.topBar = navigationBar

You may provide a bottom bar:

Objective-C

headerStackView.bottomBar = tabBar;

Swift

headerStackView.bottomBar = tabBar