Rupert  Beatty

Rupert Beatty


DisplaySwitcher: Custom Transition Between Two Collection View Layouts

Display Switcher

We designed a UI that allows users to switch between list and grid views on the fly and choose the most convenient display type. List view usually provides more details about each user or contact. Grid view allows more users or contacts to appear on the screen at the same time.

We created design mockups for both list and grid views using Sketch. As soon as the mockups were ready, we used Principle to create a smooth transition between the two display types. Note that the hamburger menu changes its appearance depending on which view is activated:



  • iOS 10.0+
  • Xcode 11
  • Swift 5



pod ‘DisplaySwitcher’, '~> 2.0’


github "Yalantis/DisplaySwitcher" "master"

Use Cases

You can use our Contact Display Switch for:

  • Social networking apps
  • Dating apps
  • Email clients
  • Any other app that features list of friends or contacts

Our DisplaySwitcher component isn't limited to friends and contacts lists. It can work with any other content too.


At first, import DisplaySwitcher:

import DisplaySwitcher

Then create two layouts (list mode and grid mode):

private lazy var listLayout = DisplaySwitchLayout(staticCellHeight: listLayoutStaticCellHeight, nextLayoutStaticCellHeight: gridLayoutStaticCellHeight, layoutState: .list)

private lazy var gridLayout = DisplaySwitchLayout(staticCellHeight: gridLayoutStaticCellHeight, nextLayoutStaticCellHeight: listLayoutStaticCellHeight, layoutState: .grid)

Set current layout:

private var layoutState: LayoutState = .list
collectionView.collectionViewLayout = listLayout

Then override two UICollectionViewDataSource methods:

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    // count of items

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    // configure your custom cell

Also override one UICollectionViewDelegate method (for custom layout transition):

