Flip animation between two UIViews on a UIViewController - ios5

I have two UIViews on my view controller. I wanted to flip between the two views on user touch. Everything is fine except the animation I tried two methods, first was:
[UIView transitionFromView:frontView toView:backView
duration:01.0 options:UIViewAnimationOptionTransitionFlipFromRight
completion:NULL];
This was animating the view but actually animating the whole view controller's view, while I wanted only the portion where my views are, which is about 320x200 in the centre of the screen.
Then I tried the other option, which is:
[UIView animateWithDuration:1.0 delay:0.0
options:UIViewAnimationOptionTransitionFlipFromRight
animations:^{
[frontView removeFromSuperview];
[self.view addSubview:backView];
} completion:nil];
But this is not animating the views at all. Just switching the views instantly without any animation. Can anyone please help me in understanding where I am wrong or need to change. Thanks very much for your time and consideration.

Awhile after I posted my question I found a great answer for this query which you guys can look at :
How to flip an individual UIView (without flipping the parent view)
The trick is to use third UIView as container view and then adding the views, which needs to be animated, as subviews on it. That does the trick in my case. Remember that I am using the first method that I mentioned in my question. Thanks everyone for your time.

Related

Flipping between two UIView inside UIScrollView

I have a scrollview with lots of subviews, my problem is when i tap one of the subviews i want to change it to some other view that i would create in that moment.
Imagine this case: having a picture gallery and when you tap on one pic it would show the backside of the photo (having some kind of info about it).
At the moment, i know which one i've taped onto and fliping it is also OK, but setting this new UIView in its place with the flipping animation... i'm not getting it!
Thx in advance for your time.
EDIT:
[UIView transitionFromView:recognizer.view toView:flyerInfoView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromRight completion:nil];
[UIView commitAnimations];
I've made this, but i'm having 2 problems, i can't back to my other view (as i've read in the documentation this method removes the "fromView" from the superscreen) and the other one is... It is fliping all my views not the only one i'm touching.
You can see that fromView is recognizer.view, i'll briefly explain, i have a UIGestureRecognizer assign to each view so i can understand which view is being touched. The method that is fliping the view is: handleTapFrom:(UIGestureRecognizer*)recognizer
how this can give you a more detailed info about my problem.
Again thx a lot for your help.
Have you already tried to use UIView's method transitionFromView:toView:...? There are some Flip options too.

scale a UITableView to fullscreen from inside a UIScrollView

