I have a problem with UISearchBar animation.
The animation is buggy when the statusbar is on. Otherwise it is okay.
I created the tableview and the searchbar programatically. The uisearchbar is in the headerview of a tableview. It's important that it stays that way. I know its working okay when you use the storyboard.
I created a very basic sample project as I think this is the easiest way to show you the problem.
I have spent several hours to find the solution but I just can't figure it out. Any help would be greatly appreciated.
Here's a link to the sample project: SearchBarProject!
I found that
self.navigationController.navigationBar.translucent = YES;
made my animation less buggy
I thinks this is IOS 7 bug. There is an uitableview search example application provided by Apple. And it has same problem while finishing editing search bar. With IOS 6 there is no any problem
Just add a sublayer to the UISearchBar and change the view's background color will make the animation almost perfect
- (void) searchDisplayControllerWillEndSearch:(UISearchDisplayController *)controller {
self.view.backgroundColor = RGB(199,199,204);
self.fixSearchAnimation = [[UIView alloc] initWithFrame:CGRectMake(0, -20,320, 40)];
self.fixSearchAnimation.backgroundColor = RGB(199,199,204);
[self.searchController.searchBar addSubview:self.fixSearchAnimation];
[self.searchController.searchBar sendSubviewToBack:self.fixSearchAnimation];
}
- (void) searchDisplayControllerDidEndSearch:(UISearchDisplayController *)controller {
self.view.backgroundColor = [UIColor whiteColor];
[self.fixSearchAnimation removeFromSuperview];
}
in slow mode, you can still see a tiny line between the searchbar origin subviews and the new view, but it's not very noticeable for a user, and if that disturb you, you can dig into the view hierarchical of UISearchbar and put the view in the right position.
Related
I am trying to add a UISearchBar to my UINavigationItem but the scope bar is showing behind the search bar. Any ideas to fix that problem?
iOS: 11.2
xCode: 9.2
my code:
- (void)viewDidLoad
{
[super viewDidLoad];
self.mySearchBar = [[UISearchBar alloc] init];
self.mySearchBar.delegate = self;
self.mySearchBar.scopeButtonTitles = #[#"item 1", #"item 2", #"item 3"];
self.navigationItem.titleView = self.mySearchBar;
}
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar
{
[self.mySearchBar setShowsScopeBar: TRUE];
[self.mySearchBar setShowsCancelButton:TRUE animated:TRUE];
return TRUE;
}
the result:
Context
The problem is that UINavigationBar provides a very specific and familiar iOS style that Apple wants to keep the same across apps. Default navigation bars don't expand to fit their contents.
When you set set the titleView of navigation item, you are expected to lay out the contents in that view based on the size of the navigation bar, not the other way around.
Solutions
There are several possible solutions:
Change the behavior of that instance of UINavigationBar (not recommended).
Place the UISearchBar underneath the navigation bar as a regular subview.
Use UISearchController
The first option should definitely not be your first solution because it requires you to solve many thorny issues. Use as a last resort.
Option 2 requires the following code changes. Replace self.navigationItem.titleView = self.mySearchBar with:
[self.view addSubview:self.mySearchBar];
UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
[self.mySearchBar.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
[self.mySearchBar.rightAnchor constraintEqualToAnchor:guide.rightAnchor].active = YES;
[self.mySearchBar.leftAnchor constraintEqualToAnchor:guide.leftAnchor].active = YES;
And you are also missing code to resize the UISearchBar after showing the scope bar. The view does not resize itself. So, in your searchBarShouldBeginEditing: method, add this line just before return: [self.mySearchBar sizeToFit];
The third solution may be easier for you depending on your use case. That is, use UISearchController, which includes it's own UISearchBar anchored at the top of the screen. It would look just like solution #2 above as shown in the image below:
Here is a great tutorial on using UISearchController if you are interested.
I have two UITableViews in my app (one for regular usage and another for searching). When I use regular one the status bar is opaque but when I enter searchResultsTableView I can see some items from regular UITableView.
As you can see the UISearchBar is opaque so there is nothing behind it but status bar is still transculent.
I've already added [self.tableView setHidden:YES]; in searchDisplayController: willShowSearchResultsTableView: but it's a very primitive solution and does not work when my regular UITableView is displayed at the beginning of search.
My question is how to make status bar opaque? Just to avoid this annoying thing.
I've found two solutions to this issue. Both works for me but the second one is simpler and you don't have to do anything in code. I hope you find it useful!
First solution:
You can create a custom UIView in code and add as a subview. If your application has one color of UINavigationBar or any other component and it won't change through the lifecycle you can always implement this in application:didFinishLaunchingWithOption:. Otherwise, you can always add this code in proper moment but you have to remember to add this subview to proper super view. Here is the code sample:
UIView *addStatusBar = [[UIView alloc] init];
addStatusBar.frame = CGRectMake(0, 0, 320, 20);
addStatusBar.backgroundColor = [UIColor colorWithRed:0.79 green:0.79 blue:0.81 alpha:1];
[self.navigationController.view addSubview:addStatusBar];
Second solution:
There is one tiny checkbox in Xcode called Clip Subviews and it's super useful in that case. You can find the view which is visible under Status Bar (In my case it's UITableView) and clip it to subviews. I don't know how but in my case UISearchBar started affecting status bar so now it's opaque qith a color of UISearchBar.
I have an issue with a search bar that behaves in a strange way when it becomes a firstResponder and when it resigns.
The search bar is added as the header of a table view
self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.view.frame.size.width, 44.0f)];
self.searchBar.translucent = NO;
self.searchBar.barTintColor = [UIColor grayColor];
self.tableView.tableHeaderView = self.searchBar;
self.searchController = [[UISearchDisplayController alloc] initWithSearchBar:self.searchBar
contentsController:self];
self.searchController.searchResultsDataSource = self;
The view controller is set a left panel of JASidePanelController and it hides the center panel when the keyboard shows or hides :
- (void)keyboardWillAppear:(NSNotification *)note
{
[self.sidePanelController setCenterPanelHidden:YES
animated:YES
duration:[[note.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue]];
self.searchBar.showsCancelButton = YES;
}
- (void)keyboardWillDisappear:(NSNotification *)note
{
[self.sidePanelController setCenterPanelHidden:NO
animated:YES
duration:[[note.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue]];
self.searchBar.showsCancelButton = NO;
}
Normal state
When the search bar becomes a firstResponder it either moves about a point up or point down randomly
And When the search bar resigns it animates up to reach the window origin and then back to its natural frame
Here is a sample project reproducing the bug.
EDIT :
As per #kwylez suggestion, the unwanted animation that the search bar makes when it resigns can be avoided by:
self.searchBar.clipsToBounds = YES;
I solved this issue by creating a UIView with ClipBounds sets to YES and then add subview the searchbar inside it.
Then include it in tableview header. its working now.
Thanks
You initialize a search display controller with a search bar and a view controller responsible for managing the data to be searched. When the user starts a search, the search display controller superimposes the search interface over the original view controller’s view and shows the search results in its table view.
customized your searchbar view
Fixed - UISearchBar-bug-master
I traced the issue to the function "_layoutSidePanels" in the JASidePanelController.
In your app delegate, I commented out the following code and it seems to fix the grey view growing and shrinking.
rootViewController.shouldResizeLeftPanel = YES;
If you follow the code through, when the searchbar is selected you call setCenterPanelHidden, which subsequently calls _layoutSidePanels, which runs the following code:
if (self.leftPanel.isViewLoaded) {
CGRect frame = self.leftPanelContainer.bounds;
if (self.shouldResizeLeftPanel) {
frame.size.width = self.leftVisibleWidth;
}
self.leftPanel.view.frame = frame;
}
Changing the frame of the sidepanel seems to be the cause, and as I said commenting that code out fixes the issue on my end.
Edit: Also at first it seemed like the search bar was moving up and down a point, but upon further inspection it appears that it is always slightly underneath the navigation bar, but you don't notice it until you select the searchbar and the rest of the view "greys" out, so that little space that was white between the blue nav bar and light grey search bar becomes dark grey like the rest of the tableview below.
Edit #2: Took me a while, but I managed to figure out where the heck that grey mask was coming from. Your UISearchDisplayController is what is responsible for the greyish background that appears when the search bar becomes first responder, and when I removed the following two lines of code the issue you were seeing went away:
self.searchController = [[UISearchDisplayController alloc] initWithSearchBar:self.searchBar contentsController:self];
self.searchController.searchResultsDataSource = self;
Doing this was just to demonstrate the cause of the issue, but removing those lines of code disable whatever functionality you were going to gain from using the search display controller. I don't know exactly what you're hoping to do, so I can't really give you any advice about how to proceed, but hopefully I've pointed you in the right direction as to the causes!
Don't know why, my search bar in iOS 7 is leaving a right space. It's ok in iOS 6.
I know it has something to do with the section index, because if I remove it the space disappears, but I don't know how to fix it. Any thoughts?
Embed your UISearchBar in a UIView and then add that as the tableHeaderView. Structuring it that way in a storyboard worked for me. I'm guessing iOS resizes the UISearchBar in the tableHeaderView, but leaves a basic UIView alone (and doesn't bother to look inside it).
You might also want to make the section index transparent, which I did with:
[[UITableView appearance] setSectionIndexBackgroundColor:[UIColor clearColor]];
[[UITableView appearance] setSectionIndexTrackingBackgroundColor:[UIColor clearColor]];
Until a better answer appears, I just manually changed the frame of the search bar like this:
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
CGRect barFrame = self.searchBar.frame;
barFrame.size.width = self.view.bounds.size.width;
self.searchBar.frame = barFrame;
}
I had this same issue with the iPhone 6/ 6Plus when using a SearchDisplayController. (Using Swift)
I tried setting the frame of the search bar but with no luck but i noticed that if i tapped on the textField of the UISearchBar and then cancelled it then it would take on the proper size of the view. I therefore managed to fix the issue by calling the code below in ViewDidLoad of the viewController using the search.
self.searchController.setActive(true, animated: false)
self.searchController.setActive(false, animated: false)
self.contactsTableView.sectionIndexBackgroundColor = [UIColor clearColor];
The reason for that white edge is because your index layer has a white background and is on top of the search bar. This should be sufficient.
Add the search bar inside a UIView put as tableView's header view. Set the tableview's sectionIndexBackgroundColor to clear color because it covers the header.
Tested with iOS 7, 7.1;
Because the table view always leaves 15px on the right for section Indexes View, so you should resize the Seach bar after reloading the table view
First:
self.tblData.sectionIndexBackgroundColor = [UIColor clearColor]; //(iOS >= 7 only)
Cheating time:
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
[self performSelector:#selector(resizeSearchBar) withObject:nil afterDelay:0.01];
}
- (void) resizeSearchBar
{
CGRect frame = self.searchBar.frame;
if (frame.size.width < self.tblData.frame.size.width) {
frame.size.width = self.tblData.frame.size.width;
}
self.searchBar.frame = frame;
}
- (void) reloadTableData // call it anytime you want to reload table view
{
[self.tblData reloadData];
[self performSelector:#selector(resizeSearchBar) withObject:nil afterDelay:0.01];
}
Suggest
Dont cheat like me, just do the simpler way:
self.searchBar.searchBarStyle = UISearchBarStyleMinimal; // iOS >= 7 only
I also attached a UISearcBar in my application, and nothing is wrong there even my application supports rotation also.
Could you try removing and re creating UISearchBar in storyboard/xib
I added the search bar as a subview of the top-level view instead of the table view. Used autolayout to pin the searchbar to the top guide, and a vertical space constraint of 0 between the search bar and the table view.
The accepted solution with the method viewDidLayoutSubviews makes the screen flicker.
Instead what I did was create a subclass of UISearchBar that simply does this:
FullWidthSearchBar.h:
#interface FullWidthSearchBar : UISearchBar
#end
FullWidthSearchBar.m:
#import "FullWidthSearchBar.h"
#implementation FullWidthSearchBar
- (void)setFrame:(CGRect)frame {
frame.size.width = self.superview.bounds.size.width;
[super setFrame:frame];
}
#end
And then I assigned that class to the search bar on my xib:
The problem is the right white block, so if we change the block color the same as the search bar background, it looks normal.
just
if (IOS7) {
self.tableview.backgroundColor = [UIColor colorWithPatternImage:self.searchBar.backgroundImage];
}
I have a view which has two containers: Top_Container and Bottom_Container.
Each Container points to a VC with a TableView.
The Bottom_Container points to a TableView with a searchBar on top.
Whenever the searchBar gets activated in the TableView a white space appears below the searchBar between the searchBar and the greyed zone corresponding to the serachBarTableView (which superposes the TableView).
I have been trying with no success to get rid of this white space with no success.
Anybody has an idea how to customize:
- the white space which appears below the searchBar ?
- the greyed zone (searchBar TableView ?) on top of the TableView which appears whenever the searchBar gets active ?
Thank you.
Try with following code:
CGRect rect = self.searchBar.frame;
UIView *lineView = [[UIView alloc]initWithFrame:CGRectMake(0, rect.size.height-2,rect.size.width, 2)];
lineView.backgroundColor = [UIColor clearColor];
[self.searchBar addSubview:lineView];
It is fix.
I had similar problem and in my case it was caused by opaque NavigationBar. When I set NavigationBar to translucent, then the underlaying UITableView is correctly aligned to the active UISearchBar. (note: I'm using UISearchDisplayController in my view controller)
In your case maybe you can move (and animate) the underlaying table view in UISearchDisplayDelegate's methods willBeginSearch and willEndSearch. If you are using UISearchBar only, then you need to subclass it and override becomeFirstResponder and resignFirstResponder methods and implement the "table view moving" code there.
I just fixed this problem in my own code. For me, the issue was caused by 2 lines of code.
self.viewController.edgesForExtendedLayout = UIRectEdgeNone;
self.navigationBar.translucent = NO;
After removing both these lines, everything worked as expected.