From 071da22a73c9bbb6d19f203e93ea14a304cdf359 Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 22:20:34 -0600 Subject: [PATCH 1/7] Update README.md --- README.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8904672..9edc470 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # MGCollapsibleHeader -A UIView subclass to manage collapsing and expanding of a header view. Subviews of the header are configured to transform to any collapsed layout. Intended to work with UIScrollView and UITableView as the user scrolls through content, but by all means can be used in other ways. +A 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 is intended to work with a UIScrollView or UITableView as the user scrolls through content, but by all means can be used in other ways. ![Demo Gif](Screenshots/mgcollapsibleheader_demo.gif) @@ -12,6 +12,19 @@ pod 'MGCollapsibleHeader' Or simply copy the `MGCollapsibleHeader/` folder into your project. ##How to use +To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to collapse. The view reduces to a size of 60 px by default, but can be set as follows. ```objc +[self.headerView setMinimumHeaderHeight:100.] +``` + +You can then provide the top `NSLayoutConstraint` of a body view to expand as the header collapses. +```objc +[self.headerView setBodyViewTop:self.tableViewTop] +``` -``` \ No newline at end of file +Lastly, trigger the header view to collapse. `scrollViewDidScroll` is the ideal place for this. +```objc +- (void)scrollViewDidScroll:(UIScrollView *)scrollView { + [self.headerView collapseToOffset:scrollView.contentOffset]; +} +``` From 61a9cf1b28f1107cb6e1ecf60deec1a1c3787949 Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 22:47:40 -0600 Subject: [PATCH 2/7] Update README.md --- README.md | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9edc470..77b801b 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ pod 'MGCollapsibleHeader' Or simply copy the `MGCollapsibleHeader/` folder into your project. ##How to use -To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to collapse. The view reduces to a size of 60 px by default, but can be set as follows. +To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: ```objc [self.headerView setMinimumHeaderHeight:100.] ``` @@ -22,9 +22,42 @@ You can then provide the top `NSLayoutConstraint` of a body view to expand as th [self.headerView setBodyViewTop:self.tableViewTop] ``` +Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: +1. `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#Attributes) for more on how to configure the transformation. +2. `addFadingSubview:fadeBy:` Adds a subview of the header that fades as the user scrolls. + +Here are some examples from the Demo: +```objc + [self.headerView addFadingSubview:self.button1 fadeBy:.4]; + [self.headerView addFadingSubview:self.label fadeBy:.75]; + [self.headerView addTransformingSubview:self.button4 + attributes:@[[MGTransformAttribute attribute:MGAttributeX value:520.], + [MGTransformAttribute attribute:MGAttributeY value:20.], + [MGTransformAttribute attribute:MGAttributeWidth value:40.], + [MGTransformAttribute attribute:MGAttributeHeight value:35.]]]; + [self.headerView addTransformingSubview:self.titleLabel + attributes:@[[MGTransformAttribute attribute:MGAttributeY value:20.], + [MGTransformAttribute attribute:MGAttributeWidth value:120.], + [MGTransformAttribute attribute:MGAttributeHeight value:34.], + [MGTransformAttribute attribute:MGAttributeCornerRadius value:17.]]]; +``` + Lastly, trigger the header view to collapse. `scrollViewDidScroll` is the ideal place for this. ```objc - (void)scrollViewDidScroll:(UIScrollView *)scrollView { [self.headerView collapseToOffset:scrollView.contentOffset]; } ``` + +###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` + +These attributes will be (linearly) animated to from their default values of the corresponding view. From 0046779edcfa6b349cc056b2e1692c29c53fcead Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 22:50:52 -0600 Subject: [PATCH 3/7] Update README.md --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 77b801b..592ccc0 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,8 @@ You can then provide the top `NSLayoutConstraint` of a body view to expand as th [self.headerView setBodyViewTop:self.tableViewTop] ``` -Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: -1. `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#Attributes) for more on how to configure the transformation. +Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: +1. `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#attributes) for more on how to configure the transformation. 2. `addFadingSubview:fadeBy:` Adds a subview of the header that fades as the user scrolls. Here are some examples from the Demo: @@ -61,3 +61,7 @@ Attributes are used to describe a subview at the end of collapsing. The followin `MGAttributeShadowOpacity` These attributes will be (linearly) animated to from their default values of the corresponding view. + +##TODO +- Transformation curve functions (EaseIn, EaseOut, EaseInOut) +- Add delegate calls From 87a47a8532c95ff81514bb2f1c895e4792693d2b Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 22:52:47 -0600 Subject: [PATCH 4/7] Update README.md --- README.md | 44 +++++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 592ccc0..0fdc9f7 100644 --- a/README.md +++ b/README.md @@ -12,21 +12,23 @@ pod 'MGCollapsibleHeader' Or simply copy the `MGCollapsibleHeader/` folder into your project. ##How to use -To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: +To use the collapsible header, you must first configure your `UIViewController` with a header view. + +1. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: ```objc [self.headerView setMinimumHeaderHeight:100.] -``` - -You can then provide the top `NSLayoutConstraint` of a body view to expand as the header collapses. +``` + +2. You can then provide the top `NSLayoutConstraint` of a body view to expand as the header collapses. ```objc [self.headerView setBodyViewTop:self.tableViewTop] -``` - -Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: -1. `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#attributes) for more on how to configure the transformation. -2. `addFadingSubview:fadeBy:` Adds a subview of the header that fades as the user scrolls. - -Here are some examples from the Demo: +``` + +3. Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: +- `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#attributes) for more on how to configure the transformation. +- `addFadingSubview:fadeBy:` Adds a subview of the header that fades as the user scrolls. + +Here are some examples from the Demo: ```objc [self.headerView addFadingSubview:self.button1 fadeBy:.4]; [self.headerView addFadingSubview:self.label fadeBy:.75]; @@ -40,17 +42,17 @@ Here are some examples from the Demo: [MGTransformAttribute attribute:MGAttributeWidth value:120.], [MGTransformAttribute attribute:MGAttributeHeight value:34.], [MGTransformAttribute attribute:MGAttributeCornerRadius value:17.]]]; -``` - -Lastly, trigger the header view to collapse. `scrollViewDidScroll` is the ideal place for this. +``` + +4. Lastly, trigger the header view to collapse. `scrollViewDidScroll` is the ideal place for this. ```objc - (void)scrollViewDidScroll:(UIScrollView *)scrollView { [self.headerView collapseToOffset:scrollView.contentOffset]; } -``` - -###Attributes -Attributes are used to describe a subview at the end of collapsing. The following are currently available: +``` + +###Attributes +Attributes are used to describe a subview at the end of collapsing. The following are currently available: `MGAttributeX` `MGAttributeY` `MGAttributeWidth` @@ -60,8 +62,8 @@ Attributes are used to describe a subview at the end of collapsing. The followin `MGAttributeShadowRadius` `MGAttributeShadowOpacity` -These attributes will be (linearly) animated to from their default values of the corresponding view. +These attributes will be (linearly) animated to from their default values of the corresponding view. ##TODO -- Transformation curve functions (EaseIn, EaseOut, EaseInOut) -- Add delegate calls +- Transformation curve functions (EaseIn, EaseOut, EaseInOut) +- Add delegate calls From fd6d1e81d695e6be00ae19d8d5ee2a6d72e81a73 Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 22:56:26 -0600 Subject: [PATCH 5/7] Update README.md --- README.md | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 0fdc9f7..576aa87 100644 --- a/README.md +++ b/README.md @@ -12,22 +12,19 @@ pod 'MGCollapsibleHeader' Or simply copy the `MGCollapsibleHeader/` folder into your project. ##How to use -To use the collapsible header, you must first configure your `UIViewController` with a header view. - -1. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: +To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: ```objc [self.headerView setMinimumHeaderHeight:100.] -``` - -2. You can then provide the top `NSLayoutConstraint` of a body view to expand as the header collapses. +``` + +You can then provide the top `NSLayoutConstraint` of a body view to expand as the header collapses. ```objc [self.headerView setBodyViewTop:self.tableViewTop] -``` - -3. Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: +``` + +Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: - `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#attributes) for more on how to configure the transformation. - `addFadingSubview:fadeBy:` Adds a subview of the header that fades as the user scrolls. - Here are some examples from the Demo: ```objc [self.headerView addFadingSubview:self.button1 fadeBy:.4]; @@ -44,7 +41,7 @@ Here are some examples from the Demo: [MGTransformAttribute attribute:MGAttributeCornerRadius value:17.]]]; ``` -4. Lastly, trigger the header view to collapse. `scrollViewDidScroll` is the ideal place for this. +Lastly, trigger the header view to collapse. If using scrolling, the `scrollViewDidScroll` delegate call is the ideal place for this. ```objc - (void)scrollViewDidScroll:(UIScrollView *)scrollView { [self.headerView collapseToOffset:scrollView.contentOffset]; From 1ab82790d00fa31fb3a01cebb3d7226314255ad9 Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 22:57:36 -0600 Subject: [PATCH 6/7] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 576aa87..afec850 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ pod 'MGCollapsibleHeader' Or simply copy the `MGCollapsibleHeader/` folder into your project. ##How to use -To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: +To use the collapsible header, you must first configure your `UIViewController` with a header view. Simply set the Class of this view as `MGCollapsibleHeaderView` and it will be ready to configure. The view collapses to a size of 60 px by default, but can be set: ```objc [self.headerView setMinimumHeaderHeight:100.] ``` @@ -41,7 +41,7 @@ Here are some examples from the Demo: [MGTransformAttribute attribute:MGAttributeCornerRadius value:17.]]]; ``` -Lastly, trigger the header view to collapse. If using scrolling, the `scrollViewDidScroll` delegate call is the ideal place for this. +Lastly, trigger the header view to collapse. If using scrolling, the `scrollViewDidScroll` delegate call is the ideal place for this. ```objc - (void)scrollViewDidScroll:(UIScrollView *)scrollView { [self.headerView collapseToOffset:scrollView.contentOffset]; From 06f34266a8b1ffe61c1b53655062a422b38e87aa Mon Sep 17 00:00:00 2001 From: mattga Date: Sat, 12 Dec 2015 23:05:17 -0600 Subject: [PATCH 7/7] Update README.md --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index afec850..90edd15 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,10 @@ A UIView subclass to manage collapsing and expanding of a header view. Subviews ![Demo Gif](Screenshots/mgcollapsibleheader_demo.gif) +##Requirements +-This custom header view relies on constraints to transform subviews. AutoLayout is assumed to be enabled and used. +-Supports iOS 7, 8, 9 + ##Installation ###### With [Cocoa Pods](https://cocoapods.org/): ```ruby @@ -23,8 +27,8 @@ You can then provide the top `NSLayoutConstraint` of a body view to expand as th ``` Next, add any subviews of the header (or any views really), to animate with the header as it collapses. Two methods are available to you: -- `addTransformingSubview:attributes:` Adds a subview of the header that transforms as the user scrolls. See [Attributes](#attributes) for more on how to configure the transformation. -- `addFadingSubview:fadeBy:` Adds a subview of the header that fades as the user scrolls. +- `addTransformingSubview:attributes:` Adds a view that transforms as the user scrolls. An array of `MGTransformAttribute` must be provided to describe the transformation. See [Attributes](#attributes) for more. +- `addFadingSubview:fadeBy:` Adds a view that fades as the user scrolls. Here are some examples from the Demo: ```objc [self.headerView addFadingSubview:self.button1 fadeBy:.4];