honcheng/paperfold-for-ios

Paper folding animation for iOS

PaperFold for iOS

PaperFold is a simple iOS control that allows hiding of views on the left and right side of the screen by dragging the middle view. The left view supports only 1 fold. The right view supports variable number of folds.

Vertical fold is still in active testing, in an experimental branch (top-multifold) at the moment.

How it works

During folding, a screen capture of the left/right view is taken, and split up depending on the number of folds required. The virtual light source is on the right side of the screen, so surfaces that faces the left are darker. For the right multi-fold view, the fold closes to the 'force' are opened up faster than the folds that is further away.

A sample project is included.

Example

Refer to this link for a video showing the prototype of an app that I was working on. In the end, the proposed project was never completed because I could not obtained reliable data for the app, but I intend to use it for another app.

The animation here looks a bit laggy, but that's because of the low frame rates in GIF.

Usage

1. Add PaperFoldView as a subview into your view controller.

   _paperFoldView = [[PaperFoldView alloc] initWithFrame:CGRectMake(0,0,100,[self.view bounds].size.height)]; [self.view addSubview:_paperFoldView];

2. To set left view, use setLeftFoldContentView:foldCount:pullFactor:. Example below uses a UITableView, but it can any UIView.

   _leftTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,100,[self.view bounds].size.height)]; [_paperFoldView setLeftFoldContentView:_leftTableView foldCount:3 pullFactor:0.9];

3. To set the right view, use setRightFoldContentView:foldCount:pullFactor:. Example below uses a MKMapView, but it can any UIView. The fold count is the number of folds in the right view. The pull factor controls the ratio of folding/unfolding of the different folds away from the center.

   _mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0,0,240,[self.view bounds].size.height)]; [_paperFoldView setRightFoldContentView:_mapView foldCount:3 pullFactor:0.9];

4. To set the center view

   _centerTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,[self.view bounds].size.height,[self.view bounds].size.height)]; [_paperFoldView setCenterContentView:_centerTableView];

5. Sometimes you may want to disable drag-to-unfold if you have a table view in the center view and wish to preserve the swipe gesture functions e.g. to delete cells.

   // this disables dragging to unfold the left view [self.paperFoldView setEnableLeftFoldDragging:NO];

   // this disables dragging to unfold the right view [self.paperFoldView setEnableRightFoldDragging:NO];

6. To unfold left view without dragging

   [self.paperFoldView setPaperFoldState:PaperFoldStateLeftUnfolded];

7. To unfold right view without dragging

   [self.paperFoldView setPaperFoldState:PaperFoldStateRightUnfolded];

8. To restore view to center without dragging

   [self.paperFoldView setPaperFoldState:PaperFoldStateDefault];

9. To receive callbacks when fold state changes, and if the fold was activated manually by finger gesture, or automatically by calling setPaperFoldState:

   // register callback delegate [self.paperFoldView setDelegate:self];

   // callback comes from the following delegate method

   • (void)paperFoldView:(id)paperFoldView didFoldAutomatically:(BOOL)automatic toState:(PaperFoldState)paperFoldState

Requirements

This project uses ARC. If you are not using ARC in your project, add '-fobjc-arc' as a compiler flag for all the files in this project. XCode 4.4 is required for auto-synthesis.

Apps that uses PaperFold

Showy , LargeType , NextRide , SG NextBus , Hangzhou Metro

Contact me if you want your app listed here. Thanks

Other Projects that uses PaperFold

PaperFoldMenuController by me.

PaperFold CocoaPod Demo for RubyMotion by yestoall.

Titanium Mobile Mobule for PaperFold by atsusy.

Known Problem

