{"id":2897,"url":"https://github.com/monofire/FTFoldingPaper","last_synced_at":"2025-08-03T12:31:36.646Z","repository":{"id":56910816,"uuid":"92596236","full_name":"monofire/FTFoldingPaper","owner":"monofire","description":"UI framework to emulate paper folding effects.","archived":false,"fork":false,"pushed_at":"2017-05-28T10:52:00.000Z","size":103,"stargazers_count":32,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-29T20:44:30.102Z","etag":null,"topics":["animation","fold-components","objective-c","ui","uitableview"],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monofire.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-27T12:05:35.000Z","updated_at":"2023-10-14T08:08:20.000Z","dependencies_parsed_at":"2022-08-20T20:20:37.476Z","dependency_job_id":null,"html_url":"https://github.com/monofire/FTFoldingPaper","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monofire%2FFTFoldingPaper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monofire%2FFTFoldingPaper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monofire%2FFTFoldingPaper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monofire%2FFTFoldingPaper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monofire","download_url":"https://codeload.github.com/monofire/FTFoldingPaper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228543179,"owners_count":17934439,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","fold-components","objective-c","ui","uitableview"],"created_at":"2024-01-05T20:16:25.744Z","updated_at":"2024-12-07T00:31:04.032Z","avatar_url":"https://github.com/monofire.png","language":"Objective-C","funding_links":[],"categories":["UI"],"sub_categories":["Table View / Collection View","Other free courses"],"readme":"# FTFoldingPaper\n\n[![Build Status](https://travis-ci.org/monofire/FTFoldingPaper.svg?branch=master)](https://travis-ci.org/monofire/FTFoldingPaper)\n[![Version](https://img.shields.io/cocoapods/v/FTFoldingPaper.svg?style=flat)](http://cocoapods.org/pods/FTFoldingPaper)\n[![License](https://img.shields.io/cocoapods/l/FTFoldingPaper.svg?style=flat)](http://cocoapods.org/pods/FTFoldingPaper)\n[![Platform](https://img.shields.io/cocoapods/p/FTFoldingPaper.svg?style=flat)](http://cocoapods.org/pods/FTFoldingPaper)\n\n\nFTFoldingPaper is a UI framework built on top of the [Core Animation](https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40004514). It is designed to emulate paper folding effects and can be integrated with [UITableView](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/TableView_iPhone/AboutTableViewsiPhone/AboutTableViewsiPhone.html), used independently or paired with other UI components.\n\n![ftfoldingpaperexample](https://cloud.githubusercontent.com/assets/25864772/26519063/5f09228a-42c4-11e7-9a05-b6385976a16f.gif)\n\n## How To Get Started\n- [Download FTFoldingPaper](https://github.com/monofire/FTFoldingPaper/archive/master.zip) and try it out.\n- Install FTFoldingPaper to your project using CocoaPods.\n- Follow instructions below.\n\n## Installation with CocoaPods\n[CocoaPods](https://cocoapods.org) is a dependency manager, which automates and simplifies the process of using 3rd-party libraries like FTFoldingPaper in your projects. \n\n\nYou can install CocoaPods with the following command:\n```bash\n$ sudo gem install cocoapods\n```\n\nThen execute:\n```bash\n$ cd \u003cpath to your project folder\u003e\n$ pod init\n```\n\nOpen pod file for edit with Xcode or another editor:\n```\n$ open -a Xcode podfile\n```\n\nAdd the following text under \"target 'your project name' do\" line:\n```ruby\npod 'FTFoldingPaper'\n```\n\nFinally, execute:\n```bash\n$ pod install\n```\n\nYou're done! Now open your project by clicking on the newly created xcworkspace file.\n\n\n\n\n## Architecture:\n![ftfoldingpaperstructure](https://cloud.githubusercontent.com/assets/25864772/26519231/72b6b980-42c6-11e7-84a2-1e4cc7b20b8c.jpg)\n\n**Paper folding animation:**  \nFTFoldComponent  \nFTAnimationView  \nFTAnimationContext  \nFTParentLayerAnimations  \nFTFoldComponentAnimations  \nFTFoldComponentGradientAnimations  \n\n**Integration with UITableView:**  \nFTViewController  \nFTTableModel  \nFTTableCellMetadata  \nFTTableView  \nFTTableCell  \nFTTableCellSeparator  \n\n\n## Usage:\n\n1. Create xibs of the top and bottom layers for all your fold components.  \nNote that each fold component requires top and bottom layers.\n\n   1.1 Press '⌘ + N'. Select \"User Interface\" -\u003e \"View\"  \n1.2 Open and edit each xib according to your needs: (add UI components, setup Autolayout).  \n1.3 Create data model object to manage UI components of your layer, if any required.\n\n2. Subclass and configure `FTAnimationView` with `FTFoldComponents` and `FTAnimationContext`.\n\n`FTAnimationView` hosts fold components and manages animation. Animation process is configured with `FTAnimationContext`\n\nOverride the next two methods in `FTAnimationView`:\n```objective-c\n/* example of animation view with 2 fold components*/\n-(NSArray *)submitFoldComponents{\n\nFTFoldComponent *foldComponentA = [[FTFoldComponent alloc]initWithSuperView:self\ntopViewNibName:@\u003cyour top layer xib name\u003e\nbottomViewNibName:@\u003cyour bottom layer xib name\u003e];\n\nFTFoldComponent *foldComponentB = [[FTFoldComponent alloc]initWithSuperView:self\ntopViewNibName:@\u003cyour top layer xib name\u003e\nbottomViewNibName:@\u003cyour bottom layer xib name\u003e];\n\nreturn @[foldComponentA,foldComponentB];\n}\n\n/* please refer to FTAnimationContext interface to get the \nfull list of possible configuration parameters */\n\n-(void)configureAnimationContext:(FTAnimationContext *)animationContext{\n\nanimationContext.expandAnimationDuration = 0.6f;\nanimationContext.collapseAnimationDuration = 0.6f;\nanimationContext.foldAngleFinalValue = - M_PI/6;\nanimationContext.animationMediaTimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];\n}\n```\n\nAt this point you have `FTAnimationView` that is ready to be used in your UI. \nContinue with steps 3 - 7 if you need to integrate it into the `UITableView` component.\n\n## Usage with UITableView:\n\n3. Subclass `FTTableCell` and create cell prototype. \nYou can create as many different cells as you need in order to fulfill your UI tasks.\n\n   3.1 Press '⌘ + N'. Create new subclass of `UITableViewCell`. Tick \"Also create XIB file\".  \n3.2 Open .h file of your class. Change parent class to `FTTableCell` like this:  \n   ```objective-c\n   @interface \u003cyour class name\u003e : FTTableCell\n   ```\n   3.3 Open and edit cell xib according to your needs: (add UI components, setup Autolayout).  \n3.4 Create data model object to manage UI components of your cell if any required.  \n3.5 Set cell identifier.  \n\n\n4. Configure each subclassed `FTTableCell` with `FTAnimationView` and `FTTableCellSeparator` overriding following methods in `FTTableCell`:\n\n```objective-c\n-(FTAnimationView *)submitAnimationView{\nreturn [[\u003cname of your FTAnimationView subclass\u003e alloc]init];\n}\n\n\n/* do not override if you need cell without separator */\n-(FTTableCellSeparator *)submitCellSeparator{\nreturn [[FTTableCellSeparator alloc]initWithHeight:1.0f\noffsetFromCellLeftEdge:0.0f\noffsetFromCellRightEdge:0.0f\ncolor:[UIColor colorWithRed:92.0f/255.0f green:94.0f/255.0f blue:102.0f/255.0f alpha:0.1f]];\n}\n```\n\n\n5. Subclass and configure `FTTableModel`.\n`FTTableModel` is responsible for the architecture of your table view: which cells are used and in which order.  It can manage `FTTableCell` and `UITableViewCell` cells in any combinations.\n\nOverride the following methods in `FTTableModel`:\n\n```objective-c\n-(NSDictionary *)submitCellsIDs{\n\nreturn  @{@\"\u003cid of your cell\u003e\":@\"\u003cxib name of your cell\u003e\"};\n\n}\n\n/* Submit your table architecture. In this example, the table consists only of cells of one type. You can implement any custom architecture combining different cell types for different rows */\n\n-(NSArray *)submitTableCellsMetadata{\n\nNSMutableArray *cellsMetadata = [[NSMutableArray alloc]init];\n\nfor (NSInteger i = 0; i \u003c kNumberOfCellsInTable; i++) {\n\nFTTableCellMetadata *tableCellMetadata = nil;\n\ntableCellMetadata = [[FTTableCellMetadata alloc]initWithReuseID:@\"\u003cxib name of your cell\u003e\" isExpandable:YES isExpanded:NO];\n\n[cellsMetadata addObject:tableCellMetadata];\n}\n\nreturn cellsMetadata;\n}\n```\n\n6. Add TableView UI component to your controller in the storyboard.\n\n   6.1 Configure your TableView UI component.  \n6.2 Set `FTTableView` as the custom class for your table (in storyboard settings).  \n\n\n7. Subclass and configure `FTTableViewController`.  \n`FTTableViewController` bridges `FTTableView` with `FTTableModel` and provides other logic to manage cells operations. \n\n   7.1 In your subclassed `FTTableViewController`, link your `FTTableView` and subscribe for `UITableViewDelegate` and `UITableViewDataSource` protocols. Example:\n\n   ```objective-c\n   self.tableView.dataSource = self;\n   self.tableView.delegate = self;\n   ```\n\n   7.2 Override the following methods in your subclassed `FTTableViewController`:\n\n   ```objective-c\n   -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{\n   return [super tableView:tableView numberOfRowsInSection:section];\n   }\n\n   -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{\n   return [super tableView:tableView cellForRowAtIndexPath:indexPath];\n   }\n\n   -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{\n   return [super tableView:tableView heightForRowAtIndexPath:indexPath];\n   }\n\n   -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{\n   [self updateDisplayedDataForCell:cell atIndexPath:indexPath];\n   }\n   ```\n\n   7.3 Implement your data model to manage the content of your cells.  \n7.4 Implement mechanism to update the content of your cells using your data model.  \nYou can override `-(void)tableView: willDisplayCell: forRowAtIndexPath:` for that purpose.\n\n\n## License\nThis project is licensed under the MIT License - see the LICENSE.md file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonofire%2FFTFoldingPaper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonofire%2FFTFoldingPaper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonofire%2FFTFoldingPaper/lists"}