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.
Related
I've googled about this problem a lot but there seems to be no answer. So I'm hoping some of you may know how to deal with this. I have a view controller that has a tableview, when I change the view frame with animation, everything goes well, except one particular case, when tableview has more items than it can fit to screen, and only when the tableview is scrolled to bottom. Then if I shrink the view height, my view animates correctly, but the tableview somehow jumps up a bit and only then animates to the bottom.
If I shrink the view, but tableview isn't scrolled to bottom (even if I can see the last cell, lets say a bit more than half of it) it does animate correctly.
I've tried couple of things, like setting autoresizing masks on and off and also animate from current state or something like that, but that didn't help :/
So any suggestions what could be the problem?
EDIT:
Code that i use to change frame
[UIView animateWithDuration:0.5
delay:0.0
options: UIViewAnimationCurveEaseOut
animations:^{
[_contView setFrame:CGRectMake(0, 0, 320, 420)];
}
completion:^(BOOL finished){
}];
I fought this same bug for awhile before realizing I couldn't figure out for the life of me why it was happening...until I found a very detailed explanation and solution.
Full write-up can be found here:
http://lists.apple.com/archives/cocoa-dev/2012/Apr/msg00341.html
Quick solution is to change contentInset instead of the table view frame. Just add the height of whatever you are showing (ie a keyboard or ad banner view) to the contentInset.bottom property. The scrolling area will be increased to account for the required resize.
In this example, I was showing an ad banner view on top of my tableview:
UIEdgeInsets insets = myTable.contentInset;
insets.bottom += 50; // 50px is the height of the ad banner view
myTable.contentInset = insets;
I used to have a similar problem and I implemented this workaround (Disclaimer: this is a hack to a currently-unresolved iOS bug):
// check if the table view is scrolled to the bottom
if (tableView.contentOffset.y + tableView.frame.size.height == tableView.contentSize.height) {
// if it is, shift the table view contents up one pixel
[tableView setContentOffset:CGPointMake(tableView.contentOffset.x, tableView.contentOffset.y - 1) animated:NO];
}
// call the animation block afterwards here
It's a hack, though not noticeable to the user since it's just a 1 pixel motion. UITableView has a few bugs (reported to Apple already, but not yet resolved) when it comes to animations from a scrolled-to-bottom position.
You should use autoresizing from xib which is right corner of xcode ... I think this may help you.
Try to add footer view to your table with non-zero height.
I'm fairly new to iPhone programming, and I'm making a fairly basic app. Anyway, I just want to know how to go about creating a menu that scrolls up from the bottom (beginning at the top of the tab bar) that displays a few options. I've attached a picture that better helps portray what I mean. I'm assuming I should create some sort of subview and then add some animation to it, but I'd like to get your advice on the best way to start.
Thanks
The simplest solution would be to use a UIActionSheet, unmodified.
If that's not what you're looking for, using a modal view controller is always an option.
If, however, you want something that won't cover the entire screen, and can have a custom look, the basic idea is this:
Create your view with a frame that's just at the bottom of your main view (e.g. at 0,406).
Optionally disable user interaction with the main view
Use UIView animations to move it up
The code would look something like this:
UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height, self.view.bounds.size.width, kCustomViewHeight)];
[self.view addSubview:customView];
[UIView animateWithDuration:0.2 animations:^{
CGRect f = customView.frame;
f.origin.y -= kCustomViewHeight;
customView.frame = f;
}];
I didn't do it myself, but saw a cool source-code, where it was performed with the helped of UIScrollView (by default positioned "below" the screen), containing UITableView and a button (wich was shown at the bottom of the screen). ScrollView was getting a command to move after the press of this button (in IBAction of it).
Being shorter, try to look at UIScrollView (play with UITableView in it).
I've done something similar, popping up some object from the bottom of the screen by subclassing UIActionSheet and adding my own controls as subviews. I imagine a similar method could be used in your situation.
Create a subclass of UIActionSheet implementing the UITableViewDelegate and UITableViewDataSource protocols. In the - (id)init method of that class, add a UITableView as a subview with self as the delegate and data source.
Then from the main view, call your custom UIActionSheet with showInView:.
Use delegates to call back to the main view to let it know when the user selects an option, then use [myCustomMenu dismissWithClickedButtonIndex:0 animated:YES] to hide the menu.
As a small project to get myself used to some more iPhone elements I've decided to create a sample in call screen, modeling it on the native iPhone call screen (IOS 4)
However I'm struggling to make out what elements the native in call screen uses to make up the view that is displayed.
I was wondering if someone with more experience on iPhone could help me out by explaining what the various elements are?
Is the bottom part a UIActionSheet that is slightly transparent and with a UIBUtton placed over it? Or is it a slightly transparent imageview with the button over-layed?
Similarly at the top, it looks like its an imageiew with the name or number of the callee/caller and the call duration underneath, would I be correct in thinking that?
The part I'm really interested in is the bit where the icons are held in some sort of dialog in the centre of the screen that is animated to swing around to a keypad when it is selected, is this some sort of iPhone control that I can use or customise?
EDIT:
I've tried two things to try to achieve this so far:
1) I've created a view within a view and I am trying to flip this however I can only seem to get the main view to flip properly and not the view inside it which is the one I want and it doesn't seem to be a good approach.
2) I've tried to look at using the Utility application approach to it but again this seems to be for flipping the full screen and not just a section within a screen (view)
Has anybody got any pointers on what to try next? Or if one of the above methods is the ideal way to do it and should be investigated further?
At a basic level, I would say that the panel of 6 buttons is simply a view with 6 buttons laid out in it as subviews.
The rounded corners and border stroke can be achieved by accessing the view's layer property and the layer's properties for cornerRadius, borderWidth, and borderColor, e.g.
view.layer.cornerRadius = 10;
view.layer.borderWidth = 2;
view.layer.borderColor = [UIColor whiteColor].CGColor;
This requires including the CoreGraphics Framework, and the appropriate header files in your code.
I notice there's a gradient (or it appears to be a gradient) in the border stroke. I am not sure how to achieve that without doing something more involved and clever (such as a containing view that is just slightly larger veritically and horizontally than the view containing the buttons and is filled with a gradient color. The result would be a gradient border, but this doesn't seem like the best way to do that...
The flip is actually pretty easy. You can create a UIView animation with something like this:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft
forView:view cache:NO]
[UIView commitAnimations];
Does this help, or at least get you started?
I am working on an iOS app and am having trouble with a really tall UIView (2400px tall). The UIView contains a really long form that's been broken down into 5 parts. As the user completes one part of the form, I would like to slide the UIView up to reveal the next part. I present the UIView modally.
The problem that I am having is that when I slide up the UIView, the background slides up along with the objects in the first section and the next section is left with a clear background. The code I use to slide the UIView is:
- (IBAction)slideUp {
// Slide the view up the screen to reveal the next section
CGRect frame = self.view.frame;
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.75];
frame.origin.y = -480;
self.view.frame = frame;
[UIView commitAnimations];
}
All of the objects in the really tall UIView slide up fine, I'm just losing my background color. Any idea why?
Thanks!
Is your background being rendered by some sort of "background view" that's sized to fit the screen?
In any case, you should probably use a UIScrollView with scrolling disabled instead of a really long UIView. You can then simply animate the contentOffset property to scroll the controls up, but the scrollview itself can simply be screen-sized.
Instead of using self.view.frame, i would highly recommend you create an IBOutlet for the really long view so that the code looks like self.longView.frame.
This will help making it clear which views you are working with.
Right now i am betting that you are animating the wrong view.
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.