func collectionView(collectionView: UICollectionView, transitionLayoutForOldLayout fromLayout: UICollectionViewLayout, newLayout toLayout: UICollectionViewLayout) -> UICollectionViewTransitionLayout {
    let customTransitionLayout = TransitionLayout(currentLayout: fromLayout, nextLayout: toLayout)
    return customTransitionLayout

And in the end necessary create transition and start it (you can simply change animation duration for transition layout and for rotation button):

let transitionManager: TransitionManager
if layoutState == .list {
    layoutState = .grid
    transitionManager = TransitionManager(duration: animationDuration, collectionView: collectionView!, destinationLayout: gridLayout, layoutState: layoutState)
} else {
    layoutState = .list
    transitionManager = TransitionManager(duration: animationDuration, collectionView: collectionView!, destinationLayout: listLayout, layoutState: layoutState)
rotationButton.selected = layoutState == .list
rotationButton.animationDuration = animationDuration

Under the hood

We use five classes to implement our DisplaySwitcher:


In the BaseLayout class, we use methods for building list and grid layouts. But what’s most interesting here is the сontentOffset calculation that should be defined after the transition to a new layout.

First, save the сontentOffset of the layout you are switching from:

 override func prepareForTransitionFromLayout(oldLayout: UICollectionViewLayout) {
       previousContentOffset = NSValue(CGPoint:collectionView!.contentOffset)  
       return super.prepareForTransitionFromLayout(oldLayout)


Then, calculate the сontentOffset for the new layout in the targetContentOffsetForProposedContentOffset method:

override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint) -> CGPoint {
       let previousContentOffsetPoint = previousContentOffset?.CGPointValue()
       let superContentOffset = super.targetContentOffsetForProposedContentOffset(proposedContentOffset)
       if let previousContentOffsetPoint = previousContentOffsetPoint {
           if previousContentOffsetPoint.y == 0 {
               return previousContentOffsetPoint
           if layoutState == CollectionViewLayoutState.ListLayoutState {
               let offsetY = ceil(previousContentOffsetPoint.y + (staticCellHeight * previousContentOffsetPoint.y / nextLayoutStaticCellHeight) + cellPadding)
               return CGPoint(x: superContentOffset.x, y: offsetY)
           } else {
               let realOffsetY = ceil((previousContentOffsetPoint.y / nextLayoutStaticCellHeight * staticCellHeight / CGFloat(numberOfColumns)) - cellPadding)
               let offsetY = floor(realOffsetY / staticCellHeight) * staticCellHeight + cellPadding
return CGPoint(x: superContentOffset.x, y: offsetY)
       return superContentOffset

And then clear value of variable in method finalizeLayoutTransition:

override func finalizeLayoutTransition() {
       previousContentOffset = nil


In the BaseLayoutAttributes class, a few custom attributes are added:

var transitionProgress: CGFloat = 0.0
   var nextLayoutCellFrame = CGRectZero
   var layoutState: CollectionViewLayoutState = .ListLayoutState

transitionProgress is the current value of the animation transition that varies between 0 and 1. It’s needed for calculating constraints in the cell.

nextLayoutCellFrame is a property that returns the frame of the layout you switch to. It’s also used for the cell layout configuration during the process of transition.

layoutState is the current state of the layout.


The TransitionLayout class overrides two UICollectionViewLayout methods:

layoutAttributesForElementsInRect and
layoutAttributesForItemAtIndexPath, where we set properties values for the class BaseLayoutAttributes.


The TransitionManager class uses the UICollectionView’sstartInteractiveTransitionToCollectionViewLayout method, where you point the layout it must switch to:

func startInteractiveTransition() {
       transitionLayout = collectionView.startInteractiveTransitionToCollectionViewLayout(destinationLayout, completion: { success, finish in
           if success && finish {
       }) as! TransitionLayout
       transitionLayout.layoutState = layoutState

CADisplayLink class

This class is used to control animation duration. This class helps calculate the animation progress depending on the animation duration preset:

private func createUpdaterAndStart() {
       start = CACurrentMediaTime()
       updater = CADisplayLink(target: self, selector: Selector("updateTransitionProgress"))
       updater.frameInterval = 1
       updater.addToRunLoop(NSRunLoop.currentRunLoop(), forMode: NSRunLoopCommonModes)

dynamic func updateTransitionProgress() {
       var progress = (updater.timestamp - start) / duration
       progress = min(1, progress)
       progress = max(0, progress)
       transitionLayout.transitionProgress = CGFloat(progress)

       if progress == finishTransitionValue {

That’s it! Use our DisplaySwitcher in any way you like! Check it out on Dribbble.

Let us know!

We’d be really happy if you sent us links to your projects where you use our component. Just send an email to And do let us know if you have any questions or suggestion regarding the animation.

P.S. We’re going to publish more awesomeness wrapped in code and a tutorial on how to make UI for iOS (Android) better than better. Stay tuned!

Download Details:

Author: Yalantis
Source Code: 
License: MIT license

#swift #display #ios #animation 

What is GEEK

Buddha Community

DisplaySwitcher: Custom Transition Between Two Collection View Layouts
Joseph  Murray

Joseph Murray


Collection vs Collections in Java: Difference Between Collection & Collections in Java


This article will be looking into one of the most popular questions in Java Language – What is Collection in Java? Also, what do you mean by Collections in Java? Are Collection and Collections the same or different in Java?

What is Collection?

What is Collections?


#full stack development #collection #collection vs collections in java #collections in java #difference between collection and collections in java

Autumn  Blick

Autumn Blick


Custom Drawable Drawing actions without creating an extra layer in layout XMLs.

I love our new designs! Recently I’ve been working on user interactions. One of them is presented on the GIF above. I wanted to create a custom Drawable, so I can set a background on any view I want without wrapping it with some custom ViewGroup. An extra layer means extra calculations.

I couldn’t find any guide nor article that would help me create a Drawable object that I would be able to set as a background via XML. Like a Ripple Drawable. Unfortunately if someone counts that in this article I solved that mistery I’ll heads up a little — I didn’t. I looked though how RippleDrawable is defined and I prepared my Drawable classes based on what I saw.

Divide and Counquer

All advanced animations look complicated until we find a way to disassemble them. What animations are present on this GIF?

There are three:

  1. Rounded Rectangle Bounce
  2. Alpha Mask Appearance
  3. Long-Click Filling Color

How a Ripple knows when animate? That was my first question. When I think about a View it comes to my mind onClickListener or onTouchEvent. Drawable doesn’t have such methods. It has a method named onStateChanged like this:

	protected boolean onStateChange(int[] stateSet) {
	    final boolean changed = super.onStateChange(stateSet);

	    boolean enabled = false;
	    boolean pressed = false;
	    boolean focused = false;
	    boolean hovered = false;

	    for (int state : stateSet) {
	        if (state == R.attr.state_enabled) {
	            enabled = true;
	        } else if (state == R.attr.state_focused) {
	            focused = true;
	        } else if (state == R.attr.state_pressed) {
	            pressed = true;
	        } else if (state == R.attr.state_hovered) {
	            hovered = true;

	    setRippleActive(enabled && pressed);
	    setBackgroundActive(hovered, focused, pressed);

	    return changed;

#custom-view-android #android #ux #custom-drawable #custom-view-animation

Fynzo Survey

Fynzo Survey


Fynzo Customer Feedback Software For Cafes, Hotels, Saloons, Spa!

Customer Feedback Tool | Fynzo online customer feedback comes with Android, iOS app. Collect feedback from your customers with tablets or send them feedback links.

Visit page for more information:


#customer feedback system #powerful customer feedback system #free customer feedback tools #automated customer feedback system #customer feedback tools #customer rating system

Erwin  Boyer

Erwin Boyer


Is Tech Making or Breaking Your Customer Experience?

Technology can be a two-edged sword. It can deliver incredible results and create unique problems. The customer experience (CX) sector, in particular, has been heavily impacted by technology for quite some time.

Just because you’re using customer relationship management (CRM) tech, doesn’t mean it’s working, though. Here are a few questions to ask yourself to see if your tech is making or breaking your customer’s experience.

Is Your Customer Service Organized?

Are You Ignoring Phone Calls for Other Tech?

Is Your Customer Experience too Tech-Centric?

Is Your Customer Experience Obsessed with Speed?

#customer-experience #customer-service #technology #tech #customer-support #customer-engagement #bus #customer-support-chatbots

Custom Mobile App Development Services Company in USA

AppClues Infotech is the best custom mobile app development company in USA. We offer custom mobile app development services in USA to effectively solve your business purpose.

For more info:
Call: +1-978-309-9910

#custom mobile app development #custom app development services #custom app development company in usa #custom mobile app developers in usa #custom app development agency in usa #hire custom mobile app developers