ParallaxHeader

Simple way to add parallax header to UIScrollView/UITableView written in Swift.

Github星跟蹤圖

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, ----------------------------, ---------------------------------, ------------------------------, --------------------, Demo, Demo, Demo, Demo, ## Try it here

Contents

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 ParallaxHeader 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>' do
    pod 'ParallaxHeader', '~> 3.0.0'
end

Then, run the following command:

$ pod install

Cocoapods versions

  • Swift5 :
pod 'ParallaxHeader', '~> 3.0.0'
  • 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    
  let imageView = 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

let parallaxHeight: CGFloat = view.frame.height - 64 - 49 - sliderHeight
let layout = 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 in
    print(parallaxHeader.progress)
}

Use case - Blur vibrant text

  • Blur library is used here.
  • SnapKit library is used here.
let imageView = 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
let vibrantLabel = 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.
let image = UIImage(named: "profile")
        
let imageView = 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
}
        
let roundIcon = 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.

主要指標

概覽
名稱與所有者romansorochak/ParallaxHeader
主編程語言Swift
編程語言Swift (語言數: 3)
平台
許可證MIT License
所有者活动
創建於2017-06-23 11:26:45
推送於2022-10-28 13:05:36
最后一次提交2020-01-31 23:24:22
發布數7
最新版本名稱3.0.0 (發布於 )
第一版名稱1.0.0 (發布於 )
用户参与
星數1k
關注者數19
派生數131
提交數71
已啟用問題?
問題數38
打開的問題數25
拉請求數6
打開的拉請求數11
關閉的拉請求數3
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?