Ramotion/folding-cell


octocat 📃 FoldingCell is an expanding content cell with animation made by @Ramotion - https://github.com/Ramotion/swift-ui-animation-components-and-libraries

License: MIT

Language: Swift

Keywords: animation, ios, library, material-design, swift, ui


header

FoldingCell

CocoaPods CocoaPods Twitter Travis codebeat badge Carthage compatible Swift 4.0 Analytics Donate

Check this library on other platforms:

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.


The iPhone mockup available here.

Requirements

  • iOS 8.0+
  • Xcode 9.0+

Installation

Just add the FoldingCell.swift file to your project.

or use CocoaPods with Podfile:

pod 'FoldingCell'

or Carthage users can simply add Mantle to their Cartfile:

github "Ramotion/folding-cell"

or just drag and drop FoldingCell.swift file to your project

Solution

Solution

Usage

  1. Create a new cell inheriting from FoldingCell

  2. Add a UIView to your cell in your storyboard or nib file, inheriting from RotatedView. Connect the outlet from this view to the cell property foregroundView. Add constraints from this view to the superview, as in this picture:

1.1

(constants of constraints may be different). Connect the outlet from this top constraint to the cell property foregroundViewTop . (This view will be shown when the cell is in its normal state).

  1. Add other UIViews to your cell, connect the outlet from this view to the cell property containerView. Add constraints from this view to the superview like in the picture:

1.2

(constants of constraints may be different). Connect the outlet from this top constraint to the cell property containerViewTop. (This view will be shown when the cell is opened)

Your result should be something like this picture:

1.3

  1. Set @IBInspectable var itemCount: NSInteger property is a count of folding (it IBInspectable you can set in storyboard). range 2 or greater. Default value is 2

Ok, we've finished configuring the cell.

  1. Adding code to your UITableViewController

5.1) Add constants:

fileprivate struct C {
  struct CellHeight {
    static let close: CGFloat = *** // equal or greater foregroundView height
    static let open: CGFloat = *** // equal or greater containerView height
  }
}

5.2) Add property for calculate cells height

     var cellHeights = (0..<CELLCOUNT).map { _ in C.CellHeight.close }

5.3) Override method:

    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return cellHeights[indexPath.row]
    }

5.4) Added code to method:

    override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        guard case let cell as FoldingCell = tableView.cellForRowAtIndexPath(indexPath) else {
          return
        }

        var duration = 0.0
        if cellIsCollapsed {
            cellHeights[indexPath.row] = Const.openCellHeight
            cell.unfold(true, animated: true, completion: nil)
            duration = 0.5
        } else {
            cellHeights[indexPath.row] = Const.closeCellHeight
            cell.unfold(false, animated: true, completion: nil)
            duration = 0.8
        }

        UIView.animateWithDuration(duration, delay: 0, options: .CurveEaseOut, animations: { _ in
            tableView.beginUpdates()
            tableView.endUpdates()
        }, completion: nil)
    }

5.5) Control if the cell is open or closed

  override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        if case let cell as FoldingCell = cell {
            if cellHeights![indexPath.row] == C.cellHeights.close {
                foldingCell.selectedAnimation(false, animated: false, completion:nil)
            } else {
                foldingCell.selectedAnimation(true, animated: false, completion: nil)
            }
        }
    }
  1. Add this code to your new cell class
    override func animationDuration(itemIndex:NSInteger, type:AnimationType)-> NSTimeInterval {

        // durations count equal it itemCount
        let durations = [0.33, 0.26, 0.26] // timing animation for each view
        return durations[itemIndex]
    }

if don't use storyboard and xib files

Create foregroundView and containerView from code (steps 2 - 3) look example: Folding-cell-programmatically

Licence

Folding cell is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.



Follow us for the latest update

Project Statistics

Sourcerank 12
Repository Size 22.5 MB
Stars 9,157
Forks 1,084
Watchers 266
Open issues 5
Dependencies 0
Contributors 28
Tags 52
Created
Last updated
Last pushed

Top Contributors See all

Alex Juri Vasylenko Ramotion Alex Peter Staev ikolpachkov Artem Kyslicyn M. Porooshani Shoaib Ahmed Shoaib Ahmed Shoaib Ahmed Jan Grodowski Wu Zhong Wu Zhong RamotionRussell Shantanu Desai Andrew Murray ouyang ouyang ouyang

Packages Referencing this Repo

Ramotion/folding-cell
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion - https://g...
Latest release 4.0.2 - Published - 9.16K stars
FoldingCell
UITableViewCell with folding animation.
Latest release 4.0.1 - Updated - 9.16K stars

Recent Tags See all

4.0.2 October 23, 2018
4.0.1 October 09, 2018
4.0.1 October 09, 2018
4.0.1 October 09, 2018
4.0.0 September 17, 2018
3.1.5 September 10, 2018
3.1.5 September 10, 2018
3.1.5 September 10, 2018
3.1.4 July 31, 2018
3.1.3 July 24, 2018
3.1.3 July 24, 2018
3.1.2 July 11, 2018
3.1.1 May 02, 2018
3.1.0 May 02, 2018
3.0.6 April 02, 2018

Interesting Forks See all

teodorpatras/folding-cell
FoldingCell is an expanding content cell inspired by folding paper material
Swift - Updated - 6 stars - 2 forks
mohd14shoeb/folding-cell
FoldingCell is an expanding content cell inspired by folding paper material
Swift - Updated - 2 stars
stephangopaul/folding-cell
FoldingCell is an expanding content cell inspired by folding paper material
Swift - Last pushed - 2 stars
SMacEwan/folding-cell
octocat 📃 FoldingCell is an expanding content cell with animation made by @Ramotion - https://d...
Swift - MIT - Updated - 1 stars
CreatFish/folding-cell
octocat 📃 FoldingCell is an expanding content cell with animation inspired by folding paper mat...
Swift - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2018-10-23 22:29:53 UTC

Login to resync this repository