Screen capture of MKMapView is iOS6 is not taken properly. I approached a few Apple engineers at WWDC, and was told that it is most likely a bug that need to fix. I have already filed a bug report (filed as rdar://11813051, closed by Apple because it is a duplicate of rdar://11650331). Hopefully it will be fixed soon.

Update: This bug is fixed in iOS6b4. No problem taking screenshot of MKMapView.

Credits

Special thanks to @dilliontan, my colleague in buUuk for explaining CAAffineTransform. He's a master at that :p. I'm still a noob. You can check out his iOS-Flip-Transform project here.

Contact

twitter.com/honcheng honcheng.com

paperfold-for-ios's Issues

Taping on StatusBar doesn't scrollsToTop

Hi,

I've experienced in my app, where I use PaperFold-for-iOS, that taping on StatusBar doesn't scroll table to top. It's standard behavior in iOS and works default.
Now I see that also in Demo included in this repo, this feature doesn't work.

Support for landscape orientation

Hi honcheng,

Is it possible to modify paperfold control to support iPad & landscape orientation?

2 small issues

You made a great component. Thank you for your hard work.

But I have two small issues:

1. When I push a new viewcontroller AViewController in center view controller, and then push another viewcontroller called BViewController in AViewController. The viewWillAppear, viewDidAppear will not be called in BViewController.

I look through your code, it seems you only call rootViewController's viewWillAppear and viewDidAppear.

1. When I open rightViewController, it seems the leftViewController's view will be shown in the back. Please look at this screenshot.

http://farm9.staticflickr.com/8317/7994599163_e4fc62c696.jpg

Any suggestion, how to hide the leftViewController when I open rightViewController.

Thanks

UITableView Editing Issue (swipe to delete)

Hi,
I'm using PaperFold with a central UIView (an UIView with an UITableView inside) and a right UIView (an UIView with a Map).
Everything is fine but there is an issue when I try to use swipe-to-delete inside a cell of the table. I suppose the event is handled by the PaperFoldView class and the event itself is never fired:

• (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;

and consequently:

• (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;

Add PaperFold to a UITableViewController

Hi, I want to add PaperFold to my existing app. I want to add it in a UITableViewController.

in the .h file I added this code:

@interface TableViewPreview : UITableViewController<MKMapViewDelegate, PaperFoldViewDelegate>
@property (nonatomic, strong) PaperFoldView *paperFoldView;
@property (nonatomic, strong) MKMapView *mapView;
@property (nonatomic, strong) UITableView *leftTableView, *centerTableView;
@property (nonatomic, strong) UIView *topView, *bottomView;
@end

and in the .m file

- (id)initWithStyle:(UITableViewStyle)style
{
    self = [super initWithStyle:style];
    if (self) {
        _paperFoldView = [[PaperFoldView alloc] initWithFrame:CGRectMake(0,0,[self.view bounds].size.width,[self.view bounds].size.height)];
        [_paperFoldView setAutoresizingMask:UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth];
        [self.view addSubview:_paperFoldView];

        _mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0,0,240,[self.view bounds].size.height)];
        [_paperFoldView setRightFoldContentView:_mapView foldCount:3 pullFactor:0.9];

        [_paperFoldView setCenterContentView:self.tableView];

    }
    return self;
}

but nothing is happening (the code compile and everything is running, but I can't slide). What am I doing wrong?
Thanks a lot for your help!!

UINavigationController pushViewController

In the demo, when I push a detail view from centerTableView, I found this dark area.

Is it for "fold effect"?

Can you tell me how to remove it?

Is it possible to slide to left or right manually?

I want to slide to left or right by touch a button instead of by gesture. Is it possible? Any suggestion? Thanks

TabBar application

How I can add your project in TabBarApplication?

EXC_CRASH after resuming from background

Just setting up Paperfold for an app and I recognized a crash appearing after closing the app, opening a few others and reopening the app from background. The app then appears but crashes after a few seconds.

Looking at the logs it seems like there is some problem with [ShadowView drawRect:] but I wasn't able to fix it. Do you have any idea what the problem could be?

MyApp 0x002b834a create_intersected_charset_table (string.c:5413)
MyApp 0x002b37c0 rstr_count (string.c:5492)
MyApp 0x002dbbbe rb_vm_dispatch (dispatcher.cpp:456)
MyApp 0x002fd698 nsstr_forward_m1 (vm.h:681)
MyApp 0x001095fa -[ShadowView drawRect:] + 70
UIKit 0x3600f11c <redacted> + 364
QuartzCore 0x3695f034 <redacted> + 112
QuartzCore 0x3695e770 <redacted> + 1808
QuartzCore 0x3695df44 <redacted> + 980
QuartzCore 0x3695da7a <redacted> + 202
QuartzCore 0x36a319f4 <redacted> + 24
QuartzCore 0x3695d3d2 <redacted> + 238
QuartzCore 0x3695d118 <redacted> + 316
UIKit 0x360ce3f6 <redacted> + 210
UIKit 0x360ce2c6 <redacted> + 10
UIKit 0x360cddac <redacted> + 76
UIKit 0x3600683e <redacted> + 1302
UIKit 0x360061ac <redacted> + 72
UIKit 0x36005b5a <redacted> + 6154
GraphicsServices 0x37d875f2 <redacted> + 590
CoreFoundation 0x34f46142 <redacted> + 14
CoreFoundation 0x34f459a8 <redacted> + 212
CoreFoundation 0x34f446ee <redacted> + 646
CoreFoundation 0x34ec2c1c CFRunLoopRunSpecific + 356
CoreFoundation 0x34ec2aa8 CFRunLoopRunInMode + 104
GraphicsServices 0x37d8633a GSEventRunModal + 74
UIKit 0x3602c534 UIApplicationMain + 1120
MyApp 0x0012b0ea main + 262
MyApp 0x0012ac7b start + 39

How to reload contentview?

I try to make menu based on paperfold. I have UITableView as a leftview and UIViewController as content view. How can I change view controller in contentview from table cell from left view? My project based on PaperFold-Containment View.

in didSelectRowAtIndexPath how do you know left or center table tapped?

LeftViewController tableview datasource method cellForRowAtIndexPath not being called.

I followed the Paperfold-NavDemo project. Everything is working perfect but LeftviewController datasource method cellForRowAtIndexPath not getting called. I tried it two different ways:

1. Took new class of UITableViewController
   @interface LeftViewController : UITableViewController

2. took new class of UIViewController in new class LeftViewController1.h
   @interface LeftViewController1 : UIViewController<UITableViewDataSource,UITableViewDelegate>

took tableview in .xib. Made datasource, Delegate connection. Also coded in viewDidLoad

• (void)viewDidLoad
  {
  self.tableVw.delegate=self;
  self.tableVw.dataSource=self;
  }

-(void)viewWillAppear:(BOOL)animated
{
[self.tableVw reloadData];
}

Hence no success. Only numberOfSectionsInTableView data source method is getting called. Code acting weirdly. :(

UnfoldRightView timer gets stuck and doesn't open die right view

When I toggle the right view with
[paperFold setPaperFoldState:PaperFoldStateRightUnfolded animated:YES];

the timer sometimes doesn't invalidate and calls the following method repeatedly blocking any unfolding animation
- (void)unfoldRightView:(NSTimer*)timer

UITableView Editing Problems

When using a UITableView as the Center view, editing does not work, specifically reordering cells.

• (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath

gets called in the delegate, but always returns destination & source as same the value.

Why not a - (void)setLeftFoldContentView:leftViewFoldCount:leftViewPullFactor: method?

The same behavior of the:

• (void)setRightFoldContentView:(UIView*)view rightViewFoldCount:(int)rightViewFoldCount rightViewPullFactor:(float)rightViewPullFactor;

with the left side.
Thanks.

Swiping horizontally on top and bottom folds turns views gray immediately

As screenshot attached. Once you swipe on top or bottom fold in horizontal direction, the view will strangely turn gray.

Landscape vertical folding

Hi there,

One great library here !

I have been pulling my hair out to do landscape vertical folding top.
How shall I proceed to implement vertical folding in landscape orientation ? Please suggest me.

Thanks.

if (self.state!=self.lastState) self.lastState = self.state;

I don't quite under this line of code around line 437.
why bother the check, and there're setting for lastState below

Unfold View Blank when using ContainerViews

When using container views to unfold to the left or right view, everything folds and sizes properly, however the content from the UIContainerView is blank. Is there any way to use UIContainerViews or will there be an update for those in the future?

Glitch/artifact when the device changes orientation

I'm quite surprised that I can't find this issue in the tracker. The best way to explain is by a video:

http://www.youtube.com/watch?v=3oB5iE8JjS8

You see, the grayscale glitch on the left side of the folds is ruining the whole effect and awesomeness :) I'm testing on iOS Simulator 6.1 and also tried on a real device with iOS 6.1. Same effect.
If anyone had similar experience and found some sort of workaround, please let me know, it's quite crucial in our project.

Thank you,
Z.

Folds disappears in custom UITableViewCell

When using library to fold cells folds disappears when they are opened.

i integrated it in demo project and bug was reproduced.
1 unfolding

2 unfolded

3 bottom folds from example

Bounce (Rubber-band) Effect

Hi

Appreciate your hard work & well made resource.

I just feel one thing is lacking - bounce effect (like in UIScrollView) when we unfold a view. The current sudden stop experience doesn't match with general iOS UI.

Is there any way to achieve that? Even I am willing to try to incorporate that for which it would be quite helpful if you could guide where to begin with.

Thanks.

FoldViews content disappearing

When I load another viewcontroller from center view and return back to rootview, fold view is empty, will populate after folding is completed. When I load that other viewcontroller from folview itself, everything is fine. Tested with right and left folds.

I tried to do a fold/unfold (nonanimated) in viewDidAppear: as a dirty hack. In this case fold has content but opens without folding effect, just sliding in. I think there's some bug related to unfolding/folding without animation, because same problem happens if I want the fold to be unfolded when application is loaded, closing then the fold manually just slides it off, no folding effect.

And if I leave foldview open, when loading another viewcontroller, returning back rightfold has artifacts, but has content, leftfold don't have artifacts, but don't have content, content appears after close/open.

All this has something to do with view height changing, because it happens when I want navigationbar hidden in first view, but visible in second view. If navbar is visible or hidden all the time, foldviews seem to be fine.

I made a test project explaining:
https://www.dropbox.com/s/fohlg7fnrd7mmiw/foldproblems.zip

Hope somebedy can help fixing it or tell what I'm doing wrong.

Regards,

Markus

PaperFoldView is dependent on a UIViewController

How to detect the fold state on touch?

How can detect if fold is open, close, ..etc.
Is possible detect it onTouch?

For example: onTouch (FoldStateTransition)

Thank you.
Great work.
p

边缘锯齿和折叠角度不均问题

我几个月前也在研究页面折叠的相关问题。 边缘锯齿可以通过图片折叠方向的边上加一个单位的透明像素 我之前写的一个 https://github.com/kejinlu/LUFoldableView

UITableView scrolling does not work if table content does not exceed it's frame

I'm using PaperFold with a left UIView plus central UIView with an UITableView inside.
I can't scroll the table if it's content does not exceed it's frame (= there are some hidden rows you can reach with a scroll).
That's not the natural behavior of the control and even worse I can't use pull-down-to-refresh control (with UIRefreshControl of iOS6 or any other thirdy party implementation) because in fact you can scroll the table itself.
When the content exceed the frame of the table I can't scroll up (gesture is from up to down) directly but I need to scroll down and then fast scroll up again (so I can reach the hidden header of the table with the fresh control).

PaperFoldNavigationController enable or disable

How to enable or disable del paperfold action on the navigation bar.
My request is create a switch button.

That button active the fold action.

Thanks.

UITextView Problem in RightFold

There's some sort of bug when you add a UITextView in the RightFold. It's really odd.
Basically when you paste a long piece of text in the view, you can't see the majority of the text anymore. I thought I was causing the problem somehow, but I added the same view in the CenterView and it worked perfectly.

No problem when writing o pasting short words. It's not about its contentSize, nor about transparency, colour, et al.
I should also mention that the text is fully selectable, you can keep writing, scrolling and doing everything you'd normally do. Edit: I forgot to add that if you delete all the text and write again the problem disappears.

I'd appreciate if you looked at it.
A thousand thanks for the awesome work you've done so far.
Will

Custom Swipe Gestures don't seem to work

Hello,

First of all, love you work, its been very useful for me so far.

So here's the issue I'm facing, I'm using the PaperFold-ContainmentView.

As soon as I set the paperFoldNavController to be my RootViewController, my gestures have stopped working.

The gesture specifically the Swipe gesture (Left swipe as well as Right swipe) just doesn't seem to get triggered on any of my subviews.

They don't work even after I've set setEnableRightFoldDragging:NO

Any help or suggestion?

Regards,
Tanmay

any luck with IB/Storyboard for defining views?

first, love the fold control... can't wait to use it.

i'm trying to figure out how to use my existing project defined using IB/Storyboard for each view and it is crashing when trying to setRightFoldContentView. i think it's because the view is already added as a subview. i've tried removing from superview first, but still crashes/traps.

the exact errors are:
: CGContextSaveGState: invalid context 0x0
: CGContextRestoreGState: invalid context 0x0
: CGContextSetBaseCTM: invalid context 0x0
CGContextSetBaseCTM: invalid context 0x0
CGContextClipToRect: invalid context 0x0

coming from MultiFoldView.m in setScreenshotImage on the CFRelease(imageRef)

How can I disable touch on center view when I'm showing the right fold?

Hi, like in the title I like to disable the touch events on the center view when I'm showing the map on the right. How can I do that?

Top and bottom views not unfolding.

When I call either:

 [self.paperFoldView setPaperFoldState:PaperFoldStateTopUnfolded];

 or 

 [self.paperFoldView setPaperFoldState:PaperFoldStateBottomUnfolded];

the unfolding animation never happens and it gets stuck in a never ending loop inside

 - (void)unfoldTopView:(NSTimer*)timer 

 or

 - (void)unfoldBottomView:(NSTimer*)timer 

At first glance it looks like the transform.ty is not being updated so the frame height never changes. Not sure where to go from here.

How can I enable top fold?

I would also set numberOfFolds. How can I do these things?
Thanks

setRightView and setLeftView?

Is it possible to programatically set the left or right view while folded?

Also is is possible to trigger a repaint/fresh screenshot/folds of the left of right view while folded (ie: out of vide). If I change something in the let view and unfold it, the change isn't visible until the view finally folds out.

Thanks.

UIImageView added not shown during transition

I have a left view with a tableView and and an UIImageView of shadow over all of this left view content. When I'm folding or unfolding this left view, my shadow disappears.
I'm adding my shadow in viewDidLoad (like the tableview)

Here's a screenshot of my shadow image : http://d.pr/i/XGJ1

Is it a bug or am I doing something wrong ?

Delegate firing intermittently

I'm using the delegate change state method on a small (66 point wide) left view, attempting to lock a tableview from scrolling when the left view is open.

it only seems to be called when the view moves into the closed state, however I am getting callbacks on opened state, but these are infrequent.

I've looked at your delegate methods and can't see any initial problems with what I want to do.

BTW - the view is beautiful otherwise!

a rotation with leffoldView or rightfoldview expaned not work

rt!

regards

"Jump" when closing top fold and opening bottom fold

1. Download the current master and run the project PaperFold.xcodeproj.
2. Slide down to open the top fold.
3. Then slide up very slowly.
4. You will notice that, as soon as you get to close the top fold the bottom fold is completely open.

The same happens when you slowly close the bottom fold.

I'd like to help. Can you point me into the right direction?

Support for NON-ARC

I've been trying to get this to work in my NON-ARC project, and I added the compiler flags and all, but for some reason its still not allowing me to compile? Does this project still support NON-ARC ones?

i'm trying to figure out how to use my existing project defined using IB/Storyboard for each view

i'm trying to figure out how to use my existing project defined using IB/Storyboard for each view

it work but with alittle proplem i didn't see the content of table for left and right paperfold while the log see that open because i use viewdidappeare but in suegue like popover it run normally can u help me

A swipe overhead when reveal right view controller in PaperFold-NavDemo

In the PaperFold-NavDemo, when I want to swipe and reveal the right view controller, there will be a grey gap between right view and the screen edge, described in the image below.

There is no such problem in the left view controller. And the demo for view (PaperFold.xcodeproj) works well too in right reveal. It only happen in the right controller of NavDemo and I can not tell why. Any ideas?

Disable menu in pushed View Controller

Hello.

In rootViewController I'm doing
[self.navigationController pushViewController:embeddedViewController animated:YES];

And in embeddedViewController I need to disable FoldMenu, because I'm using Gesture Recognizers there. I tried this code in embeddedViewController, but it doesn't work:
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
if ( [gestureRecognizer isMemberOfClass:[UISwipeGestureRecognizer class]] ) {
// Return NO for views that don't support Swipes
return NO;
}
return YES;
}

Thank you.

Question about using paperfold on a UIViewController

i have a UIViewController with a UITableView connected with a .xib file like this:

MyViewController.h
@interface MyViewController : UIViewController

@Property (weak, nonatomic) IBOutlet UITableView *myTable;

to use paper fold i do this:

import "PaperFoldViewController.h"

@interface MyViewController : PaperFoldViewController

@Property (weak, nonatomic) IBOutlet UITableView *myTable;

then in the MyViewController.m i do this:

• (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
  {
  self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
  if (self) {
  // Custom initialization
  UITableView *_leftTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,100,[self.view bounds].size.height)];
  [_leftTableView setRowHeight:100];
  [self setLeftFoldContentView:_leftTableView];
  }
  return self;
  }

but if i try to unfold on the left don't appear nothing, seem don't work, won't i have wrong?

Top-Fold Bug - Unable to scroll centerfold after top-fold

I've been experimenting with the...err...experimental...top-fold, and thought I'd try and help out by reporting the bugs I run into. If I slide to to the topFoldView and return to the centerTableView, I cannot get it to re-enable scrolling in that view.

I've tried all of the various combinations of enabling and disabling the topFoldView and bottomFoldView, together with sending setScrollEnabled:YES to centerTableView with no luck.

does bottom and/or top folding work?

I can seem to get either to work? But maybe its just me?

CocoaPods integration

Would be cool to have PaperFold available by the cocoaPods

cannot disable left or right fold dragging

the 2 methods disableLeftFoldDragging and disableRightFoldDragging don't seem to be working

Unable to set PaperFoldState programatically via PaperFoldNavigationController

@property (strong, nonatomic) PaperFoldNavigationController *paperFoldNavController;
// .. set up left and right views
// ..
// ..
// reset to the centre view
[self.paperFoldNavController.paperFoldView setPaperFoldState:PaperFoldStateDefault];

Accessing the setPaperFoldState through PaperFoldNavigationController does not appear to work.

Request of feature

Hello, this project is awesome! really you make a great work! i want suggest you a feature, i don't know if it's possible, but i want know if is possible to add this feature, if the middle view is a uitableview, scrolling right to left open the paper fold view, but disable the apple method to delete a row in the table view with the swipe on the row, so i want know if it's possible add the feature that don't disable this right to left swipe for table view, and for open the paper fold need to click on a row on a table view, and to close the paper fold as is now. what you think?

Thanks!