Skip to content

Implementation of an iOS view with a customizable header that collapses on scrolling.

License

Notifications You must be signed in to change notification settings

mattga/MGCollapsingHeader

Repository files navigation

MGCollapsingHeader

Pod Version License

An iOS UIView subclass to manage collapsing and expanding of a header view. Subviews of the header are configured to transform to any collapsed layout. The header works with any UIScrollView, and transforms views as the user scrolls through content.

Demo Gif

Requirements

  • Autolayout (constraints are relied on to transform subviews)
  • Supports iOS 7+

Installation

With CocoaPods:
pod 'MGCollapsingHeader'

Or simply copy the MGCollapsingHeader/ folder into your project.

How to use

To use the collapsible header, you must first setup your UIViewController with a header view. Simply set the class of this view to MGCollapsingHeaderView and then you can configure how to transform the header. The view collapses to a size of 60 px by default, but can be set:

[self.headerView setMinimumHeaderHeight:100.]

You can then provide a vertical constraint (or constraints) to collapse, whether it be the header's top, bottom, or height.

[self.headerView setCollapsingConstraint:_headerHeight]
// or
[self.headerView setCollapsingConstraint:_tableViewTop];

Next, add any views to transform with the header as it collapses:

  • [MGTransform transformAttribute:byValue:] Adds a view that transforms by some value as the user scrolls. An array of MGTransformAttribute must be provided to describe the transformation. See Attributes for what is supported.
  • [MGTransform addFadingSubview:fadeBy:] Adds a view that fades as the user scrolls.

Examples (from the demo):

[self.headerView addFadingSubview:self.button1 fadeBy:0.3];
[self.headerView addFadingSubview:self.button2 fadeBy:0.3];
[self.headerView addFadingSubview:self.button3 fadeBy:0.3];

NSArray *attrs;
double r = 16.0;
attrs    = @[
    [MGTransform transformAttribute:MGAttributeX byValue:-r],
    [MGTransform transformAttribute:MGAttributeY byValue:-r],
    [MGTransform transformAttribute:MGAttributeWidth byValue:2 * r],
    [MGTransform transformAttribute:MGAttributeHeight byValue:2 * r],
    [MGTransform transformAttribute:MGAttributeCornerRadius byValue:r],
    [MGTransform transformAttribute:MGAttributeFontSize byValue:12.0]
];
[self.headerView addTransformingSubview:self.button4 attributes:attrs];

// Push this button closer to the bottom-right corner since the header view's height
// is resizing.
attrs = @[
    [MGTransform transformAttribute:MGAttributeX byValue:10.0],
    [MGTransform transformAttribute:MGAttributeY byValue:13.0],
    [MGTransform transformAttribute:MGAttributeWidth byValue:-32.0],
    [MGTransform transformAttribute:MGAttributeHeight byValue:-32.0]
];
[self.headerView addTransformingSubview:self.button5 attributes:attrs];

attrs = @[
    [MGTransform transformAttribute:MGAttributeY byValue:-30.0],
    [MGTransform transformAttribute:MGAttributeWidth byValue:-30.0],
    [MGTransform transformAttribute:MGAttributeHeight byValue:-20.0],
    [MGTransform transformAttribute:MGAttributeFontSize byValue:-10.]
];
[self.headerView addTransformingSubview:self.label attributes:attrs];

Lastly, tell the header view to collapse in the scrollViewDidScroll delegate call.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.headerView collapseWithScroll:scrollView];
}

Attributes

Attributes are used to describe a subview at the end of collapsing. The following are currently available:
MGAttributeX
MGAttributeY
MGAttributeWidth
MGAttributeHeight
MGAttributeAlpha
MGAttributeCornerRadius
MGAttributeShadowRadius
MGAttributeShadowOpacity
MGAttributeFontSize

The view's attributes will be (linearly) animated to from their default values.

TODO

  • Transformation curve functions (EaseIn, EaseOut, EaseInOut)

About

Implementation of an iOS view with a customizable header that collapses on scrolling.

Resources

License

Stars

Watchers

Forks

Packages

No packages published