Having failed in trying to puzzle together different sources to any form of coherent approach or concept I turn, once again to the learned people of StackOverflow. My problem is quite specific and maybe that's why I'm having trouble finding information that fits or maybe I just suck at searching. Either way, here goes.
I am building an app which has a UIScrollView populated with UIViews which in turn are populated with UITableViews. I have paging and everything set up and working properly. Basically, I am trying to mirror the functionality of Safari's (mobile) tab behaviour, or (even closer to what I'm trying to achieve) Tweetdeck's main page. I couldn't post an image but if you click on the link below you'll see what I mean.
http://www.redmondpie.com/wp-content/uploads/2009/07/TweetdeckIphone04.jpg
The reason for the UITableViews are inside UIViews is that this was the only way I could figure out to make the tableViews have a space between them, instead of being right next to each other. I tried setting the size of the tableViews and the inset of the scrollView, among many things but the tableviews always ended up filling the entire scrollView. In any case, that is a separate issue, possibly
As I click on a tableView/UIView inside the scrollView I want that tableView/UIView to scale up and fill the entire screen (minus tabBar and navigationBar), and then I should be able to scale it back down by pressing the back button on the navigationBar.
Any information or nudges in the right direction is greatly appreciated.
I am doing something similar in my app:
-(void)displayPage:(int)targetedPage {
...
[UIView beginAnimations:#"MultiViewAnimate" context:nil];
[UIView setAnimationDuration:0.3];
//animate the frame
//targetedPage is the index (table view) that should be displayed
[(UITableView *)[tableViews objectAtIndex:targetedPage] setFrame:CGRectMake(0, 0, 320, 372)];
[(UITableView *)[tableViews objectAtIndex:targetedPage] setUserInteractionEnabled:YES];
...
[UIView commitAnimations];
}
-(void)displayMultiView:(id)sender {
...
[UIView beginAnimations:#"MultiViewAnimate" context:nil];
[UIView setAnimationDuration:0.3];
//animate the frame
//targetedPage is the index (table view) that I was previously looking at full screen
[(UITableView *)[tableViews objectAtIndex:targetedPage] setFrame:CGRectMake(60, 70, 200, 232)];
[(UITableView *)[tableViews objectAtIndex:targetedPage] setUserInteractionEnabled:NO];
...
[UIView commitAnimations];
}
In this code tableViews is an array of all the UITableViews that the scrollView contains.
I am doing a little more than this because I am taking a screenshot of my view and using a UIImageView for the scaled view and then animating back out to the respective UIWebView. One advantage to that approach is that I can just attach a UITapGestureRecognizer to the UIImageView and not have to mess with turning off userInteraction on the UITableView.

How to make controls fade away on iPad/iPhone as per interface guidelines

THe HIG makes a statement that on the iPad, to consider fading away controls similar to how the built in photo app does it.
How is this accomplished?
In my case I have an image occupying the majority of the screen with a tab bar and potentially tool bar and potentially other controls. How do I fade everything away except the image. And bring it back if the user touches the screen.
Thanks
I think you have 2 alternatives. First, by core animation, you can set the alpha to 0 in about 0.5 or 1 second, the other way is to set the toolbar and navigation bar to hidden. If you're working with a navigation controller, you can call
[self.navigationController setToolbarHidden:YES animated:YES];
or
[self.navigationController setNavigationBarHidden:YES animated:YES];
this probably do what you want.
"And bring it back if the user touches the screen."
For this, you may implement methods like:
– touchesBegan:withEvent:
– touchesMoved:withEvent:
– touchesEnded:withEvent:
– touchesCancelled:withEvent:
this will work if you're working on a UIViewController subclass only.
Good question. There are a number ways to do this as some view controllers may have built-in methods for hiding (e.g. UINavigationController). For anything that is a UIView, or subclass of, I would recommend something like the following:
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
//Fade out a UIImageView over a one-second duration
imageView.alpha = 0.0;
//Fade out the TabBar, assuming it's owned by the app delegate
appDelegate.myTabBar.tabBar.alpha = 0.0;
[UIView commitAnimations];
Hope this addresses your question.
Andrew

How can I use UIModalTransitionStylePartialCurl on a UIView that does NOT take up the whole screen?

In Apple's official Maps app for the iPhone, there is a small 'page curl' button in the lower-right corner. When you press it, the map itself peels back to reveal some options. I would like to duplicate this effect in my own app.
I'm trying to use UIModalTransitionStylePartialCurl (Added in SDK 3.2). In terms of its layout, my app resembles Apple's official Maps app almost exactly. I can easily get the ENTIRE screen to peel back, revealing another view underneath, but I don't want this. I want ONLY the map view to peel back.
In order to create this effect, you must have a UIViewController that will perform the transition. If I set this UIViewController's view to a small subview somewhere on the screen that does not take up the entire screen, I can get just that subview to peel back. That's great! However, after the second part of the transition (when the page falls back into place), the views are never where they started. Either the view that peeled back will have moved from its original position, or the view that was revealed will have expanded to take up the entire screen.
Is there any obvious mistake that I'm making? I would really appreciate any help!
The code I'm using is really simple. It's basically just:
underMapViewController.modalTransitionStyle = UIModalTransitionStylePartialCurl;
[curlableMapViewController presentModalViewController:underMapViewController animated:YES];
From the Documentation:
UIModalTransitionStylePartialCurl
When the view controller is presented, one corner of the current view curls up to reveal the modal view underneath. On dismissal, the curled up page unfurls itself back on top of the modal view. A modal view presented using this transition is itself prevented from presenting any additional modal views.
This transition style is supported only if the parent view controller is presenting a full-screen view and you use the UIModalPresentationFullScreen modal presentation style. Attempting to use a different form factor for the parent view or a different presentation style triggers an exception.
Although, I haven't got any exception using other presentations than full screen. I was testing out and I get the same problem as you. I found that if my ParentViewController's view is an ImageView and I set the content mode to UIViewContentModeCenter, the view is not resized or moved. Maybe there is a workaround by saving your current view as an image, put it at the top, make the curl, and after you dismiss your modal, rearrange the messed hidden stuff and remove the top image view. I know that it sounds crazy but that is what I would try if I really had to accomplish that requirement.
Hope this helps, Jorge.
How about something like this:
[UIView beginAnimations:#"PartialPageCurlEffect" context:nil];
[UIView setAnimationDuration:0.3];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myOldSubViewController.view cache:YES];
[myOldSubViewController.view addSubview:myNewViewController.view];
[UIView commitAnimations];
Note: for some views if the views are complex and off-centre there could be artifacts. Changing cache:YES to cache:NO may fix with.
As cprcrack points out, this doesn't answer the original question. However, it's useful information, so with that in mind I'm going to leave it here.
This is actually much simpler than you'd guess.
We'll call the view controllers MapViewController and SettingsViewController. Your problem is you want to peel back part (and only part) of MapViewController to show SettingsViewController.
Here's how you do it:
Use a full size view for both views.
Only put content on the bottom half of SettingsViewController's view.
Use UIModalTransitionStylePartialCurl to transition between them, like you already are.
iOS will detect that you've done this automatically and only peel MapViewController's view back far enough to the bottom half of SettingsViewController's view, which is where all your content is.
If you put content in the top half of SettingsViewController's view, iOS will detect that and peel back MapViewControllers view all the way instead.
Summary: Put content only in the bottom half of your new view. iOS will figure it out.
(I don't think this is documented anywhere, sorry.)
I had a slight hiccough confusing
.modalTransitionStyle
and
.modalPresentationStyle
The first one goes on the TARGET viewController, e.g., the one you want underneath. The second goes on the PARENT viewController, e.g. the one that actually gets distorted by the curl. The OP got this right, but I got it wrong, and it was a frustrating 10 minutes before I figured it out. Throwing it on this post in case it gives someone else the head slap I needed.
I ran into this problem as well. For me the frame of the parent view wasn't mangled until the modal view was dismissed. So I cached the frame before dismissing then restored it right after.
CGRect frame = controllerWithModal.view.frame;
[controllerWithModal dismissModalViewControllerAnimated:YES];
controllerWithModal.view.frame = frame;
Me too had this problem,but i solved it..(dont know its the right way,but its working)
I wanted to had an imageview inside a scrollview,and when the user taps a button inside that scroll view i wanted to curl-up the scroll view and show a tableview in that place.
So i placed a tableview behind scrollview and initialy set it to hidden.when the user taps button
i did
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:frontView cache:YES];
[UIView commitAnimations];
after that removed frontview from view.
Hope that helps..
I believe that Apple's Maps application uses undocumented transitions: mapCurl and mapUncurl. I am not sure there is any way to do exactly what caecus314 wants (which is also the effect I have been trying to duplicate).
UIModalTransitionStylePartialCurl will curl up the whole bottom part of the first view, including the toolbar, which is unlike Apple's Maps app, which only curls up the map and leaves the toolbar in place.
As far as I can tell there is no way to only curl up the map.
Override the viewWillDisappear method of your underMapViewController with something like this:
- (void)viewWillDisappear:(BOOL)animated
{
curlableMapViewController.view.frame = CGRectMake(0.f, 0.f, 320.f, 416.f);
[super viewWillDisappear:animated];
}
That corrects the size of the view of the curlableMapViewController to the know size you specify, which you could save earlier in the viewWillAppear method, for example.

How do I get the UIPickerView to slide up over another view?

I am looking for a way to slide a UIPickerView (and UIDatePickerView) up over a view (UITableView in particular) when a particular button press takes place.
I understand how to get the events for clicks into the UITableView, but there doesn't seem to be a good way to have the UIPickerView slide up on top of it...
All the examples I have seen so far just have it snapped to the bottom of another view and I am able to do this without issue.
Thoughts?
Thanks in advance.
Modally presented view controllers slide up from the bottom to cover the current view.
See the documentation for -presentModalViewController:animated: in the UIViewController Class Reference. You would invoke this method on your UITableViewController and pass the UIPickerViewController as the first parameter and YES as the second.
An example of what Ben mentions above (Animation Blocks) is the following, which will animate to a subview.
UIWindow *window = [[Director sharedDirector] window];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationTransition:(UIViewAnimationTransitionCurlDown)
forView:window
cache:YES];
[window addSubview:aView];
[UIView commitAnimations];
Have you tried using UIView's animation blocks do do this? See the Apple docs on +[UIView beginAnimations:context:] and +[UIView commitAnimations]. Basically, wrap your calls to display the UIPickerView in these calls, and you can slow it down a bit.