Component that provide the behavior of hidding a header view while the user makes scroll. It is inspiring in Facebook table scroll style. For sake of simplicity this component follows Behavioral Object Pattern
Objc.io.
Installation with CocoaPods
CocoaPods is a dependency manager for Objective-C, which automates and simplifies the process of using 3rd-party libraries like ABMFullScrollBehavior in your projects.
Podfile
pod "ABMFullScrollBehavior"
Manual Installation
If you don't want to use cocoapods you just need to copy ABMFullScrollBehavior
folder in your project.
Configuration
In order to apply this behaviour to your scroll based view you just need to follow next steps:
- Create a new Object in your ViewController using the .xib.
- Change the class to
ABMFullScrollBehavior
-
Connect the different IBOutlets:
delegate
headerView
scrollView
-
This object have a couple of
IBInspectable
properties that you can set from the storyboard:Imantate
in case you want to avoid the user leave the header in a non-end state.MinVisibleHeightHeader
to define how much header view height will remain visible.
- And that is! You got your scroll hiding the header when the user makes scroll!
I want to use my scroll base element delegate
Most likely you will want your UITableView reacts when the user press a cell and for that you need to use its delegate for instance. But I need it too to know when the user is doing scroll. Fine, let's solve this!
Inside of the component there is another class called ABMMultiplexerProxyBehavior
. That is used for connect one delegate and forward every call to every target we connect to it. So the steps would be:
- Create a
ABMMultiplexerProxyBehavior
object in our ViewController using the storyboard or .xib editor. - Instead of connecting our scroll base element delegate to
ABMFullScrollBehavior
object we should connect it to this new object. ABMMultiplexerProxyBehavior
has and IBOutlet calledtargets
. This is aIBOutletCollection
so we can connect ourABMFullScrollBehavior
object and the ViewController as well.
I want to customize the animation
You can provide a delegate for ABMFullScrollBehavior
and implement it like the example:
- (void)scroll:(UIScrollView *)scroll animationForHeaderView:(UIView *)view percent:(CGFloat)percent {
[self.headerContainerView setAlpha:percent];
CGFloat transform = MIN(percent+0.5, 1);
[self.headerContainerView setTransform:CGAffineTransformMakeScale(transform, transform)];
}
Architecture
Let's do an small summarize of how is design all the connections between the different objects.
Without ABMMultiplexerProxyBehavior
With ABMMultiplexerProxyBehavior
Features
- This components supports
Size classes
andAutolayout
. - Also supports
Navigation Item
. - It works with any UI element that inherate from
UIScrollView
class.UICollectionView
UITableView
UIScrollView
- Everthing is configured just using storyboard of .xib editor. That make more encapsulate this code and it is painless to integrate and modify.
Examples
License
ABMFullScrollBehavior is available under the MIT license. See the LICENSE file for more info.