Basically, I am including two buttons located below the navigation bar. And below these two buttons, there is a UITableView, with the UISearchBar as its header view. However, when I click the search bar, the animation moves very strange.
Then I try to use animation to move the UITableView together with the search bar to the top,
the animation goes like this
The code added to the table view is like this:
- (BOOL) searchBarShouldBeginEditing:(UISearchBar *)searchBar {
CGRect tableViewFrame = self.myTableView.frame;
tableViewFrame.origin.y = 0;
[UIView animateWithDuration:0.1
animations:^{
self.myTableView.frame = tableViewFrame;
}
completion:nil];
return YES;
}
I am wondering how to move the UISearchBar to the top of the screen, together with the whole table view with smooth animations.
- (BOOL) searchBarShouldBeginEditing:(UISearchBar *)searchBar {
[UIView animateWithDuration:0.1
animations:^{
[ searchBar setFrame:CGRectMake(searchBar.frame.origin.x, 0, searchBar.frame.size.width, searchBar.frame.size.height)];
[self.myTableView setFrame:CGRectMake(myTableView.frame.origin.x, searchBar.frame.size.height, self.myTableView.frame.size.width, myTableView.frame.size.height)];
}
completion:nil];
return YES;
}
try this code
Related
I'm creating a custom selected-animation for my UITableView.
What I've got is a standard UIViewController that displays a UITableView, which upon didSelectRow:AtIndexPath: instantiates another VC from storyboard, prepares it and displays it modally using UIModalPresentationOverCurrentContext.
Then the second VC updates a constraint from the top layout guide to a UIImageView, hence placing it exactly where the cell was located on screen. This coordinate is passed from the first VC.
Next, this UIImageView slides up, creating the illusion that the cell slides up. However, this produces a flicker for a split second just before sliding the image quite often (not always, like 3/4 times).
What's a better way to position the UIImageView initially, before it's animated?
Here's my code doing this:
-(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:YES];
self.imageViewTopConstraint.constant = self.cellFrame.origin.y;
[self.view layoutIfNeeded];
self.imageView.image = self.image;
}
-(void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:YES];
/* animate the opening */
[UIView animateWithDuration:0.45 delay:0 usingSpringWithDamping:1.0f initialSpringVelocity:1.2f options:UIViewAnimationOptionTransitionNone animations:^{
/* slide image */
self.imageViewTopConstraint.constant = 0.0f;
[self.view layoutIfNeeded];
}completion:^(BOOL finished) {
}];
}
I'm searching for idea how to implement a table view with moving view on top of it.
So the idea is something similar to navBar in facebook app. When you scroll up this (red) view is moving up and hiding, when you scroll up its going up and when you scroll down its revealed. This is not nav bar so most of the pods I've found are not working in this situation. This cannot be tableView header or section header as well.
You need added this view above table:
[self.tableView.superview insertSubview:view aboveSubview:self.tableView]
Or you can do it in storyboard.
When you table scroll down hide view, when up show.
[view setHidden:YES];
Also u could change table inset to the top of the superview.
self.tableView.contentInset = self.tableView.scrollIndicatorInsets = UIEdgeInsetsMake(self.tableView.contentInset.top -, self.tableView.contentInset.left, self.tableView.contentInset.bottom, self.tableView.contentInset.right);
I think fast way to do it use gesture recognizers to recognize reveal and hide actions and than you can use methods like below,
[UIView animateWithDuration:0.5 animations:^{
[attachedView setAlpha:0.0f];
} completion:^(BOOL finished) {
[attachedView setHidden:YES];
}];
and for reveal attached view
[UIView animateWithDuration:0.5 animations:^{
[attachedView setAlpha:1.0f];
} completion:^(BOOL finished) {
[attachedView setHidden:YES];
}];
methods will help you to hide and reveal views gently.
Take a look at this library, it does exactly what you want to do
https://github.com/telly/TLYShyNavBar
I have a UITableView which doesn't reach the entire view. Approximatively, the UITableView is two times smaller than the view.
Then, I add "Search Bar and Search Display Controller" to the UITableView from the Object library. So, to visualize, the searchBar appears at the screen's center.
Here's my view :
My problem : When I click into the search field to do my research, the searchBar is going to the top of the view, in place of the navigation bar ! And the transition is very awful... How can I constraint the searchBar to stay in its initial place ?
The problem is related to the search display controller. You don't have the control over the animation and it doesn't seem to handle it well when there's a view sitting on top of your TableView. We had the same exact problem and the easiest way we fixed it is by replacing the Search Display Controller by a simple Search Bar in the Storyboard.
That means your class will now have to implement the delegate method of the search bar to work properly.
To animate properly, simply override the searchBarTextDidBeginEditing and searchBarTextDidEndEditing like so:
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
CGRect tableViewFrame = self.tableView.frame;
tableViewFrame.origin.y = tableViewFrame.origin.y - self.yourHeaderView.bounds.size.height;
[UIView animateWithDuration:0.25
animations:^{ self.tableView.frame = tableViewFrame; }];
}
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar {
CGRect tableViewFrame = self.tableView.frame;
tableViewFrame.origin.y = tableViewFrame.origin.y + self.yourHeaderView.bounds.size.height;
[UIView animateWithDuration:0.25
animations:^{ self.tableView.frame = tableViewFrame; }];
}
Simply put, you just move the table view frame over the view based on it's height. The animation makes it smoother and cleaner.
I have a custom subclass of UITableViewCell. On my storyboard, it basically has a containerView (UIView *), that has some labels on it, and a UISwitch. I add a gesture to slide my tableViewCell to the right to show some detail controls underneath the containerView, and then another gesture to slide the original view back. The animation code looks like this:
- (void)showCustomControls:(UISwipeGestureRecognizer *)gesture {
[UIView animateWithDuration:0.3 animations:^{
[self.containerView setFrame:CGRectMake(self.frame.size.width - kTableViewCellSwipedWidth, 0, self.frame.size.width - kTableViewCellSwipedWidth, kOverviewTableViewCellHeight)];
}completion:^(BOOL finished) {
self.isReveal = YES;
self.selectionStyle = UITableViewCellEditingStyleNone;
}];
}
- (void)hideCustomControls:(UISwipeGestureRecognizer *)gesture {
[UIView animateWithDuration:0.3 animations:^{
[self.containerView setFrame:CGRectMake(-kTableViewCellBounceWidth, 0, self.frame.size.width, kOverviewTableViewCellHeight)];
}completion:^(BOOL finished) {
[UIView animateWithDuration:0.1 animations:^{
[self.containerView setFrame:CGRectMake(-kTableViewCellBounceWidth / 2, 0, self.frame.size.width, kOverviewTableViewCellHeight)];
}completion:^(BOOL finished) {
[self.containerView setFrame:CGRectMake(0, 0, self.frame.size.width, kOverviewTableViewCellHeight)];
}];
self.isReveal = NO;
self.selectionStyle = UITableViewCellSelectionStyleBlue;
}];
}
I noticed if I left the selectionStyle on, with the row open, it looked kind of funny. So I wanted to turn the selectionstyle off. So the code in there is to turn on and off the selection style when the row is open or closed. It works, however the weird thing is, when hideCustomControls gets called, and my original row slides back into place, the labels on the container view all go away. I have a little edge of the original row that shows, and when that is showing, the labels are there. But the second that the row slides all the way in place, all the labels disappear. The UISwitch which is also on the containerView never has problems though. It is always present. Is there a reason why this may be happening? When I remove the selectionStyle code in both methods, this problem goes away. Thanks in advance.
Edit:
I put in the correct code to animate using NSLayoutConstraint. Now the problem is the UIView subclasses I have on the view underneath show through to the top view when my row slides back into place. Not sure why this happens...
I have standard iPad view controller which has a custom navigation bar at the top. In the xib-file I've added a UISearchBar aligned to the right edge of the view. The search bar is 320px in width. I init a searchdisplaycontroller like this:
// Search display controller
self.mySearchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:_searchBar
contentsController:self];
_mySearchDisplayController.delegate = self;
_mySearchDisplayController.searchResultsDataSource = self;
_mySearchDisplayController.searchResultsDelegate = self;
The problem is that when I press the search bar, the bar resizes to be the full width of the entire view, but keeps its x-position. This means that it stretches far outside the screen. I'm guessing it has something to do with the "Cancel" button that slides in next to a search bar. If I place the search bar to the far left in the screen, it animates to the full width of the screen and the cancel button is visible.
Anyone has a solution for this?
You can animate the frame of your UISearchBar in the searchDisplayControllerWillBeginSearch method to correct its position like this:
- (void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller
{
// animate the search bar to the left ie. x=0
[UIView animateWithDuration:0.25f animations:^{
CGRect frame = controller.searchBar.frame;
frame.origin.x = 0;
controller.searchBar.frame = frame;
}];
// remove all toolbar items if you need to
[self.toolbar setItems:nil animated:YES];
}
and the animate it back again when finished searching:
- (void)searchDisplayControllerDidEndSearch:(UISearchDisplayController *)controller
{
// animate search bar back to its previous position and size
// in my case it was x=55, y=1
// and reduce its width by the amount moved, again 55px
[UIView animateWithDuration:0.25f
delay:0.0f
// the UIViewAnimationOptionLayoutSubviews is IMPORTANT,
// otherwise you get no animation
// but some kind of snap-back movement
options:UIViewAnimationOptionLayoutSubviews
animations:^{
CGRect frame = self.toolbar.frame;
frame.origin.y = 1;
frame.origin.x = 55;
frame.size.width -= 55;
controller.searchBar.frame = frame;
}
completion:^(BOOL finished){
// when finished, insert any tool bar items you had
[self.toolbar setItems:[NSArray arrayWithObjects: /* put your bar button items here */] animated:YES];
}];
}
I have answered a similar question, you can check it here, I've put some images too.
The only thing you have to do is to adapt the code for the iPad.