<commit_before>---
title:  "Header Stack View"
layout: detail
section: documentation
excerpt: "The Header Stack View component is a view that coordinates the layout of two vertically-stacked bar views."
---
# Header Stack View

![Header Stack View](docs/assets/headerstackview_screenshot.png)
<!--{: .ios-screenshot .right }-->

The Header Stack View component is a view that coordinates the layout of two vertically-stacked
bar views.
<!--{: .intro }-->

### Material Design Specifications

<ul class="icon-list">
  <li class="icon-link"><a href="https://www.google.com/design/spec/">TODO</a></li>
</ul>

### API Documentation

<ul class="icon-list">
  <li class="icon-link"><a href="/apidocs/HeaderStackView/Classes/MDCHeaderStackView.html">MDCHeaderStackView</a></li>
</ul>


- - -

## 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`:

~~~ bash
$ pod 'MaterialComponents/HeaderStackView'
~~~

Then, run the following command:

~~~ bash
$ pod install
~~~


- - -

## Usage

This view's sole purpose is to facilitate the relative layout of its two bars in a predictable way.

The top bar is typically a navigation bar. The bottom bar, when provided, is typically a tab bar.

TODO(featherless): Add link to specification (do this above).

TODO(featherless): Add conceptual screenshots of the various scenarios. To include:

- Only a top bar.
- Only a bottom bar.
- Two bars.

TODO(featherless): Discuss relationship to UIStackView introduced in iOS 9.


- - -

## Integration

The HeaderStackView can be treated like a typical UIView.

Create a header stack view:

~~~ objc
MDCHeaderStackView *headerStackView = [MDCHeaderStackView new];
~~~

You may provide a top bar:

~~~ objc
headerStackView.topBar = navigationBar;
~~~

You may provide a bottom bar:

~~~ objc
headerStackView.bottomBar = tabBar;
~~~

You'll certainly size the header stack view to fit:

~~~ objc
headerStackView.frame = self.view.bounds;
[headerStackView sizeToFit];
~~~

Add the view:

~~~ objc
[self.view addSubview:headerStackView];
~~~
<commit_msg>[HeaderStackView] Fleshing out the README.md.<commit_after>---
title:  "Header Stack View"
layout: detail
section: documentation
excerpt: "The Header Stack View component is a view that coordinates the layout of two vertically-stacked bar views."
---
# Header Stack View

![Header Stack View](docs/assets/headerstackview_screenshot.png)
<!--{: .ios-screenshot .right }-->

The Header Stack View component is a view that coordinates the layout of two vertically-stacked
bar views.
<!--{: .intro }-->

### Material Design Specifications

<ul class="icon-list">
  <li class="icon-link"><a href="https://www.google.com/design/spec/layout/structure.html#structure-app-bar">App Bar</a></li>
</ul>

### API Documentation

<ul class="icon-list">
  <li class="icon-link"><a href="/apidocs/HeaderStackView/Classes/MDCHeaderStackView.html">MDCHeaderStackView</a></li>
</ul>


- - -

## 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`:

~~~ 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 top bar is typically a navigation bar. The bottom bar, when provided, is typically a tab bar.



- - -

## Usage

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

<!--<div class="material-code-render" markdown="1">-->
#### Objective-C

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

#### Swift
~~~ swift
~~~
<!--</div>-->

You may provide a top bar:

<!--<div class="material-code-render" markdown="1">-->
#### Objective-C

~~~ objc
headerStackView.topBar = navigationBar;
~~~

#### Swift
~~~ swift
headerStackView.topBar = navigationBar
~~~
<!--</div>-->

You may provide a bottom bar:

<!--<div class="material-code-render" markdown="1">-->
#### Objective-C

~~~ objc
headerStackView.bottomBar = tabBar;
~~~

#### Swift
~~~ swift
headerStackView.bottomBar = tabBar
~~~
<!--</div>-->

{'fraction_non_alphanumeric': 0.14106081390032008, 'fraction_numerical': 0.0027434842249657062, 'mean_word_length': 4.2270011947431305, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2870730', 'n_tokens_mistral': 1435, 'n_tokens_neox': 1334, 'n_words': 454}