2016-03-24 18:06:10 -04:00

1.9 KiB

title layout section
Header Stack View detail documentation

Header Stack View

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

Material Design Specifications

API Documentation


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

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:

MDCHeaderStackView *headerStackView = [MDCHeaderStackView new];

You may provide a top bar:

headerStackView.topBar = navigationBar;

You may provide a bottom bar:

headerStackView.bottomBar = tabBar;

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

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

Add the view:

[self.view addSubview:headerStackView];