I have a UISearchBar and a UITableView positioned inside the view of a UIViewController. The table itself and the search function are working fine, but there is a problem with how the search results are layered over the top of the search bar. I'm sure there is something I have misconfigured, but being new to iOS development, I cannot figure out exactly what it is.
This is how the UISearchBar and UITableView are currently positioned within the view:
However, when your tap the search bar, the transparent overlay which appears covers it up. I would expect it to only appear below the search bar or perhaps for the search bar to move up?
If you begin to type, the search results appear, but the search bar itself has now been completed covered up:
I have tried the following:
Moving the UISearchBar to the header of the UITableView. The result of this is that, when searching, the search bar is moved to the very top of the view but when the search has finished, it then is positioned way off the the left so only the very right edge of the search bar is visible!
Disabling the Under Top Bars and Under Bottom Bars options under the Extended Edges options for the view controller (options in Xcode Interface Builder). This results in the same problem, except the Tab Bar and Nav Bar are a different colour (see image below, with keyboard hidden):
This view has been built using a Storyboard. Here is the heirarchy for reference (the Scroll View is hidden in all the screenshots as it only appears on the right once a search result has been tapped):
Related
I have a screen with a UITableView. I would like to add to it a search bar (that searches on the internet) and shows the found results in a sub screen. When an item on the sub screen is clicked, I'd like to add it to my table. Is there such a search bar in iOS? I added a paint in order to make things clearer.
UITableViewControllers have a restriction: its main view must be a UITableView that takes up the entire screen space (except for a possible navigation bar at the top, and a toolbar or tab bar at the bottom).
If you want to have other views such as a UISearchBar you must use a UIViewController and add a UITableView and a UISearchBar
One of the common behaviours of Apple's AppleTV apps (like Movies and Television Shows) is that they start with a UITabBar visible, and all of the view's content is rendered in the space below the tab bar. Once focus moves from the tab bar to some content on the screen, the tab bar slides off the top of the screen, and the content moves/scrolls up to fill in the space that's now available. This process reverses itself if the tab bar reappears.
Is there an easy way to accomplish this behaviour (like a check box or something?), or must I implement the didUpdateFocusInContext:withAnimationCoordinator: method in various places, and manually tweak the frames or scroll the content or something?
Select the Tab Bar object in the Tab Bar Controller scene in Storyboard mode and uncheck "Translucent". The items in the views should now move upwards when the tab bar moves upwards.
The UITabBar class also has a translucent property
So currently my app looks like this:
I don't like the blank space at the top of the table view controller, or how the search bar disappears when you scroll down the list. I was wondering if it was possible to move the search bar onto that space at the top for the table view controller, so that it doesn't look empty and the search bar is always at the top of the screen.
I am trying to add a UIImageView to the back of a navigation bar.
The reason is because I want to create a UITableView whose navigation bar is actually a picture (with back button on the left) but I want the picture to scroll with the tableview and when the picture is fully scrolled out. The navigation bar is shown as per normal.
My solution to this problem:
Add a UIImageView to the top of the UITableView and make the navigation bar transparent. Set a contentOffset for the UITableView which is a subclass of UIScrollView so that when the view is presented, it looks like the picture is filling the navigation status bar.
Problem:
If I scroll up, instead of bouncing back, the transparent status bar is shown (with a color of the background as it is transparent).
Possible way to solve this new problem:
I was thinking of trying to limit the ScrollView size to get around with problem but failed.
So I feel is it possible to add the UIImageView to the "back" of the navigation bar so that it is there without any offset? Since that way, my life will be much easier.
Any suggestions on solving this or another new approach to get the same UI/effect?
Related question.
I would do this by adding either a table header or cell at the top of the table which contains your image.
Create the table view so that it extends all the way to the top of the screen. Extend Under Top Bars option. I have not done this with a UITableViewController but I have done this with a UITableView embedded inside a UIViewController's view with the top constraint set to 0 for the view rather than the top layout guide.
Now when you run this your table will fill the whole screen and the top header or cell will be at the top showing your picture.
When you scroll you can either use the UIScrollViewDelegate to detect the movement or implement tableView:didEndDisplayingCell:forRowAtIndexPath:
I'm not 100% sure when you want the navigation bar to go non clear. If its when the image goes off screen then didEndDisplayingCell should be good. If its when the cell bottom passed under the bottom of the navigation bar then scroll view might be your only option.
This will also bounce as you expect when you pull down and it should snap back to the top.
Hope this helps.
I have a rather simple screen where I am inserting a custom UINavigationBar at the top of the screen and a content area below it. I'm using AutoLayout and I'm visually declaring the relationship as so:
#"V:|-0-[_navBar(65)]-0-[_content]-0-|";
Now, this seems to work perfectly until I tried to have another view slide down from under the navigation bar. The nav bar contains a search field and I want the search results to slide down from under nav bar. As the code currently stands, the search results slide down on top of or in front of the nav bar and it looks quite strange. So I tried to push the nav bar to the top of the index stack using:
[self.view bringSubviewToFront:_navBar];
As far as the animation is concerned, it works perfectly. The search results no longer slide over the nav bar but they are in front of the content area. When the child of _content is a UIView it seems to be OK. However, when the child of _content is a UIScrollView, this seems to have introduced a 20px margin between the nav bar and the content area. Honestly, the space seems to be very close in size to the status bar although the nav bar has stayed the same height. I've tried bringing the nav bar to the front using many different techiniques but as soon as the nav bar and the content area are on different planes, it seems to break the autolayout constraint of 0px that is defined above.
Here is a sample project to show the bug. Look at the third item, "bringSubViewToFront bug".
Does anyone know what's going on?
The 20 point space seems like it would have something to do with the status bar, but I'm not sure why bringing the navigation bar to the front would apparently cause the scroll view to inset its content. Anyway, I was able to fix it by adding this line, after you bring the navigation bar to the front,
_scrollView.contentInset = UIEdgeInsetsMake(-20, 0, 0, 0);