A container view that responds to scrolling of UIScrollView

DongHee Kang

Last update: May 2, 2022

Related tags

UI swift ios scrolling headerview flexible-library

Overview

FlexibleHeader

A container view that responds to scrolling of UIScrollView.

normal	threshold

FlexibleHeaderExecutantType
Getting Started
Progressive
Installation

FlexibleHeaderExecutantType

The enum used in the FlexibleHeader class to determine the header type.

public enum FlexibleHeaderExecutantType {
    case normal
    case threshold
    case customThreshold(hiddenThreshold: CGFloat, showThreshold: CGFloat)
}

1. normal

Header appears when offset Y of scroll is 0. In other cases, the Header is disappeared.

2. threshold

Unlike the normal type, the header can be appeared or disappeared in the middle of the scroll by the threshold.

3. customThreshold

You can set hidden threshold and show threshold to threshold type. The unit of threshold is the offset of UIScrollView.

Getting Started

FlexibleHeaderScrollView

The container view that contains the UIScrollView and the FlexibleHeader is the easiest way to implement a FlexibleHeader.

Create an instance of FlexibleHeaderScrollView.

let flexibleHeaderScrollView = FlexibleHeaderScrollView(headerMaxHeight: 64, headerMinHeight: 0, headerExecutantType: .threshold)
flexibleHeaderScrollView.translatesAutoresizingMaskIntoConstraints = false

Add subviews to the contentView in FlexibleHeaderScrollView.

let topView = UIView()
topView.translatesAutoresizingMaskIntoConstraints = false

let bottomView = UIView()
bottomView.translatesAutoresizingMaskIntoConstraints = false

topView.leadingAnchor.constraint(equalTo: flexibleHeaderScrollView.contentView.leadingAnchor).isActive = true
topView.topAnchor.constraint(equalTo: flexibleHeaderScrollView.contentView.topAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: flexibleHeaderScrollView.contentView.trailingAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 550).isActive = true

bottomView.leadingAnchor.constraint(equalTo: flexibleHeaderScrollView.contentView.leadingAnchor).isActive = true
bottomView.topAnchor.constraint(equalTo: topView.bottomAnchor).isActive = true
bottomView.trailingAnchor.constraint(equalTo: flexibleHeaderScrollView.contentView.trailingAnchor).isActive = true
bottomView.heightAnchor.constraint(equalToConstant: 550).isActive = true
bottomView.bottomAnchor.constraint(equalTo: flexibleHeaderScrollView.contentView.bottomAnchor).isActive = true

FlexibleHeader

If you want to implement the FlexibleHeader functionality in your UIScrollView, use the FlexibleHeader class.

Create an instance of UIScrollView.

let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false

Create an instance of FlexibleHeader using an instance of UIScrollView.

let flexibleHeader = FlexibleHeader(scrollView: scrollView, maxHeight: 64, minHeight: 0, executantType: .threshold)
flexibleHeader.translatesAutoresizingMaskIntoConstraints = false

Configure a height NSLayoutConstraint of an instance of FlexibleHeader.

let flexibleHeaderHeight = flexibleHeader.heightAnchor.constraint(equalToConstant: 50)
flexibleHeaderHeight.isActive = true

flexibleHeader.configure(heightConstraint: flexibleHeaderHeight)

Progressive

You can change the value(view properties, constant of NSLayoutConstraint) based on the start and end points as the scroll progress.

ProgressiveViewAttribute

let flexibleHeader = FlexibleHeader(scrollView: scrollView, maxHeight: 128, minHeight: 0, executantType: .threshold)

let initialAttribute = ProgressiveViewAttribute(view: flexibleHeader, progress: 0.0, alpha: 1.0)
let finalAttribute = ProgressiveViewAttribute(view: flexibleHeader, progress: 1.0, alpha: 0.0)
flexibleHeader.appendProgressiveViewAttribute(with: initialAttribute)
flexibleHeader.appendProgressiveViewAttribute(with: finalAttribute)

ProgressiveLayoutConstraintConstant

let headerContentView = UIView()
headerContentView.translatesAutoresizingMaskIntoConstraints = false
headerContentView.backgroundColor = .yellow

flexibleHeader.addSubview(headerContentView)

headerContentView.centerXAnchor.constraint(equalTo: flexibleHeader.centerXAnchor).isActive = true
headerContentView.centerYAnchor.constraint(equalTo: flexibleHeader.centerYAnchor).isActive = true
headerContentView.heightAnchor.constraint(equalToConstant: 64).isActive = true

let headerContentViewWidth = headerContentView.widthAnchor.constraint(equalToConstant: 0)
headerContentViewWidth.isActive = true

let initialConstraintConstant = ProgressiveLayoutConstraintConstant(constraint: headerContentViewWidth, progress: 0.0, constant: 320)
let finalConstraintConstant = ProgressiveLayoutConstraintConstant(constraint: headerContentViewWidth, progress: 1.0, constant: 0)
flexibleHeader.appendProgressiveConstraintConstant(with: initialConstraintConstant)
flexibleHeader.appendProgressiveConstraintConstant(with: finalConstraintConstant)

Installation

CocoaPods (iOS 9+)

platform :ios, '9.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'FlexibleHeader'
end

Carthage (iOS 9+)

github "k-lpmg/FlexibleHeader"

LICENSE

These works are available under the MIT license. See the LICENSE file for more info.

You might also like...

Cool Animated music indicator view written in Swift

Cool Animated music indicator view written in Swift. ESTMusicIndicator is an implementation of NAKPlaybackIndicatorView in Swift for iOS 8. 本人著作的书籍《La

465 Nov 28, 2022

A child view controller framework that makes setting up your parent controllers as easy as pie.

Description Family is a child view controller framework that makes setting up your parent controllers as easy as pie. With a simple yet powerful publi

246 Dec 28, 2022

An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

467 Dec 5, 2022

A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed flag

HidesNavigationBarWhenPushed A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed

55 Oct 19, 2022

Swift based simple information view with pointed arrow.

InfoView View to show small text information blocks with arrow pointed to another view.In most cases it will be a button that was pressed. Example To

60 Feb 4, 2022

An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.

LoadingShimmer An easy way to add a shimmering effect to any view with just single line of code. It is useful as an unobtrusive loading indicator. Thi