I have a UITableViewController T that contains a UISearchDisplayController and UISearchBar in the standard way (everything defined in a nib). T is then contained as a child view controller in the standard way by some other view controller.
The search bar displays correctly:
But when I tap into the search bar do actually search, the search bar gets taller, and the content inside the search bar drops down by what looks like about 20 pixels (er, the height of the status bar? coincidence?) Like so:
What's up with that? It's too tall. Also, the animation that makes it look like that is ungainly. Any way to prevent that unsightly growth?
I managed to solve a very similar problem to the one you're experiencing by programmatically setting the UISearchController up like so:
Note ~ The error persists if hidesNavigationBarDuringPresentation is not set to NO.
#pragma mark - View Life Cycle
- (void)viewDidLoad {
[super viewDidLoad];
self.results = [[NSArray alloc] init];
// 1 \\ Results Table View
UITableView *searchResultsTableView = [[UITableView alloc] initWithFrame:self.tableView.frame];
[searchResultsTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:Identifier];
searchResultsTableView.delegate = self;
searchResultsTableView.dataSource = self;
// 2 \\ init search results table view & setting its table view
self.searchResultsTableViewController = [[UITableViewController alloc] init];
self.searchResultsTableViewController.tableView = searchResultsTableView;
self.searchResultsTableViewController.view.backgroundColor = [UIColor blackColor];
// 3 \\ init a search controller with it's tableview controller for results
self.searchController = [[UISearchController alloc] initWithSearchResultsController:self.searchResultsTableViewController];
self.searchController.hidesNavigationBarDuringPresentation = NO; // √
self.searchController.searchResultsUpdater = self;
self.searchController.delegate = self;
self.searchController.searchBar.barTintColor = [UIColor blackColor];
// 4 \\ Make an appropriate search bar (size, color, attributes) and add it as the header
[self.searchController.searchBar sizeToFit];
self.tableView.tableHeaderView = self.searchController.searchBar;
self.tableView.tableHeaderView.backgroundColor = [UIColor blackColor];
// 5 \\ Enable presentation context
self.definesPresentationContext = YES;
self.tableView.backgroundColor = [UIColor clearColor];
self.currentUser = [PFUser currentUser];
}
Added Further Details:
Interface Builder: UIViewController (not UITableViewController)
Add a UITableView with Constraints:
a.
b. *My Nav Bar is custom height - your "Top Space to: Top Layout Guide" may be changed
Add the Delegate & Data Source outlets from the added Table View to the UIViewController
a. Don't forget to do so programmatically:
#interface AddUsersViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
#property (weak, nonatomic) IBOutlet UITableView *tableView;
In your Interface Extension:
a. Set your UISearchConroller's Delegate and Data Source:
#import "AddUsersViewController.h"
#define ResultsTableView self.searchResultsTableViewController.tableView
#define Identifier #"Cell"
#interface AddUsersViewController () <UISearchControllerDelegate, UISearchResultsUpdating>
#property (nonatomic) UISearchController *searchController;
#property (nonatomic) UITableViewController *searchResultsTableViewController;
#property (nonatomic, weak) UIBarButtonItem *leftBarButton;
#property (nonatomic) NSArray *results;
#end
Although this worked for me, I have discovered that there are other possible scenarios that could be causing this. My "issue" wasn't that the search bar moved down 20px (or so) but that it moved up. I attributed this to a customized UINavigationBar header that included an image title and custom NavBarButtons. With that in mind, here are two more possible solutions:
.
Original Scenarios:
Your Container View's extendedLayoutIncludesOpaqueBars Property
a. Storyboard: Check √ "Under Opaque Bars" for the table views in storyboard.
b. Programmatically: yourTableView(s).extendedLayoutIncludesOpaqueBars = YES;
.
Set scopeButtonTitles to an empty array. (below)
self.searchController = UISearchController(searchResultsController: nil);
self.searchController.searchResultsUpdater = self;
self.searchController.searchBar.scopeButtonTitles = [];
self.tableView.tableHeaderView = self.searchController.searchBar;
The later two answers come from THIS question and may prove to be beneficial in checking out too.
Thanks to BananaNeil's research and testing, he discovered that if you follow the my recommendations and set your searchController.searchBar.y = 0 your search bar should be exactly where you were hoping it would be. √
Not sure if this is iOS 9 specific, but setting
searchController.hidesNavigationBarDuringPresentation = NO;
solves the issue of the weird downward movement of the UISearchBar all over the containing UITableView. Of course, this does disable the nav bar - so this might not be what you want.
I have actually figured out my issue:
I had my UISearchBar inside of a wrapper view, which I was re-positioning as the UITableView scrolled.
The wrapper was 20px taller than the searchbar, and I set searchbar.y = 20 (for stylistic reasons). Each time I clicked on the search bar, it inexplicably grew by 20px.
At some point, I set the searchBar.y = 10, and noticed that it only grew by 10px.
And sure enough, it turns out that the growth height of the searchBar is exactly equal to it's y-position within it's immediate superview. So, when I set the searchbar.y = 0, the searchbar stopped growing.
Instead of using a UITableViewController, select a normal UIViewController and add a UITableView to its view. Add constraints to pin it to Top Layout Guide.Bottom, Superview.Leading, Superview.Trailing, Bottom Layout Guide.Top. Then add the Search Bar to the UITableView.
For some reason the Search Bar doesn't jump when implemented this way.
One possible reason could be that while editing the Search Controller adjusts the position of the Search Bar by offsetting the height of the Top Layout Guide. Pinning the Table View top explicitly to Top Layout Guide.Bottom helps somehow.
Hope this helps!
Please try using:
yourSearchBar.clipsToBounds = true
Swift 5.x solution:
Setting edgesForExtendedLayout to none or empty will fix this issue.
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.edgesForExtendedLayout = []
}
In the lower versions of swift the usage will be similar to below:
self.edgesForExtendedLayout = .None
self.edgesForExtendedLayout = UIRectEdgeNone
Related
How can I show a UISearchBar in the NavigationBar?
I can't figure out how to do this.
Your help is very much appreciated.
To put searchBar into the center of navigationBar:
self.navigationItem.titleView = self.searchBarTop;
To put searchBar to the left/right side of navigationBar:
UIBarButtonItem *searchBarItem = [[UIBarButtonItem alloc] initWithCustomView:searchBar];
self.navigationItem.rightBarButtonItem = searchBarItem;
As of iOS 7, the UISearchDisplayController supports this by default. Set the UISearchDisplayController's displaysSearchBarInNavigationBar = YES to get this working easily.
Per the documentation:
Starting in iOS 7.0, you can use a search display controller with a navigation bar (an instance of the UINavigationBar class) by configuring the search display controller’s displaysSearchBarInNavigationBar and navigationItem properties.
As one commenter noted, using searchDisplayController.displaysSearchBarInNavigationBar = true ends up hiding any existing left/right bar button items.
I've found two different ways of adding a searchBar to a navigationBar using iOS7's new property on searchDisplayController.
1) Nib Based Approach
If you're using a .xib, you can set a User Defined Runtime Attribute for this value and for whatever reason, the leftBarButtonItem stays in tact. I have not tested it with a rightBarButtonItem.
2) Code (Timing Matters)
If you want to implement in code, timing seems to matter. It seems that you must add the searchBar to the navigationBar first, then set your barButtonItem.
- (void)viewDidLoad
{
...
self.searchDisplayController.displaysSearchBarInNavigationBar = true;
self.navigationItem.leftBarButtonItem = [UIBarButtonItem new];
...
}
Check out Apple's UICatalog sample code. It shows how to use the new UISearchController in three different ways: modally, in nav bar, and below the navigation bar.
Objective C code snippet for UISearchBar in NavigationBar
- (void)viewDidLoad {
UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
if (#available(iOS 11.0, *)) {
self.navigationItem.searchController = searchController;
} else {
self.navigationItem.titleView = searchController.searchBar;
}
}
Read more here
I make use of ICViewPager to create tabs of contents. However, the layout looks weird as there are strange spaces at the top & bottom of ICViewPager's content view.
As you can see below, I have a UINavigationBar at the top of the screen, which is generated by the embedding UINavigationController. Then, the UINavigationController is made to be one of the tabs in a UITabbar Controller. Here is the structure:
UITabbarController --> UINavigationController --> TabVC (which contains ICViewPager) --> Content views: Content1VC, Content2VC, Content3VC
Here are the codes in TabVC (which configs to have <ViewPagerDataSource, ViewPagerDelegate>):
// in viewDidLoad
self.dataSource = self;
self.delegate = self;
self.edgesForExtendedLayout = UIRectEdgeNone;
and for the delegate methods:
#pragma mark - ViewPagerDataSource
- (NSUInteger)numberOfTabsForViewPager:(ViewPagerController *)viewPager {
return tabsContents.count;
}
- (UIView *)viewPager:(ViewPagerController *)viewPager viewForTabAtIndex:(NSUInteger)index {
UILabel *label = [UILabel new];
label.text = [tabsContents objectAtIndex:index];
label.textColor = [UIColor colorWithRed:136/255.0 green:136/255.0 blue:136/255.0 alpha:1.0f];
[label sizeToFit];
return label;
}
- (UIViewController *)viewPager:(ViewPagerController *)viewPager contentViewControllerForTabAtIndex:(NSUInteger)index {
UIViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:[tabsVC objectAtIndex:index]];
return vc;
}
The functions look okay, but the layout does not span through the whole spaces as it expects to do so. The red spaces (I made the TabVC view's background color to red to illustrate the issue) are not expected to appear. How do I make the ICViewPager occupy the red spaces?
Note: This appears only after the view is popped back from a pushed view controller, or changing tabs in UITabbarController
I think it is a conflict between automaticallyAdjustsScrollViewInsets and edgesForExtendedLayout.
From this answer :
edgesForExtendedLayout
Basically, with this property you set which sides of your view can be extended to cover the whole screen. Imagine that you push a UIViewController into a UINavigationController, when the view of that view controller is laid out, it will start where the navigation bar ends, but this property will set which sides of the view (top, left, bottom, right) can be extended to fill the whole screen.
and
automaticallyAdjustsScrollViewInsets
This property is used when your view is a UIScrollView or similar, like a UITableView. You want your table to start where the navigation bar ends, because you wont see the whole content if not, but at the same time you want your table to cover the whole screen when scrolling. In that case, setting edgesForExtendedLayout to None won't work because your table will start scrolling where the navigation bar ends and it wont go behind it.
So, automaticallyAdjustsScrollViewInsets defaults to YES and thus inserts a positive inset at the top equal to the height of the nav bar. now when you apply self.edgesForExtendedLayout = UIRectEdgeNone, that inset creeps out from under the nav bar causing said issue.
I have UITabbarController with UINavigationController in it. I have a subclass of UIView that I assign as the view of UIViewController in the navController. This is pretty standard stuff, right? This is how I do it
_productCategoryView = [[ProductCategoryView alloc] initWithFrame:self.view.frame];
self.view = _productCategoryView;
This view has a UITableView as subView
_productCategoryTableView = [[UITableView alloc] initWithFrame:self.frame style:UITableViewStylePlain];
_productCategoryTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_productCategoryTableView.backgroundColor = [UIColor clearColor];
[self addSubview:_productCategoryTableView];
For the sake of debugging I am setting self.backgroundColor = [UIColor blueColor] on the view.
From the above initialization of tableView one might think that the view's and table's frame is same. However when I run in iOS 7, the view's origin is set behind the UINavigationBar. This is understandable because I am setting self.navigationBar.translucent = YES; in my subclass of UINavigationController. But what I don't understand is how come the table is sitting just below the navBar? Shouldn't it also start from (0, 0) which is behind the navBar? See screenshot Scenario 1 below. Notice the blue hue behind navBar
Now, I push another viewController on the navigation stack, simply by using [self.navigationController pushViewController.....]. Again I have a custom UIView with a tableView in it. However I also have a UILabel above this table, and again for debugging, I gave it a redColor. This time I am setting the label's origin to be almost same as the view's
CGRect boundsInset = UIEdgeInsetsInsetRect(self.bounds, UIEdgeInsetsMake(10, 10, 10, 10));
CGSize textSize = [_titleLabel.text sizeWithFont:_titleLabel.font
constrainedToSize:CGSizeMake(boundsInset.size.width, MAXFLOAT)
lineBreakMode:NSLineBreakByWordWrapping];
printSize(textSize);
_titleLabel.frame = CGRectMake(boundsInset.origin.x,
boundsInset.origin.y,
boundsInset.size.width,
textSize.height);
So, going by the logic above, the label should be visible, right? But this time it's not. This time the label is behind the navBar.
Notice, the red hue behind navBar.
I would really like to align the subView below the navBar consistently. My questions are
1. How is the tableView offset by 64pixels (height of nav + status bar in iOS 7) automatically, even though it's frame is same as the view's?
2. Why does that not happen in the second view?
By default, UITableViewController's views are automatically inset in iOS7 so that they don't start below the navigation bar/status bar. This is controller by the "Adjust scroll view insets" setting on the Attributes Inspector tab of the UITableViewController in Interface Builder, or by the setAutomaticallyAdjustsScrollViewInsets: method of UIViewController.
For a UIViewController's contents, if you don't want its view's contents to extend under the top/bottom bars, you can use the Extend Edges Under Top Bars/Under Bottom Bars settings in Interface Builder. This is accessible via the edgesForExtendedLayout property.
Objective-C:
- (void)viewDidLoad {
[super viewDidLoad];
self.edgesForExtendedLayout = UIRectEdgeNone;
}
Swift 2:
self.edgesForExtendedLayout = UIRectEdge.None
Swift 3+:
self.edgesForExtendedLayout = []
#Gank's answer is correct, but the best place to do this is on the UINavigationControllerDelegate (if you have one):
func navigationController(navigationController: UINavigationController, willShowViewController viewController: UIViewController, animated: Bool) {
viewController.edgesForExtendedLayout = UIRectEdge.None
}
How can I show a UISearchBar in the NavigationBar?
I can't figure out how to do this.
Your help is very much appreciated.
To put searchBar into the center of navigationBar:
self.navigationItem.titleView = self.searchBarTop;
To put searchBar to the left/right side of navigationBar:
UIBarButtonItem *searchBarItem = [[UIBarButtonItem alloc] initWithCustomView:searchBar];
self.navigationItem.rightBarButtonItem = searchBarItem;
As of iOS 7, the UISearchDisplayController supports this by default. Set the UISearchDisplayController's displaysSearchBarInNavigationBar = YES to get this working easily.
Per the documentation:
Starting in iOS 7.0, you can use a search display controller with a navigation bar (an instance of the UINavigationBar class) by configuring the search display controller’s displaysSearchBarInNavigationBar and navigationItem properties.
As one commenter noted, using searchDisplayController.displaysSearchBarInNavigationBar = true ends up hiding any existing left/right bar button items.
I've found two different ways of adding a searchBar to a navigationBar using iOS7's new property on searchDisplayController.
1) Nib Based Approach
If you're using a .xib, you can set a User Defined Runtime Attribute for this value and for whatever reason, the leftBarButtonItem stays in tact. I have not tested it with a rightBarButtonItem.
2) Code (Timing Matters)
If you want to implement in code, timing seems to matter. It seems that you must add the searchBar to the navigationBar first, then set your barButtonItem.
- (void)viewDidLoad
{
...
self.searchDisplayController.displaysSearchBarInNavigationBar = true;
self.navigationItem.leftBarButtonItem = [UIBarButtonItem new];
...
}
Check out Apple's UICatalog sample code. It shows how to use the new UISearchController in three different ways: modally, in nav bar, and below the navigation bar.
Objective C code snippet for UISearchBar in NavigationBar
- (void)viewDidLoad {
UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
if (#available(iOS 11.0, *)) {
self.navigationItem.searchController = searchController;
} else {
self.navigationItem.titleView = searchController.searchBar;
}
}
Read more here
I have placed a UISearchBar in my UITableView.tableHeaderView. However it covers the searchBar by placing the viewable top to the first section header. I can only see the searchBar when I drag the tableView down. It is half covered and then can not be selected because releasing the tableView scrolling will rubber band it back out of view. Please help.
The following is placed in my UITableViewController viewDidLoad method:
UISearchBar *theSearchBar = [[UISearchBar alloc] init];
theSearchBar.delegate = self;
self.searchBar = theSearchBar;
[theSearchBar release];
self.tableView.tableHeaderView = self.searchBar;
The result is the following screenshots: http://imagebin.ca/view/6qNiwHR.html
It turns out that it was a sizing issue. I found a tutorial that places the following code in the set up:
[theSearchBar sizeToFit];
which make everything look perfect.
Since UISearchDisplayController uses an already established UISearchBar it doesn't eliminate the problem.
I think the tableHeaderView is not the best place to put your search bar.
I usually use a UISearchDisplayController:
searchController = [[UISearchDisplayController alloc]
initWithSearchBar:theSearchBar contentsController:self];
searchController.delegate = self;
searchController.searchResultsDataSource = self;
searchController.searchResultsDelegate = self;
It's pretty straight-forward and give some functions for searching (you have to implement them in the delegate/datasource, in this case your controller).
I usually do it from a nib but i think you just have to assign it to your viewcontroller :
self.searchDisplayController=searchController;
And if it doesn't show the view, you should add the view to the tableView directly.
You can look at the reference, or ask if you have some problems.