Resize UITableView when I slide up a UIView, just like how it happens when the keyboard is shown - objective-c

I am sliding up a UIView which has a UIDatePicker as a subview. This is added above my UITableView, but unfortunately some of the tableView rows are still under my UIView.
UITableView is pushed up with keyboard:
UITableView is NOT pushed up with my view, covers up last few fields:
Is it possible to resize the UITableView dynamically when I slide up my view, just like when the keyboard is shown when in a tableView and all the rows are still able to be seen?
EDIT:
Just found a great Apple example: http://developer.apple.com/library/ios/#samplecode/DateCell/Introduction/Intro.html

Yes, it is possible. You could just go ahead and change the size of the UITableView dynamically as part of the animation that slides up the view. If you want to do what the UITableView actually does in response to the keyboard, leave its size alone and instead change its content inset and scroll indicator insets. See my answer here and the examples linked to:
uitableview not resizing with keyboard

Ok, it was easier than I thought. In my case, when I touch a row, I want the picker to show and the tableView to change its height, so I use:
[UIView animateWithDuration:0.4 delay:0.0 options: UIViewAnimationCurveEaseOut animations:^{
self.pickerView.frame = CGRectMake(0, self.view.bounds.size.height-200, self.view.bounds.size.width, self.pickerView.frame.size.height);
// 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;
} completion:nil];
Then when I click the done button, and want to return the tableView back to the full height and hide my datePicker, I use:
- (void)doneWithPicker:(BOOL)remove {
CGRect newFrame = self.tableView.frame;
newFrame.size.height += self.pickerView.frame.size.height;
self.tableView.frame = newFrame;
[UIView animateWithDuration:0.4 delay:0.0 options: UIViewAnimationCurveEaseOut animations:^{
self.pickerView.frame = CGRectMake(0, self.view.bounds.size.height+300, self.view.bounds.size.width, self.pickerView.frame.size.height);
} completion:^(BOOL finished){
if (remove) {
[self.pickerView removeFromSuperview];
self.pickerView = nil;
}
}];
}
Also, when adding the pickerView as a subview, make sure to add it to the window:
[self.view.window addSubview:self.pickerView];

Related

UIScrollView not receiving scroll action

