in some iPhone/iPad Apps you can see screens sliding in and out.
How does the straight slide in/out work?
I could only find Curl and Flip for animation:
UIViewAnimationTransitionFlipFromLeft,
UIViewAnimationTransitionFlipFromRight,
UIViewAnimationTransitionCurlUp,
UIViewAnimationTransitionCurlDown,
not sure what you mean by sliding in and out, perhaps provide an example app with it
I think you mean pushing a view to the left to reveal the next view under it or something similar
-(void) slideView:(UIView *)uiv_slide toReveal:(UIView *)uiv_reveal withDuration:(double)d_duration {
//Add the subview to the ViewController's view
[self.view addSubview:uiv_reveal];
//Bring the view to slide to the front
[self.view bringSubviewToFront:uiv_slide];
//Make an animation to slide the view off the screen
[UIView animateWithDuration:d_duration
animations:^ {
uiv_slide.center = CGPointMake(-1*(uiv_slide.frame.size.width/2), uiv_slide.frame.size.height/2);
}
];
}
hopefully the code helps
If you make your app based on the navigation app template, the transitions for going from view to view will have that slide in/out animation.
Take a look at some custom animations here. This will allow you to animate your views however you want. You can also use the apple navigation controller to build a drill down structure to your apps. Those view will automatically slide transition.
Related
I'm not sure if you guys have checked out the sign-in/sign-up interface for the iPhone app "FoodSpotting
, but it's pretty cool. Somehow they're able to move what seems to be a UITableView vertically downwards to create an entirely new view with a slick animation. It essentially looks like they're moving the entire screen down, but yet when you try and scroll back up to the original sign-in screen you can't.
Does anybody know how to get this kind of functionality with either a UITableView, ScrollView, or regular UIView? If you need more clarification on the kind of animation I'm talking about either download the app or I can try and post pictures...
Hey I actually built that page! It's pretty simple: It's just two UITableViews, and a simple Core Animation animation is used to "scroll" between the two. I suppose a similar effect can be achieved using only one tableview, although using two separate ones allows us to take advantage of the individual tableview's scrolling behavior to do things like move the form up when the keyboard appears.
EDIT:
I know this is SUUUPER late, but here's a quick explanation...
My controller is a UIViewController subclass, not a UITableViewController. In the viewcontroller's view, I set up two tableviews like this...
Black = Status Bar
Red = Screen Area
Blue = Top TableView
Green = Bottom TableView, positioned just offscreen
The code to transition between the two is pretty simple...
//transition to bottom tableview
[UIView animateWithDuration:ANIMATION_TIME animations:^{
bottomTableView.transform = CGAffineTransformMakeTranslation(0, -self.view.frame.size.height);
topTableView.transform = CGAffineTransformMakeTranslation(0, -self.view.frame.size.height);
}];
…
//and to return to original state…
[UIView animateWithDuration:ANIMATION_TIME animations:^{
bottomTableView.transform = CGAffineTransformIdentity;
topTableView.transform = CGAffineTransformIdentity;
}];
Yes you are right. It's a UIScrollView on UIView. By default scrollview is scrollable and on completing sign up View is animated.
So this will be easy to implement.
I'm trying to make a modal view and a non modal view appear the same.
The modal view is a library I'm using.
I want to use the same transitional effect on both, is there one I can use ?
No for ModalView Controller you have your standard Animate: YES, and NO, this just shifts it up, or DOWN (if you dismiss Modal View contreoller)
my technique is building UIView's into the same xib/nib and using the 6 animations that are offered on that for a really cool effect. in the end you can tie the UIVIew up in another new class (NewView), and add that class object to your xib and tie up the buttons etc...
header...
#interface NewView : UIView {
IBOutlet UIView *mynewView;
}
#end
implmentation... for say a button)
-(IBAction)openThisPage{
[UIView beginAnimations:nil context: NULL];// Setting up the Animation
[UIView setAnimationDuration:1.0]; // Duraction
[UIView setAnimationTransistion:110 forView:self cache: YES]; // Type of Animation
[otherUIVIEW removeFromSuperview]; // removes UIView to Screen
[self addSubView:otherUIView]; // adds a UIView to screen
[UIView commitAnimations]; //creates the animation
}
other naimations as you can see i said 110 for one of those animations,
110 = bubble effect animation
UIViewAnimationTransistionFlipfromLeft = Flip from Left Side, change Left ot Right for right side
UIViewAnimationTransistionCurlDown = Curls the page from Top to Bottom, put Up for opposite effect
103 = Genie Effect
also their is a couple more using the camera roll, but no user's use that unless they are leaving or entering the camera roll, I have not touched them myself....
what do you mean a library you are using, like a Core Data UITableView ?
building it with UIViews I have noticed is always alot easier, easier for manipulation with on screen effects, creating simple drill down file menu's
so basically create a new class, with no XIB, name it hwatever, change the class implementation delegate to UIView, add a view to that new class
go into your main XIB, add a Object, change it's properties to that new class, and then tie up new buttons and create a UIView in that XIB and tie it to that class, and you are good to go :-)
I could post code, but I dont really have a solid example on this computer... let me know if this helps....
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.
I have a UITabBarController in my application. In the first view of this controller I have a UINavigatioController and user can navigate to multiple views through this NavigationController. In the rootview of this controller I have my frontview or main view of the application which have an info icon, which flips the screen to info page which is an another view in my appDelegate. So I use the following code from my appdelegate to switch to info page.
UIView * controllersView = [aboutUsViewController view];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:window cache:YES];
[self.window addSubview:controllersView];
//[aboutUsViewController animateView];
[self.tabBarController.view removeFromSuperview];
[UIView commitAnimations];
My problem is when I flip, I see a very small white bar at the top. This white bar is seen only while fliping from main view that is first screen to info page and not viceversa.
I am confused how to remove this bar since I have a UIImage covering my whole page on the mainview.
How to solve this.
If the bar is only visible during a transition, then change the color of your main window to be the same as the view you are transitioning. Or you can make it totally translucent, which may do the same.
I had the same problem. I think this is a bug in the 3.1 OS. File a bug with Apple. My current workaround was to use the standard slide up modal transition. Not the best solution, but at least it doesn't look weird.
Have you tried setting wantsFullScreenLayout on your view controller?
I'm not sure if you are displaying the status bar or not, but you may want to check if your UIImage size completely goes to the top of your view - especially if you've added it in IB. Also, try setting the cache setting in your transition to NO to see if that makes a difference. It uses more resources, but I've had to do that to stop text fields from blanking out during a transition.
You probably shouldn't be doing all those animations yourself. I'm not exactly sure what your goal is, but it might be easier to use something called "pushModalViewController" and have a controller for your info page, along with a view. This may fix the problem, because it may just be something to do with animations.
Then, when you exit your info page, control returns to your navigation controller (which is what I think you want). I hope this helps.
I had the same puzzle/riddle/problem: after switching back from a modal view the underlying view had a light blue status bar, which showed for half a second:
However, because I did take this screenshot, I realized it's not the status bar, but some distant remainder of the navigation bar. I switched navigation bar off in the app delegate, but here it still, and only during the transition (after the UIModalTransitionStyleFlipHorizontal transition there was no blue bar)
Therefore what I did was giving it a translucent color:
self.title = #"";
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
Might not be the world's finest solution, but it's not a bug with Apple.
If you are working on ionic2 then here is the code-
let config = {statusbarPadding: false};
ionicBootstrap(MyApp, null, config);
This worked for me!
Here it is in more details-
ionic2 how to remove white space from status bar from top in iphone
I need to customize the page where on any event the customizable "Button menu pane" has been visible from the bottom, just like one of the application "Twitterrific" (please see the screenshot). I've tried to implement through with modalViewController properties but it populate my customizable view on the whole screen and my parent view is disappeared in the background.
Code snippet:
MyCustomizableButtonMenuContoller *buttonMenucontroller =
[[MyCustomizableButtonMenuContoller alloc] init];
// To show my customizable button menu from bottom at parent view on any event.
[self presentModalViewController:buttonMenucontroller animated:YES];
//To hide customizable button menu.
[self dismissModalViewConrollerAnimated:YES];
I've also tried to transparent my customizable button menu view but it doesn't work on my requirement. The UIActionsheet seems to be the one i'm looking for but again is it possible to customize the buttons with images? If there are any other ways to achieve the scenario in the screen shot, please let me know about your findings or ideas.
Screenshot:
Twitterrific screenshot http://scaline3.appspot.com/Button_menu_pane.png
You don't want to use a modal view controller for this. You can't achieve this "partial overlay" effect that way, because the iPhone OS makes several assumptions about the views of nested view controllers.
Instead, you need to create a UIView with several UIButtons inside that is initially hidden off the bottom of your primary view. When the user clicks the customize button, you need to animate the view upwards into place. The panel will be part of your main controller, but your code shouldn't be too much different.
If you're just getting started with Objective-C, you should read the Core Animation documentation. You should be able to animate the view into place with very, very little code. Here's an example:
[UIView beginAnimations:nil context: nil];
[UIView setAnimationDuration: 0.5];
[myDetailPane setFrame:CGRectMake(0, [self bounds].size.height - [myDetailPane bounds].size.height, [myDetailPane bounds].size.width, [myDetailPane bounds].size.height)];
[UIView commitAnimations];
No timers or gradual movement of the view is necessary - the system will take care of it.
Apple's example in their documentation seems to make use of Navigation Controllers. This might give you some help: Using Modal View Controllers
Good luck!