mirror of
https://github.com/material-components/material-components-ios.git
synced 2026-02-20 08:27:32 +08:00
1080e89422
* [ActivityIndicator] Swift first in README * [AnimationTiming] Swift first in readme. * [AppBar] Swift first in readme. * [ButtonBar] Swift first in readme. * [Buttons] Swift first in readme. * [CollectionLayoutAttributes] Swift first in readme * [Collections] Swift first in readme. * [Dialogs] Swift first in readme. * [FeatureHighlight] Swift first in readme. * [FlexibleHeader] Swift first in readme. * [FontDiskLoader] Swift first in readme. * [HeaderStackView] Swift first in readme. * [Ink] Swift first in readme. * [NavigationBar] Swift first in readme. * [OverlayWindow] Adding missing site comments. Swift first in readme. * [PageControl] Swift first in readme. * [Palettes] Swift first in readme. * [ProgressView] Swift first in readme. * [RobotoFontLoader] Swift first in readme. * [ShadowElevations] Swift first in readme. * [ShadowLayer] Swift first in readme. * [Slider] Swift first in readme. * [Snackbar] Swift first in readme. * [SpritedAnimationView] Swift first in readme. * [Switch] Swift first in readme. * [Typography] Swift first in readme. * [ShadowLayer] Reducing font size in readme. * [Switch] Reducing font size in readme.
127 lines
2.5 KiB
Markdown
127 lines
2.5 KiB
Markdown
# Header Stack View
|
|
|
|
<!--{% if site.link_to_site == "true" %}-->
|
|
[](docs/assets/header_stack_view.mp4)
|
|
<!--{% else %}<div class="ios-animation right" markdown="1"><video src="docs/assets/header_stack_view.mp4" autoplay loop></video></div>{% endif %}-->
|
|
|
|
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="https://material-ext.appspot.com/mdc-ios-preview/components/HeaderStackView/apidocs/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 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:
|
|
|
|
<!--<div class="material-code-render" markdown="1">-->
|
|
#### Swift
|
|
~~~ swift
|
|
import MaterialComponents
|
|
~~~
|
|
|
|
#### Objective-C
|
|
|
|
~~~ objc
|
|
#import "MaterialHeaderStackView.h"
|
|
~~~
|
|
<!--</div>-->
|
|
|
|
|
|
Header Stack View provides MDCHeaderStackView, which is a UIView subclass.
|
|
|
|
<!--<div class="material-code-render" markdown="1">-->
|
|
#### Swift
|
|
~~~ swift
|
|
let headerStackView = MDCHeaderStackView()
|
|
~~~
|
|
|
|
#### Objective-C
|
|
|
|
~~~ objc
|
|
MDCHeaderStackView *headerStackView = [[MDCHeaderStackView alloc] init];
|
|
~~~
|
|
<!--</div>-->
|
|
|
|
You may provide a top bar:
|
|
|
|
<!--<div class="material-code-render" markdown="1">-->
|
|
#### Swift
|
|
~~~ swift
|
|
headerStackView.topBar = navigationBar
|
|
~~~
|
|
|
|
#### Objective-C
|
|
|
|
~~~ objc
|
|
headerStackView.topBar = navigationBar;
|
|
~~~
|
|
<!--</div>-->
|
|
|
|
You may provide a bottom bar:
|
|
|
|
<!--<div class="material-code-render" markdown="1">-->
|
|
#### Swift
|
|
~~~ swift
|
|
headerStackView.bottomBar = tabBar
|
|
~~~
|
|
|
|
#### Objective-C
|
|
|
|
~~~ objc
|
|
headerStackView.bottomBar = tabBar;
|
|
~~~
|
|
<!--</div>-->
|