FTFoldingPaper 0.1.1
- 作者
- monofire
FTFoldingPaper是一个基于Core Animation的UI框架。它设计用来模拟纸张折叠效果，可以与UITableView集成、独立使用或与其他UI组件搭配使用。
如何开始
- 使用CocoaPods将FTFoldingPaper安装到项目中。
- 请遵循以下说明。
架构
纸张折叠动画
FTFoldComponent
FTAnimationView
FTAnimationContext
FTParenLayerAnimations
FTFoldComponentAnimations
FTFoldComponentGradientAnimations
与UITableView集成
FTViewController
FTTableModel
FT TableCellMetadata
FTTableView
FTTableCell
FTTableCellSeparator
用法
- 为所有折叠组件创建顶部和底部层的xibs。
请注意，每个折叠组件都需要顶部和底部层。
1.1 按 '⌘ + N'。选择 "用户界面" -> "视图"。
1.2 根据您的需求打开并编辑每个xib：（添加UI组件，设置Autolayout）。
1.3 如果需要，创建数据模型对象来管理您层的UI组件。
- 配置
FTAnimationView，使用FTFoldComponents和FTAnimationContext。
FTAnimationView托管折叠组件并管理动画。动画过程使用FTAnimationContext配置
在FTAnimationView中重写以下两个方法
/* example of animation view with 2 fold components*/
-(NSArray *)submitFoldComponents{
FTFoldComponent *foldComponentA = [[FTFoldComponent alloc]initWithSuperView:self
topViewNibName:@<your top layer xib name>
bottomViewNibName:@<your bottom layer xib name>];
FTFoldComponent *foldComponentB = [[FTFoldComponent alloc]initWithSuperView:self
topViewNibName:@<your top layer xib name>
bottomViewNibName:@<your bottom layer xib name>];
return @[foldComponentA,foldComponentB];
}
/* please refer to FTAnimationContext interface to get the
full list of possible configuration parameters */
-(void)configureAnimationContext:(FTAnimationContext *)animationContext{
animationContext.expandAnimationDuration = 0.6f;
animationContext.collapseAnimationDuration = 0.6f;
animationContext.foldAngleFinalValue = - M_PI/6;
animationContext.animationMediaTimingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
}到此，您已经有了一个可以用于UI的FTAnimationView。如果需要将其集成到UITableView组件中，请继续步骤3-7。
与UITableView一起使用
- 将
FTTableCell子类化并创建单元格原型。您可以根据需要创建尽可能多的不同单元格以完成UI任务。
3.1 按 '⌘ + N'。创建UITableViewCell的新子类。勾选 "也创建XIB文件"。
3.2 打开您的类.h文件。将父类更改为FTTableCell，如下所示
@interface <your class name> : FTTableCell3.3 根据您的需要打开和编辑单元格xib：（添加UI组件，设置Autolayout）。
3.4 如果需要，创建数据模型对象来管理您的单元格的UI组件。
3.5 设置单元格标识符。
- 配置每个继承自
FTTableCell的子类使用FTAnimationView和FTTableCellSeparator，并重写以下在FTTableCell中定义的方法
-(FTAnimationView *)submitAnimationView{
return [[<name of your FTAnimationView subclass> alloc]init];
}
/* do not override if you need cell without separator */
-(FTTableCellSeparator *)submitCellSeparator{
return [[FTTableCellSeparator alloc]initWithHeight:1.0f
offsetFromCellLeftEdge:0.0f
offsetFromCellRightEdge:0.0f
color:[UIColor colorWithRed:92.0f/255.0f green:94.0f/255.0f blue:102.0f/255.0f alpha:0.1f]];
}- 继承并配置
FTTableModel。FTTableModel负责您表格视图的架构：使用哪些单元格以及它们的顺序。它可以以任意组合管理FTTableCell和UITableViewCell单元格。
在 FTTableModel 中重写以下方法
-(NSDictionary *)submitCellsIDs{
return @{@"<id of your cell>":@"<xib name of your cell>"};
}
/* 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 */
-(NSArray *)submitTableCellsMetadata{
NSMutableArray *cellsMetadata = [[NSMutableArray alloc]init];
for (NSInteger i = 0; i < kNumberOfCellsInTable; i++) {
FTTableCellMetadata *tableCellMetadata = nil;
tableCellMetadata = [[FTTableCellMetadata alloc]initWithReuseID:@"<xib name of your cell>" isExpandable:YES isExpanded:NO];
[cellsMetadata addObject:tableCellMetadata];
}
return cellsMetadata;
}- 在 storyboard 中将 TableView UI 组件添加到您的控制器中。
6.1 配置您的 TableView UI 组件。
6.2 在 storyboard 设置中将 FTTableView 设置为您表格的定制类。
- 继承并配置
FTTableViewController。
FTTableViewController在FTTableView和FTTableModel之间建立桥梁，并提供其他逻辑来管理单元格操作。
7.1 在您的 FTTableViewController 子类中，将您的 FTTableView 链接并订阅 UITableViewDelegate 和 UITableViewDataSource 协议。示例
self.tableView.dataSource = self;
self.tableView.delegate = self;7.2 在您的 FTTableViewController 子类中重写以下方法
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return [super tableView:tableView numberOfRowsInSection:section];
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
return [super tableView:tableView cellForRowAtIndexPath:indexPath];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return [super tableView:tableView heightForRowAtIndexPath:indexPath];
}
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
[self updateDisplayedDataForCell:cell atIndexPath:indexPath];
}7.3 实现您的数据模型以管理单元格的内容。
7.4 实现使用数据模型更新单元格内容的机制。
您可以重写 -(void)tableView: willDisplayCell: forRowAtIndexPath: 以达到此目的。
作者
monofire，[email protected]
许可证
该项目根据 MIT 许可证授权 - 请参阅 LICENSE.md 文件获取详细信息