I'm trying to have a UIPickerView slide from the bottom of the screen (over the top of a tab bar) but can't seem to get it to show up. The actual code for the animation is coming from one of Apple's example code projects (DateCell). I'm calling this code from the first view controller (FirstViewController.m) under the tab bar controller.
- (IBAction)showModePicker:(id)sender {
if (self.modePicker.superview == nil) {
[self.view.window addSubview:self.modePicker];
// size up the picker view to our screen and compute the start/end frame origin for our slide up animation
//
// compute the start frame
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGSize pickerSize = [self.modePicker sizeThatFits:CGSizeZero];
CGRect startRect = CGRectMake(0.0, screenRect.origin.y + screenRect.size.height, pickerSize.width, pickerSize.height);
self.modePicker.frame = startRect;
// compute the end frame
CGRect pickerRect = CGRectMake(0.0, screenRect.origin.y + screenRect.size.height - pickerSize.height, pickerSize.width, pickerSize.height);
// start the slide up animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
// we need to perform some post operations after the animation is complete
[UIView setAnimationDelegate:self];
self.modePicker.frame = pickerRect;
// shrink the vertical size to make room for the picker
CGRect newFrame = self.view.frame;
newFrame.size.height -= self.modePicker.frame.size.height;
self.view.frame = newFrame;
[UIView commitAnimations];
// add the "Done" button to the nav bar
self.navigationItem.rightBarButtonItem = self.doneButton;
}}
Whenever this action fires via a UIBarButtonItem that lives in a UINavigationBar (which is all under the FirstViewController) nothing happens. Can anyone please offer some advice?
Turns out I had missed the very important fact that the UIPickerView had been defined in Interface Builder as well... after doing that and connecting up the outlet everything is working!
Related
I have a UIButton somewhere on my view. On touch event of button I making a UIView appear. The UIAnimation I have used make the view appear from top of window. But I want it to appear from button.frame.origin.y . Before touching the button the view is not visible. On touching the button view should start appearing from above position.
Here is the code :
-(IBAction) ShowInfowView:(id)sender{
CGRect rect = viewInfo.frame;
rect.origin.y = rect.size.height - rect.size.height+58.0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.70];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
viewInfo.frame = rect;
[UIView commitAnimations];
}
This is how I am hiding the view again :
-(IBAction) HideInfoView:(id)sender{
CGRect rect = viewInfo.frame;
rect.origin.y = -rect.size.height;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.70];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
viewInfo.frame = rect;
[UIView commitAnimations];
}
In viewDidLoad I am doing the following :
CGRect rect = viewInfo.frame;
rect.origin.y = -rect.size.height;
viewInfo.frame = rect;
UPDATE:
Please see this example. Here view is appearing from top of screen. I want it to appear from button y axis. For that matter please consider button y position a bit upwards.
So you want a slide-in effect, but not from the top of the screen, just some arbitrary value?
One way to do it:
1) You should create a view that has the dimensions and position of your desired view AFTER animation finishes, we'll call it baseview.
2) Set this baseview property clipsToBounds to YES. This will make all subviews that are outside of the baseview's frame invisible.
3) Add your animating view as a subview of the baseview, but set the frame so it is invisible (by plcacing it above the baseview):
frame = CGRectMake(0, -AnimViewHeight, AnimViewWidth, AnimViewHeight);
4) Animate the animview frame:
//put this inside of an animation block
AnimView.frame = CGRectMake(0, 0, AnimViewWidth, AnimViewHeight);
EDIT:
Example:
//define the tags so we can easily access the views later
#define BASEVIEW_TAG 100
#define INFOVIEW_TAG 101
- (void) showInfo
{
//replace the following lines with preparing your real info view
UIView * infoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[infoView setBackgroundColor: [UIColor yellowColor]];
[infoView setTag: INFOVIEW_TAG];
//this is the frame of the info view AFTER the animation finishes (again, replace with real values)
CGRect targetframe = CGRectMake(100, 100, 100, 100);
//create an invisible baseview
UIView * baseview = [[UIView alloc] initWithFrame:targetframe];
[baseview setBackgroundColor: [UIColor clearColor]];
[baseview setClipsToBounds: YES]; //so it cuts everything outside of its bounds
[baseview setTag: BASEVIEW_TAG];
//add the nfoview to the baseview, and set it above the bounds frame
[baseview addSubview: infoView];
[infoView setFrame:CGRectMake(0, -infoView.bounds.size.height,
infoView.bounds.size.width, infoView.bounds.size.height)];
//add the baseview to the main view
[self.view addSubview: baseview];
//slide the view in
[UIView animateWithDuration: 1.0 animations:^{
[infoView setFrame: baseview.bounds];
}];
//if not using ARC, release the views
[infoview release];
[baseview release];
}
- (void) hideinfo
{
//get the views
UIView * baseView = [self.view viewWithTag: BASEVIEW_TAG];
UIView * infoView = [baseView viewWithTag: INFOVIEW_TAG];
//target frame for infoview - slide up
CGRect out_frame = CGRectMake(0, -infoView.bounds.size.height,
infoView.bounds.size.width, infoView.bounds.size.height);
//animate slide out
[UIView animateWithDuration:1.0
animations:^{
[infoView setFrame: out_frame];
} completion:^(BOOL finished) {
[baseView removeFromSuperview];
}];
}
I have done exactly what you're trying in my recent project.
The following steps should make this work:
1. In your viewDidLoad: you init your viewToFadeIn like this:
viewToFadeIn = [[UIView alloc] initWithFrame:CGRectMake(20,self.view.frame.size.height+10, self.view.frame.size.widh-40, 200)];
//its important to initalize it outside your view
//your customization of this view
[self.view addSubview:viewToFadeIn];
2.your ShowInfowView: Method should look like this:
` -(IBAction) ShowInfowView:(id)sender{
[UIView beginAnimations:#"fadeIn" context:NULL];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationFinished:finished:context:)];
viewToFadeIn.transform = CGAffineTransformMakeTranslation(0, -290);
//290 is in my case, try a little for your correct value
[UIView commitAnimations];
}
3.yourHideInfoView:` Method looks like this
-(IBAction) HideInfoView:(id)sender{
[UIView beginAnimations:#"fadeOut" context:NULL];
[UIView setAnimationDuration:0.25];
[UIView setAnimationDelegate:self];
viewToFadeIn.transform = CGAffineTransformMakeTranslation(0, 0);
[UIView commitAnimations];
}
EDIT:
4. animationFinishedMethod:
- (void)animationFinished:(NSString *)animationID finished:(BOOL)finished context:(void *)context{
if ([animationID isEqual:#"fadeIn"]) {
//Do stuff
}
if ([animationID isEqual:#"fadeOut"]) {
//Do stuff
}
}
SEE THIS
This should do the trick. Good luck
Your problem is not clear (for me).
What is this?
rect.origin.y = rect.size.height - rect.size.height+58.0;
Is 58 origin of your UIButton?
You should use sender.frame etc
Use blocks to animate like this
[UIView animateWithDuration:0.5f animations:^{
// Animation here
} completion:^(BOOL finished) {
// onComplete
}];
- (void) slideIn{
//This assumes the view and the button are in the same superview, if they're not, you'll need to convert the rects
//I'm calling the animated view: view, and the button: button...easy enough
view.clipToBounds = YES;
CGRect buttonRect = button.frame;
CGRect viewRect = CGRectMake(buttonRect.origin.x, buttonRect.origin.y + buttonRect.size.height, view.bounds.size.width, 0);
CGFloat intendedViewHeight = view.height;
view.frame = viewRect;
viewRect.size.height = intendedViewHeight;
[UIView animateWithDuration:.75 delay:0.0f options:UIViewAnimationOptionCurveEaseOut animations:^{
view.frame = viewRect;
}completion:nil];
}
This will cause the the view to appear to slide out from under the button. To slide the view back in, you just reverse the animations. If you wish to slide it up from the button, you'll need to make sure your starting 'y' is the 'y' value of the button (rather than the 'y' + 'height') and animate both the height and y values of the view that needs animating.
i am using the Code example from Apple, to display a UIDatePicker when a specific UITableViewCell is selected.
how can i change this behavior?
My Code:
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
if(indexPath.section == 5) {
//Date Picker
UITableViewCell *targetCell = [tableView cellForRowAtIndexPath:indexPath];
self.pickerView.date = [self.dateFormatter dateFromString:targetCell.textLabel.text];
if (self.pickerView.superview == nil)
{
[self.view.window addSubview: self.pickerView];
// size up the picker view to our screen and compute the start/end frame origin for our slide up animation
//
// compute the start frame
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGSize pickerSize = [self.pickerView sizeThatFits:CGSizeZero];
CGRect startRect = CGRectMake(0.0,
screenRect.origin.y + screenRect.size.height,
pickerSize.width, pickerSize.height);
self.pickerView.frame = startRect;
// compute the end frame
CGRect pickerRect = CGRectMake(0.0,
screenRect.origin.y + screenRect.size.height - pickerSize.height,
pickerSize.width,
pickerSize.height);
// start the slide up animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
// we need to perform some post operations after the animation is complete
[UIView setAnimationDelegate:self];
self.pickerView.frame = pickerRect;
// shrink the table vertical size to make room for the date picker
CGRect newFrame = self.tableView.frame;
newFrame.size.height -= self.pickerView.frame.size.height;
self.tableView.frame = newFrame;
[UIView commitAnimations];
}
}
}
Assuming the code you've provided is of your detail ViewController, you don't need to set the frame for pickerRect. Just need to tell the app that when the orientation changes, the pickerView should rotate with it, as follows
self.picker.autoresizingMask = UIViewAutoresizingFlexibleWidth |
UIViewAutoresizingFlexibleTopMargin;
You can force the size of picker view by setting its frame, as you've done. Since you are working with a UISplitViewController, the pickerView needs to be a subView of your detail ViewController, NOT self.view.window. Also, go through the sample provided at this link to see what other mistakes you were making.
What I see from the given picture, is that you are trying to slide the UIPickerView from the bottom of the screen upwards.
If so, then I think you are not setting frames as you should be.
As shown in View and Window Architecture, the origin of coordinate system is upper left corner.
I whould do something like this:
CGRect pickerFrame = pickerView.frame;
pickerFrame.origin.x = leftTableViewWidth;
pickerFrame.origin.y = screenFrame.size.height + pickerFrame.size.height;
pickerView.frame = pickerFrame;
// begin animation here
pickerFrame.origin.y += pickerFrame.size.height;
// commit animation
I am trying to dismiss a view controller from bottom to top instead of the standard right to left transition. Is this at all possible? Here is the code I have so far:
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGRect endFrame = self.view.frame;
endFrame.origin.y = screenRect.origin.y - screenRect.size.height;
UIView *aView = [[self.view retain] autorelease];
[self.view.window addSubview:aView];
aView.frame = CGRectMake(0, 0, 320, 460);
[UIView animateWithDuration:0.5
animations:^{
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
aView.frame = endFrame;
}
completion:^(BOOL finished) {
[self dismissModalViewControllerAnimated:NO];
[aView removeFromSuperview];
}
];
This does result in a transition; but the previous view controller does not appear until after the animation since I can't dismiss until after it completes... any ideas?
Aah, when you presentModalViewController, it automatically hides the view behind. What you need to do is not present and remove, but add the view controllers view as a subview of the main view. Then you just animate the view offscreen, and removeFromSuperview in the competition handler.
I am very new to iPhone/iPad development.
can you please help me create this programmatically. I want to expand/collapse a UIView programmatically.
This expandable/collapsable view will have some text field and lables which should appear and disappear with that view
Suppose you have a UIView instance in the UIViewController class like this:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(x, y, w1, h1)];
[self.view addSubview:view];
based on the requirement you set the view visibility as I did here .. I am not displaying the view when the controller is loading it's view ..
[view setHidden:YES];
Maintain a flag to check the visibility of the view instance .. lets say isViewVisible is my flag to check the visibility of the view .. I set it to NO in the begning ..
isHelpViewVisible = NO;
and I wrote an action method (viewClicked) here to expand and to collapse the view object , give this action method to a button instance and it will work.
- (void)viewClicked:(id)sender {
if (!isViewVisible) {
isViewVisible = YES;
[view setHidden:NO];
[UIView beginAnimations:#"animationOff" context:NULL];
[UIView setAnimationDuration:1.3f];
[view setFrame:CGRectMake(x, y, w1, h1)];
[UIView commitAnimations];
} else {
isViewVisible = NO;
[view setHidden:NO];
[UIView beginAnimations:#"animationOff" context:NULL];
[UIView setAnimationDuration:1.3f];
[view setFrame:CGRectMake(x, y, width, hight)];
[UIView commitAnimations];
}
}
and add the textfields and labels objects to the view object as subviews and set the animation to those objects as well .. it will work.
Replaces the following from above:
[UIView beginAnimations:#"animationOff" context:NULL];
[UIView setAnimationDuration:1.3f];
[view setFrame:CGRectMake(x, y, w1, h1)];
[UIView commitAnimations];
With the New way of doing animations:
[UIView animateWithDuration:1.3f animations:^{
self.frame = CGRectMake( x1, x2, w1, h1);
} completion:^(BOOL finished) {
// this gives us a nice callback when it finishes the animation :)
}];
To change the size / position of a UIView within its parent just change its frame property:
CGRect newFrame = myView.frame;
newFrame.origin.x = newX;
newFrame.origin.y = newY;
newFrame.size.width = newWidth;
newFrame.size.height = newHeight;
myView.frame = newFrame;
You can try this
CGRect frame = [currentView frame];
frame.size.width = 999;//Some value
frame.size.height = 444;//some value
[currentView setFrame:frame];
You can follow this whenever you want to increase/decrease view size
I've a serious problem, and I cannot solve it by myself. I've spent hours searching the documentations, programming guides as well as developer forums and stack overflow.
The problem is I want to display a picker view in UITableViewController. I have a screen that has multiple text fields allowing me to search by title/author/keywords... and I'd also like to specify the minimum and maximum dates, using the UIDatePicker (or UIPickerView - to specify "last 5 days" for example).
I want to use UITableViewController because it saves me a lot of time resizing the table while the keyboard pops up when user presses the text field. In fact I've never been able to reproduce this animation using UIViewController and listening to textfields' delegate. It was almost perfect but there were some visible disadvantages comparing to the behaviour of table if displayed using UITableViewController.
So everything's fine when there are only textfields. But what about the date fileds? I want to make it exactly like the Contacts.app by Apple when I want to add a new contact and specify the birthday. In that application the Date Picker is shown, the table is resized, switching between email/phone field and birthday works great. I could believe that the date picker is in this case the keyboard but not for typing phone/email but date because it slides in/out just like a keyboard and is replaced instantly when the keyboard/picker is opened.
How did thet accomplished it?
Or where can I find the easiest solution to reproduce it. I believe it cannot be as hard because it's very common situation.
Regards
Chris
All of that is pointless. We should deal with the inputView and inputAccessoryView, where inputView should has the picker and inputAccessoryView the toolbar.
You're going to have to create a UIWindow object, then add a view. The windowLevel property makes it higher than the statusBar, which you may or may not want.
//statusWindow is a UIWindow ivar declared in the header
//pickerShowing is declared as a BOOL in header
//release and removeFromSuperview is done in the animation delegate methods
//ANIMATE IN
-(void)slideIn {
CGRect pickerFrame = CGRectMake(0.0f, 0.0f, 320.0f, 200.0f); //guessing on height
UIView *viewForPicker = [[UIView alloc] init];
UIPickerView *aPicker = [[UIPickerView alloc] init]; //don't forget to set delegate and dataSource
viewForPicker.frame = pickerFrame;
statusWindow = [[UIWindow alloc] initWithFrame:CGRectMake(0.0, 480.0, 320.0f, 200.0f)];//guessing on height, y value is off the screen (bottom)
statusWindow.windowLevel = UIWindowLevelStatusBar;
statusWindow.hidden = NO;
statusWindow.backgroundColor = [UIColor clearColor];
[statusWindow makeKeyAndVisible];
[viewForPicker addSubview:aPicker];
[statusWindow addSubview:viewForPicker];
[viewForPicker release];
[aPicker release];
[UIView beginAnimations:#"slideUp" context:nil];
[UIView setAnimationDuration:0.3];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationFinished:)];
statusWindow.frame = CGRectMake(0.0f, 200.0f, 320.0f, 200.0f); //guessing on y and height values, change them to suit needs
[UIView commitAnimations];
pickerShowing = YES;
}
//ANIMATE out:
-(void)slideOut {
[UIView beginAnimations:#"slideDown" context:nil];
[UIView setAnimationDuration:0.3];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(animationFinished:)];
statusWindow.frame = CGRectMake(0.0f, 480.0f, 320.0f, 200.0f);
[UIView commitAnimations];
pickerShowing = NO;
}
-(void)animationFinished:(NSString *)name {
if ([name isEqualToString:#"slideDown"]) {
[statusWindow release];
}
}
If you want to slide in/out the picker view, you can use Core Animation.
Simplest snippet:
// Slide picker view in
[UIView beginAnimations: #"SlideIn" context: nil];
myPickerView.frame = upFrame;
[UIView commitAnimations];
// ...
// Slide picker view out
[UIView beginAnimations: #"SlideOut" context: nil];
myPickerView.frame = downFrame;
[UIView commitAnimations];
upFrame and downFrame are CGRect you make with the right position for your picker view on screen and off screen respectively.
Hope this helps.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *targetCell = [tableView cellForRowAtIndexPath:indexPath];
self.pickerView.date = [self.dateFormatter dateFromString:targetCell.detailTextLabel.text];
// check if our date picker is already on screen
if (self.pickerView.superview == nil)
{
[self.view.window addSubview: self.pickerView];
// size up the picker view to our screen and compute the start/end frame origin for our slide up animation
//
// compute the start frame
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGSize pickerSize = [self.pickerView sizeThatFits:CGSizeZero];
CGRect startRect = CGRectMake(0.0,
screenRect.origin.y + screenRect.size.height,
pickerSize.width, pickerSize.height);
self.pickerView.frame = startRect;
// compute the end frame
CGRect pickerRect = CGRectMake(0.0,
screenRect.origin.y + screenRect.size.height - pickerSize.height,
pickerSize.width,
pickerSize.height);
// start the slide up animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
// we need to perform some post operations after the animation is complete
[UIView setAnimationDelegate:self];
self.pickerView.frame = pickerRect;
// shrink the table vertical size to make room for the date picker
CGRect newFrame = self.tableView.frame;
newFrame.size.height -= self.pickerView.frame.size.height;
self.tableView.frame = newFrame;
[UIView commitAnimations];
// add the "Done" button to the nav bar
self.navigationItem.rightBarButtonItem = self.doneButton;
}
}
- (void)slideDownDidStop
{
// the date picker has finished sliding downwards, so remove it
[self.pickerView removeFromSuperview];
}
- (IBAction)dateAction:(id)sender
{
NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
cell.detailTextLabel.text = [self.dateFormatter stringFromDate:self.pickerView.date];
}
- (IBAction)doneAction:(id)sender
{
CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
CGRect endFrame = self.pickerView.frame;
endFrame.origin.y = screenRect.origin.y + screenRect.size.height;
// start the slide down animation
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.3];
// we need to perform some post operations after the animation is complete
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(slideDownDidStop)];
self.pickerView.frame = endFrame;
[UIView commitAnimations];
// grow the table back again in vertical size to make room for the date picker
CGRect newFrame = self.tableView.frame;
newFrame.size.height += self.pickerView.frame.size.height;
self.tableView.frame = newFrame;
// remove the "Done" button in the nav bar
self.navigationItem.rightBarButtonItem = nil;
// deselect the current table row
NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}
You can download a full working sample app from Apple demonstrating just this.
http://developer.apple.com/library/ios/#samplecode/DateCell/Introduction/Intro.html