GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → k-lpmg → FlexibleHeader

k-lpmg / FlexibleHeader

Licence: MIT license
A container view that responds to scrolling of UIScrollView

Programming Languages

swift
15916 projects

Labels

iosscrollingheaderviewflexible-library

Projects that are alternatives of or similar to FlexibleHeader

Smoothscrollanimations
Demo of a tutorial on how to add smooth page scrolling with an inner image animation
Stars: ✭ 238 (+244.93%)
Mutual labels:  scrolling
scroll-sync-react
A scroll syncing library for react that is up to date
Stars: ✭ 49 (-28.99%)
Mutual labels:  scrolling
resizing-header-on-scroll
When you scroll down the page a bit, the header resizes smaller with CSS3 animations, and gets back bigger when you scroll back to the top
Stars: ✭ 19 (-72.46%)
Mutual labels:  scrolling
Scrollstory
A jQuery plugin for building scroll-based stories
Stars: ✭ 249 (+260.87%)
Mutual labels:  scrolling
MHScrollingHeader
An Easy Way to Intergate Scrolling Header
Stars: ✭ 13 (-81.16%)
Mutual labels:  scrolling
SmartStickyHeader
A Custom Header View With Multiple Items to make selection from categories
Stars: ✭ 36 (-47.83%)
Mutual labels:  headerview
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+213.04%)
Mutual labels:  scrolling
onscroll-effect
A tiny JavaScript library to enable CSS animations when user scrolls.
Stars: ✭ 35 (-49.28%)
Mutual labels:  scrolling
body-scroll-freezer
↕️ Dependency-free JS module to freeze body scroll when opening modal box
Stars: ✭ 22 (-68.12%)
Mutual labels:  scrolling
react-custom-scroller
Super simple React component for creating a custom scrollbar cross-browser and cross-devices.
Stars: ✭ 30 (-56.52%)
Mutual labels:  scrolling
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+3879.71%)
Mutual labels:  scrolling
angular-inviewport
A simple lightweight library for Angular with no other dependencies that detects when an element is within the browser viewport and adds a "sn-viewport-in" or "sn-viewport-out" class to the element
Stars: ✭ 72 (+4.35%)
Mutual labels:  scrolling
marquee-ora
A tool to create an ora compatible spinner object that behaves like a scrolling marquee
Stars: ✭ 73 (+5.8%)
Mutual labels:  scrolling
Vue Product Zoomer
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248 (+259.42%)
Mutual labels:  scrolling
react-scroll-trigger
📜 React component that monitors scroll events to trigger callbacks when it enters, exits and progresses through the viewport. All callback include the progress and velocity of the scrolling, in the event you want to manipulate stuff based on those values.
Stars: ✭ 126 (+82.61%)
Mutual labels:  scrolling
Hiddensearchwithrecyclerview
Simple library to have a hidden/shown search bar
Stars: ✭ 220 (+218.84%)
Mutual labels:  scrolling
render-props
㸚 Easy-to-use React state containers which utilize the render props (function as child) pattern
Stars: ✭ 33 (-52.17%)
Mutual labels:  scrolling
NoobScroll
A lightweight jQuery Plugin that add some cool function to make scrolling more fun [Archive]
Stars: ✭ 43 (-37.68%)
Mutual labels:  scrolling
Android-HeaderAndFooterRecyclerView
Let RecyclerView support add HeaderView and FooterView.
Stars: ✭ 36 (-47.83%)
Mutual labels:  headerview
react-scroll-locky
📜🔒 – React full-cream "anti-scroll" library, you were looking for
Stars: ✭ 55 (-20.29%)
Mutual labels:  scrolling
View All Similar Projects ➔

FlexibleHeader

Build Status Swift Cocoapods Carthage compatible Platform License

A container view that responds to scrolling of UIScrollView.

normal threshold

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.

  1. Create an instance of FlexibleHeaderScrollView.
let flexibleHeaderScrollView = FlexibleHeaderScrollView(headerMaxHeight: 64, headerMinHeight: 0, headerExecutantType: .threshold)
flexibleHeaderScrollView.translatesAutoresizingMaskIntoConstraints = false
  1. 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.

  1. Create an instance of UIScrollView.
let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
  1. Create an instance of FlexibleHeader using an instance of UIScrollView.
let flexibleHeader = FlexibleHeader(scrollView: scrollView, maxHeight: 64, minHeight: 0, executantType: .threshold)
flexibleHeader.translatesAutoresizingMaskIntoConstraints = false
  1. 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].