In the app I am working on, my goal right now is to scroll content when the keyboard shows and to allow users to scroll while it is showing. I have tried a few different solutions and none have been able to achieve this yet.
I'm using storyboards in the app and here is the element hierarchy within the view controller:
View Controller
UIScrollView
UIView
Buttons/textfields/labels/UIPickerView
I first set the UIScrollView's content size to be the same size of the view that was inside of it holding all of the form elements. When that didn't work, I tried over-exagerating the height of the content manually setting the content size to be 320 x 2000. Again, that didn't work. I have user interaction enabled set to YES on the scroll view as well. This is the code I have in there at this point.
CGSize contentSize = CGSizeMake(320, 2000);
[self.scrollView setContentSize:contentSize];
Within the scroll view I had a button that sits behind the whole form that has an action to close the keyboard if a user touches outside of it. I disabled that to see if it may have been a conflict in events that would keep it from scrolling. Again, didn't work.
-(IBAction)closeKeyboard:(id)sender
{
if(![self isFirstResponder]){
[self.view endEditing:YES];
}
}
I even set up some observers to see if the keyboard is about to appear or disappear. The observers would adjust the height of the scroll view, not the content size, just the scroll view itself, based on where the keyboard was currently sitting. So at this point, the content in the scroll view would be much taller than the scroll view itself, but still no scrolling is happening.
Here is the code for my observers:
// adjust view based on keyboard
- (void)keyboardWillHide:(NSNotification *)n
{
NSDictionary* userInfo = [n userInfo];
// get the size of the keyboard
CGSize keyboardSize = [[userInfo objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
// resize the scrollview
CGRect viewFrame = self.view.frame;
// I'm also subtracting a constant kTabBarHeight because my UIScrollView was offset by the UITabBar so really only the portion of the keyboard that is leftover pass the UITabBar is obscuring my UIScrollView.
//viewFrame.size.height += keyboardSize.height;
CGRect scrollRect = CGRectMake(viewFrame.origin.x, viewFrame.origin.y, viewFrame.size.width, viewFrame.size.height + keyboardSize.height + 100);
[UIScrollView beginAnimations:nil context:NULL];
[UIScrollView setAnimationBeginsFromCurrentState:YES];
[UIScrollView setAnimationDuration:0.3];
[self.scrollView setFrame:scrollRect];
self.scrollView.userInteractionEnabled = YES;
[UIScrollView commitAnimations];
keyboardShowing = false;
}
- (void)keyboardWillShow:(NSNotification *)n
{
// This is an ivar I'm using to ensure that we do not do the frame size adjustment on the UIScrollView if the keyboard is already shown. This can happen if the user, after fixing editing a UITextField, scrolls the resized UIScrollView to another UITextField and attempts to edit the next UITextField. If we were to resize the UIScrollView again, it would be disastrous. NOTE: The keyboard notification will fire even when the keyboard is already shown.
if (keyboardShowing) {
return;
}
NSDictionary* userInfo = [n userInfo];
// get the size of the keyboard
CGSize keyboardSize = [[userInfo objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
// resize the noteView
CGRect viewFrame = self.view.frame;
// I'm also subtracting a constant kTabBarHeight because my UIScrollView was offset by the UITabBar so really only the portion of the keyboard that is leftover pass the UITabBar is obscuring my UIScrollView.
CGRect scrollRect = CGRectMake(viewFrame.origin.x, viewFrame.origin.y, viewFrame.size.width, viewFrame.size.height - keyboardSize.height - 100);
//scrollView.frame.size.height -= keyboardSize.height;
//viewFrame.size.height -= keyboardSize.height;
[UIScrollView beginAnimations:nil context:NULL];
[UIScrollView setAnimationBeginsFromCurrentState:YES];
[UIScrollView setAnimationDuration:0.3];
[self.scrollView setFrame:scrollRect];
self.scrollView.userInteractionEnabled = YES;
[UIScrollView commitAnimations];
keyboardShowing = YES;
}
I would not be surprised if this is one of those simple mistakes that keeps slipping my mind, but this sort of accessibility feature would be really nice to have in the app. Any help would be much appreciated, or even other possible solutions to the problem I am trying to solve would be great too.
It looks like you're using a gesture recognizer in IB to detect a tap outside event. Because this recognizer is in the highest view in the hierarchy, it overrides the scrollview's detectors. You might need to change it slightly depending on which areas you want to be able to tap on to close the keyboard.
This is the UIResponder class reference. It lists all of the UIResponder events that your view controller automatically inherits. What might fix your problem is subclassing your UIScrollView and adding the keyboard closing code to it. Also, make sure that you set it to the first responder.
Final code that worked:
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
mouseSwiped = NO;
UITouch *touch = [touches anyObject];
if ([touch tapcount] == 1)
for(UIView *view in self.view.subviews){
if([view isKindOfClass:[UITextField class]]){
[view resignFirstResponder];
}
}
}
}

How can I program a custom partial or sub view for a calculator?

I'm building a basic calculator app. The calculator is already fully functional with basic features. The problem I'm having is I ran out of room on the screen to add other, more advanced features. Ideally what I would like to do is create some kind of subclass and view that slides up to to the bottom of the label (where the completed calculations are displayed), when a button on the bottom of the screen is pressed. In other words, I want a view with more operators and computation options to slide up to the bottom of the label and I dont want this view to cover up any digits that are being displayed in the label. Is there anyway to achieve this?
Yes, you can. When your button is pressed, create your new view (with the extra functions), add it as a subview to self.view, and animate a change to it's frame, so that it's frame changes from below the visible view to just below your digits.
Like this:
-(void) buttonPressed {
UIView *myNewView = << create your view >>
myNewView.frame = CGRectMake(0,480, 320,200); // or whatever your width and height are
// 480 means it will be below the visible frame.
[self.view addSubview: myNewView];
float bottom_Y_of_digit_display = 100;// or wherever it is...
[UIView beginAnimations:nil contenxt:nil];
[UIView setAnimationDelay: 0.0];
[UIView setAnimationDuration: 1.0]; // one second.
myNewView.frame = CGRectMake(0,bottom_y_of_digit_display, 320,200);
[UIView commitAnimations];
}
You can use UIAnimations to create an animation out of any changes to UIView properties. You can make your UIView hidden by settings its frame.origin.y to 480 and then change the rect and wrap it in a UIAnimation.
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
CGRect newFrame = newSubView.frame;
newFrame.origin.y -= newSubView.frame.size.height;
newSubView.frame = newFrame;
[UIView commitAnimations];
UPDATE
If you are targeting iOS 4.0 and later then you should use the new UIAnimations interface.
UIViewAnimationOptions options = UIViewAnimationOptionCurveLinear;
[UIView animateWithDuration:0.75 delay:0 options:options
animations:^(){
CGRect newFrame = newSubView.frame;
newFrame.origin.y -= newSubView.frame.size.height;
newSubView.frame = newFrame;
}
completion:^(BOOL finished){
//Do something upon completion
}];

UINavigationBar Fade Position Problems

So, here's an interesting little problem I've had to deal with. I coded a navigationBar to be translucent and the view underneath to be fullScreen. When I load the view, I can tap on a clear button in the view to "activate" an animation that fades in the bar and other ui elements.
When I rotate the device WITH THE UI ELEMENTS VISIBLE it works perfectly.
But if I tap again to "turn off" the elements with a fade out animation, then rotate, it pushes the naivgationbar up into the status bar.
I don't understand why this happens. I don't want to turn off the statusBar, but if I have to, I will. Can anyone help me with the bar's autorotation positioning?
EDIT SOLVED
SOLVED, this code animates the 20 pixels needed to move the bar down.
- (void)showToolbar
{
if (toolbar.hidden == YES)
{
[self.navigationController.view layoutSubviews];
[UIView animateWithDuration:0.25 delay:0.0
options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction
animations:^(void)
{
[[UIApplication sharedApplication]setStatusBarHidden:NO withAnimation:UIStatusBarAnimationFade];
toolbar.hidden = NO;
toolbar.alpha = 1.0f;
self.navigationController.navigationBar.alpha = 1.0f;
CGRect frame = self.navigationController.navigationBar.frame;
frame.origin.y = 20.0;
self.navigationController.navigationBar.frame = frame;
}
completion:NULL
];
}
if ([self.navigationController.navigationBar isHidden]) {
[self.navigationController setNavigationBarHidden:NO animated:NO];
}
}

How to show a UIDatePicker over the tab bar, in an orientation-friendly way?

I want to slide in a UIDatePicker when my user taps on my table view date field, exactly as in the standard contact app, when the user taps on the birthday field. With one additional killer detail:
It's in a tab bar application and I want the UIDatePicker to slide over the tab bar. And still rotates when the user puts her phone in the lanscape orientation.
The way I show the UIDatePicker is to insert in the view, and then animate its position:
[self.view addSubview: self.pickerView];
When I do this, the UIDatePicker is shown, but doesn't cover the tabbar.
I can also add it to the window:
[self.view.window addSubview: self.pickerView];
The UIDatePicker correctly slides over the tab bar, but then, it doesn't follow the orientation.
The only semi-acceptable way I found, is to do without the tab bar altogether, by using
detailViewController.hidesBottomBarWhenPushed = YES;
But it's not what I want: I want the tab bar in the detail view. I only want it to go away while picking the date. I can't put the UIDatePicker in its own controller with hidesBottomBarWhenPushed = YES as this would entirely cover the screen, and I'd rather have the detail view still partially visible.
Any suggestion welcome.
Here is the full code I use to show the UIDatePicker, copied over from some sample code:
- (void) doPickDate
{
NSDate *initialDateForPicker = [(ExpenseData*) self.displayedObject displayDate];
self.pickerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
self.pickerView.datePickerMode = UIDatePickerModeDate;
self.pickerView.date = initialDateForPicker;
// check if our date picker is already on screen
if (self.pickerView.superview == nil)
{
[self.view 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 - 49 /* tab bar height */;
self.tableView.frame = newFrame;
[UIView commitAnimations];
// add the "Done" button to the nav bar
self.navigationItem.rightBarButtonItem = self.doneButton;
}
}
You should set the UIDatePicker object as the inputView of that particular text field. All the animations and presentation stuff will be taken care of.
Hiding the cursor
There is no method to hide the cursor. The only mechanism I could think of was to use the leftView property and set it to a label.
CGRect frame = self.textField.bounds;
UILabel * theLabel = [[[UILabel alloc] initWithFrame:frame] autorelease];
theLabel.userInteractionEnabled = YES;
theLabel.backgroundColor = [UIColor clearColor];
UITapGestureRecognizer * tap = [[[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(tap:)] autorelease];
[theLabel addGestureRecognizer:tap];
self.textField.leftViewMode = UITextFieldViewModeAlways;
self.textField.leftView = theLabel;
self.textField.clipsToBounds = YES;
and handle the tap using,
- (void)tap:(UIGestureRecognizer *)gesture {
[self.textField becomeFirstResponder];
}
Now this doesn't work for the rounded rect button as the cursor blinks on the right corner no matter what the label's frame is. It hides the cursor for other border styles. You can also use the label to your advantage by setting your values as its text.
UILabel * theLabel = textField.leftView;
theLabel.text = #"Appropriate Value from Picker";

UITableView frame height animation glitch

If I attempt to animate the frame height of a tableView (ex: height -= 200), the cells that appear in the last 200px disappear suddenly before the smooth animation of the frame completes.
To make sure that it's nothing else I'm doing, I created a new View-Based application. In the main viewController I create my own tableview with enough pseudo rows to fill the entire screen. And on selection of a row I do a simple height animation.
most relevant code:
- (void)viewDidLoad {
[super viewDidLoad];
self.myTable = [[[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)] autorelease];
myTable.delegate = self;
myTable.dataSource = self;
[self.view addSubview:myTable];
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
CGRect frame = self.myTable.frame;
frame.size.height = 200;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDelay:.5f];
[UIView setAnimationDuration:0.5f];
self.myTable.frame = frame;
[UIView commitAnimations];
}
Does anyone know why this is happening, or what a fix/workaround may be?
Any suggests are really appreciated.
TIA!
I'm not sure I had exactly the same problem, but using [UIView setAnimationBeginsFromCurrentState:YES]; solved (parts of) the glitches (my table view slid around crazily when animating a frame height change).
Same problem here as well. This is what I'm doing and the origin animates smoothly, but the size changes immediately... annoying.
[UIView beginAnimations:#"HideTabbar" context:nil];
[UIView setAnimationDuration:.3];
self.tableView.frame = CGRectMake(0.0, 44.0, 320, 366);
[UIView commitAnimations];
UPDATE: Try adding this before the animation:
self.tableView.autoresizingMask = UIViewAutoresizingNone;
For anyone hitting this question & answer in the future, here's how to use #ryyst's answer in UIView's block based animations introduced in iOS 4.
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
// change frame etc here
} completion:^(BOOL finished) {
// any clean up here
}];
This is an old question and there are already a couple suggestions for a workaround, but I thought I'd add mine.
I ended up animating the contentInset and scrollIndicatorInsets properties, which provides the illusion that the table itself is being resized.
I have exactly the same problem. I imagine that tableviews have a special behavior on "setFrame:", it seems that the tableview remove the cells that won't be visible with the new frame.
In case of an animation, the cells won't be visible only at the end of the animation, but it seems that tableviews don't care.
If someone have a better theory, I'd be glad to hear it !
Finally found the solution! there is indeed a bug!! don't use variables, when animating the height use [[UIScreen mainScreen] bounds]. Like this:
[UIView animateWithDuration:0.5 animations:^{
tableView.frame=CGRectMake(0, 38, fullScreenRect.size.width, [[UIScreen mainScreen] bounds].size.height-38);
}];
not :
[UIView animateWithDuration:0.5 animations:^{
tableView.frame=CGRectMake(0, 38, fullScreenRect.size.width, fullScreenRect.size.width-38);
}];
and it will work like magic!
I found your question while seeking the proper method to resize a tableView. I think your problem is in your animation you've specified UIView instead of UITableView. I was unable to duplicate your problem using either UIView or UITableView, but I'm using SDK 3.1 and it might be a bug that has been fixed since your post. I'm not sure, but I hope this helps!
It's an old question but this might help someone in the future;
I solved a similar problem by embedding the tableview in a UIView, and resizing the UIView instead of tableview. I set the tableview's height to a large value and also "clip subviews" property on the UIView. I resize the UIView proportional to tableview's contentSize. Its not a good solution but it worked for my purposes.