A picture is worth thousand words in this case. I have a tableview present modally onclick from other view controller (with one navigation controller in between for the navigation bar, if that is important to you). Somehow there is some strange, (1) gray space at the top right under the navigation bar overlapping on top of the tableview, and (2)gray space near the bottom of the tableview right below the last cell with button, as shown in cap screen. I have completely no idea what that is.
I have another project which I use almost completely same setting for the tableview and these two gray bars do not occur. So I feel quite strange as to how that happen.
Can anyone enlighten me on this? I don't even know how to call these two gray bars here.
If scroll to top, the two problematic areas appear a bit differently, please see can screen below. It feels like something due to a same problem which I don't know what it is.
Related
Here is a part of the AirBnB app I would like built.
Here are the 3 questions that I'm in need of advice on.
How do i get a cell on a UITableView to act like the [ MORE FILTERS ] button? The button seems to act like a UITableView cell that always stay at the top. YET, it fades away just before going out of scope. Is this even a tableViewCell?
The view [ARRIVES | DEPARTS]. What view is this on a UITableView? When the tableView is scrolled all the way to the top it connects seamlessly with the [MORE FILTERS] button making it seem like its one view. But when the tableView starts scrolling, the [MORE FILTERS] button can be seen sliding over it as it fades away.
What is the [SHOW FILTERS] button? Is it a UINavigationItem titleView property or some separate view? As the table scrolls up it can be seen attaching itself to the UINavigationBar in a fade transition. At first i thought it was a just a UINavigationBarItem, but I do not know how to add items under the title of the bar. Any clarification on what this is or how can be accomplished?
I have already looked at Apple's Example on customized UINavigationBar, but it doesnt provide any clues to accomplish this. Any help appreciated
just like you did, when I came across an application like this one which has cool UI effects and animation, I would like to analyse and if possible try to do the same effect by myself, so that I could get innovations as well as knowledges.
Let's analyse it first, at the meantime you will probably find all the answers. I just drew a graph which shows the UI hierarchy of the screen, of course this hierarchy is based on my analysis, I cannot guarantee that the hierarchy is 100% correct.
I will do a bit of explanations here. From top to bottom:
1. The Navigation Bar(Red), just a opaque navigation bar, nothing special;
2. The Show Filters View(Purple) is a view which anchors to the bottom of the Navigation Bar(Red), and it is hided when the screen launches. Please note that this view is not a subview of Arrives & Departs View(Blue). It is added directly to the view controller's root view. Which means Purple and Blue are siblings;
3. The Arrives & Departs View(Blue), nothing special;
4. The More Filters View(Green), nothing special;
5. The Table View(Orange), nothing special;
So from my analysis, Purple, Blue, Green and Orange are all siblings.
Now let's move on to the fancy UI effects and animations. The trick here is you need to observe the change of the table view's contentOffset (I recommend to do it in the scroll view's delegate - scrollViewDidScroll), and move, hide or show the views accordingly. There are four stages:
1. The initial stage, like the graph above.
2. The Blue starts fading out, Green moves up as the finger moves, Orange increases its height. (Purple is still at the same position and hided, I just removed it from the graph in order to make it clearer);
Blue totally faded out, Green starts fading out and Purple starts fading in. Orange is still doing the same - increasing its height;
Green totally faded out, Purple totally faded in and Orange increases its height to fill the screen and then anchors to the bottom of Purple.
The [MORE FILTERS] button does appear to be a cell of the UITableView. Since it is a different type of cell than the other cells containing the UIImageView and the UILabels using a different identifier you can tell the cell to fade away with an animation. Try this link for more information.
The [ARRIVES | DEPARTS] seems to be its own view. I believe that this and the tableview are both part of a UIScrollView. This is the reason that it seamlessly disappears when the [MORE FILTERS] cell scrolls up towards it.
The [SHOW FILTERS] button could just be a part of the navigation bar. When the scrollView finishes scrolling the navigation bar can be extended. However, it is also possible that the button is in a view of its own and is hidden until the scrollview finishes scrolling. Either way should be possible but I would recommend putting it in its own view rather than attaching it to the navigation bar.
EDIT: Small update to my issue, what i did as a solution for now was obviously just having my scrollview white. This fixes my issue, but my real curiosity was to why exactly the content view was doing what i explained below. Also still curious to what common practice formatting is when adding a scroll view to a VC with a navigation bar.
So i am a bit confused with what is going on here. I have a VC with a navigation bar at the top and i need to add a Scroll view to it. So when i did that i stretched it to just below the navigation bar at the top of the screen, then added constraints. (I also made the ScrollView background red so i could differentiate it from the content view)
Secondly i added a UIView which i named Content view and i stretched it to the exact same position as the Scroll view. Then added constraints for that as well. (No objects were added yet)
I then ran the app to check how it looked and i noticed that under the navigation bar my there was a big chunk of red, meaning the Scroll view was full screen in the correct position right below the nav bar, but my content view was not.
A couple things i did to fix this was
I extended the Scroll view all the way to the top of the VC, past the nav bar, but when i ran the app i could see red behind the nav bar, which i figured meant it was not right.
I extended just the content view to the top of the VC, but this did not seem right to me either, even though both seemed to fix the problem.
So my questions are:
When adding views in general to a VC with a nav bar at the top should i be extending those views only to the bottom of the nav bar, or all the way to the top of the VC?
I am new to Scroll views as this is my first time dealing with one, am i missing something in this situation? Or doing something wrong?
Your help is greatly appreciated, thank you.
1) Move the scroll view all the way up and beyond nav bar.
2) Have the scroll view match the height of its parent.
I have several view controllers (each containing tableviews) embedded in a tool bar controller. For some reason in one of them, the toolbar is higher by about double than in all the other view controllers. I can't figure out what could be causing this. This particular VC does have a searchdisplay in it at the top but don't see why that would mess things up at the bottom. In storyboard the tableview goes all the way to the bottom. Has anyone run across this problem before?
Here is a pic of the overly large tool bar.
I'm having a really strange behaviour. When my app starts everything is fine: the size of the views on screen are exactly the one specified in the storyboard. But just as I try to push a view controller its contents are scaled, so when I pop back the view is messed up.
Any clues?
First learn about Autolayout. Here is a good way to go
Autolayout
Second I am giving you a trick which may work.
Click on viewController
If you don't want your views to extend their edges to bottom or to the top deselect Under top bars and Under Bottom bars
I am trying display a UITableView within a larger UIView in an iPad app, mainly because the data is pretty sparse and I'd like to have the table be a smaller area over a background image, rather than taking up the whole screen. The parent UIViewController is correctly set as the table data source and delegate, and the table looks/functions like it should. The whole view is embedded in a navigation controller; the overall UIView shows a navigation bar, as it should, that I can configure normally.
The problem is the UITableView subview also shows blank space at the top for a navigation bar--empty space above the first cell--and I can't figure out how to get rid of it. I know the space is related to the navigation controller, because when I delete the embed link in the storyboard, the space goes away. The table view doesn't present a UINavigationBar property or any other navigation-related properties that I can try to nullify.
I would post a screen shot but I don't have the rep yet.
Can anyone explain where the space is coming from and how to nix it?
I suspect the answer is related to the Top Layout Guide for the view, but I can't diagnose the specific problem.
Here's a workaround from the storyboard: Insert a UIView in the scene, then drag the UITableView into it as a subview. Check the box for the new UIView's "Clip Subviews" in the attribute window, and then use it as a mask, basically, to cover the undesired top margin of the table view. It works and doesn't require any coding, but there has to be a better way.