ParallaxHeader

Simple way to add parallax header to UIScrollView or it's subclasses.

One image view	Slider with images	Blur vibrant text	Blur round icon

Try it here

Contents

• Requirements
• Installation
• Usage
• License

Requirements

• iOS 8.0+
• Xcode 8.0+
• Swift 3.0+

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

CocoaPods 1.1.0+ is required to build Reusable 1.0.0+.

To integrate Reusable into your Xcode project using CocoaPods, specify it in your Podfile:

source'https://github.com/CocoaPods/Specs.git'platform:ios,'8.0'use_frameworks!target'<Your Target Name>'dopod'ParallaxHeader','~> 2.0.0'end

Then, run the following command:

$ pod install

Cocoapods versions

• Swift4 :

pod'ParallaxHeader','~> 2.0.0'

• Swift3 :

pod'ParallaxHeader','~> 1.0.6'

Usage

To add parallax header to scroll view (table view) you need just create view and set it to your scroll view (table view).

Use case - one image view

 //create view as header view letimageView=UIImageView()
imageView.image =UIImage(named:"1")
imageView.contentMode =.scaleAspectFill
tableView.parallaxHeader.view = imageView
tableView.parallaxHeader.height =400
tableView.parallaxHeader.minimumHeight =0
tableView.parallaxHeader.mode =.topFill

Use case - slider of images

letparallaxHeight:CGFloat= view.frame.height -64-49- sliderHeight
letlayout=UICollectionViewFlowLayout()
layout.scrollDirection =.horizontal
collectionParallaxView =UICollectionView(
frame:CGRect(x:0, y:0, width: view.frame.width, height: parallaxHeight),
collectionViewLayout: layout
)
collectionParallaxView.isPagingEnabled =true
collectionParallaxView.showsHorizontalScrollIndicator =false
collectionParallaxView.backgroundColor =UIColor.white
collectionParallaxView.delegate =self
collectionParallaxView.dataSource =self
//adding view as parallax header to table view is straightforward
tableView.parallaxHeader.view = collectionParallaxView
tableView.parallaxHeader.height = parallaxHeight
tableView.parallaxHeader.minimumHeight =0
tableView.parallaxHeader.mode =.centerFill
tableView.parallaxHeader.parallaxHeaderDidScrollHandler ={ parallaxHeader inprint(parallaxHeader.progress)}

Use case - Blur vibrant text

• Blur library is used here.
• SnapKit library is used here.

letimageView=UIImageView()
imageView.image =UIImage(named:"profile")
imageView.contentMode =.scaleAspectFill
//setup blur vibrant view
imageView.blurView.setup(style:UIBlurEffectStyle.dark, alpha:1).enable()
headerImageView = imageView
tableView.parallaxHeader.view = imageView
tableView.parallaxHeader.height =400
tableView.parallaxHeader.minimumHeight =40
tableView.parallaxHeader.mode =.centerFill
tableView.parallaxHeader.parallaxHeaderDidScrollHandler ={ parallaxHeader in
//update alpha of blur view on top of image view parallaxHeader.view.blurView.alpha =1- parallaxHeader.progress
}
// Label for vibrant text
letvibrantLabel=UILabel()
vibrantLabel.text ="Vibrant"
vibrantLabel.font =UIFont.systemFont(ofSize:40.0)
vibrantLabel.sizeToFit()
vibrantLabel.textAlignment =.center
imageView.blurView.vibrancyContentView?.addSubview(vibrantLabel)
//add constraints using SnapKit library
vibrantLabel.snp.makeConstraints{ make in
make.edges.equalToSuperview()}

Use case - Blur round icon

• Blur library is used here.
• SnapKit library is used here.

letimage=UIImage(named:"profile")letimageView=UIImageView()
imageView.image = image
imageView.contentMode =.scaleAspectFill
parallaxHeaderView = imageView
//setup bur view
imageView.blurView.setup(style:UIBlurEffectStyle.dark, alpha:1).enable()
tableView.parallaxHeader.view = imageView
tableView.parallaxHeader.height =400
tableView.parallaxHeader.minimumHeight =120
tableView.parallaxHeader.mode =.centerFill
tableView.parallaxHeader.parallaxHeaderDidScrollHandler ={ parallaxHeader in
//update alpha of blur view on top of image view
parallaxHeader.view.blurView.alpha =1- parallaxHeader.progress
}letroundIcon=UIImageView(
frame:CGRect(x:0, y:0, width:100, height:100))
roundIcon.image = image
roundIcon.layer.borderColor =UIColor.white.cgColor
roundIcon.layer.borderWidth =2
roundIcon.layer.cornerRadius = roundIcon.frame.width /2
roundIcon.clipsToBounds =true
//add round image view to blur content view
//do not use vibrancyContentView to prevent vibrant effect
imageView.blurView.blurContentView?.addSubview(roundIcon)
//add constraints using SnpaKit library
roundIcon.snp.makeConstraints{ make in
make.center.equalToSuperview()
make.width.height.equalTo(100)}

Author

Roman Sorochak - iOS developer - roman.sorochak@gmail.com

License

ParallaxHeader is released under the MIT license. See LICENSE for details.