I've got a map view, as a subview within a semi complex view hierarchy. Everything works fine, except that the accuracy circle, pulsing wave causes the underlying map view to bleed onto both the navigation bar, and the tab bar whenever the blue, user location pin is near either one. I've got all the parent views' clip subviews set, so wondering what else might be the problem. The view hierarchy is window/scrollview/content/mapview. Thanks.
Update:
I've since tried rearranging the view hierarchy to test various layouts, and confirmed that all the parent views have clipsToBounds = YES and still getting the bleed whenever the "pulse" occurs. Odd things is that the only two views affected by this are the nav bar, and the tab bar. The undesired behavior is that when the pulse ring expands, near either the tab bar or nav bar, the underlying map view begins to draw under the area within those views where the pulse intersects them; as if they are being wiped away and exposing the map view underneath it
Thought I'd share some recent info on this, in case somebody else happens to hit this same issue.
In my case, I had to set the parent view of the mkmapview (content view) clipsToBounds property NO, and everything worked. It seems counter intuitive, I know, but it's the solution an iOS support engineer proposed. Technically, it's not a supported configuration, but the tech engineer also indicated that it shouldn't bleed like that anyway. I filed a bug for it, as he suggested. The only downside to this is that I had to let go of rounding corners and drop shadow; can't get that without clipsToBounds=YES.
Related
I have an unusual UI requirement that I believe requires a custom modal presentation style, of some sort. I effectively need a floating bottom bar combined with the default pageSheet animation, for an iPad only app.
Everything about the pageSheet presentation style is perfect, except that I need to put a floating bottom bar below the presented view controller.
When the view controller gets presented, it should come up from the bottom, and underneath, the floating bottom bar. Likewise, on dismissal, it should come down from the top and transition underneath the bottom bar.
Mockups:
I have no intention of reinventing any wheels here, so any existing libraries / GitHub projects are acceptable; however, assuming there aren't any, what is the best way to do this? I'm not even sure if I'm thinking in the right direction since the floating bottom bar should be present not only before the presentation, but also during, and after. Moreover, the content on the bar must be interactable at all times (with the exception, perhaps, while the animation is in progress).
Full disclaimer, I am not an expert when it comes to custom transitions/presentation styles, so any help is appreciated.
Edit: Code examples are welcomed, but not required. I'm very much interested in the basic mechanics/structure of a feature like this.
I'm trying to set up a layout where a Map is placed on top of the SceneView. When the app builds, the set up flashes for a second, and then the SceneView takes up the whole screen, completely hiding the other two views.
After moving the SceneView on the left hand menu and moving it back, the text started appearing but not the black background.
(I've got constraints set for the Scene View to take up the whole screen, and some constraints (right and bottom) on the Map too.
Why is it not working?
EDIT: It started working after I deleted the view and added it back in, but not sure why. #El Tomato says SceneViews always overlaps other views. Is this true (i.e. by accidentally getting it to work, am I utilizing a bug)?
It is doable. I'm doing it currently with an app I am using, but the difference is that I didn't set up the ARSceneView in the Interface builder, but I added it to fit the whole screen programmatically. I have some buttons that were added through the interface builder, and I added a label with a background now just to make sure it works similarly to how you want it.
I will post some images:
Here i simply have the view controller with some (bad looking buttons) in the stack View as well as the label with a red background. The ARSceneView is added in the my ViewDidAppear function and takes up the whole frame.
This picture is from the screen while the app is executing (Debugging the UI). As you can see, the Label with the background as well as the buttons I've added all show.
I also have 2 buttons that are showing as well (the white and red circle) and these were added programmatically and were brought to the front.
My suggestion is to try and add the ARSceneView programmatically, maybe it doesn't work otherwise. Or you can try to outlet all your views and bring the Map View and the Label to the front using bringSubviewToFront.
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.
I'm working with a situation similar to the screenshot below (taken from another question asked about the gap at the top) .
I know how to make the UISearchDisplayController's tableView show up in whatever frame someone wanted, and that's great, but now I'm dealing with this black translucent overlay that I cannot get to move.
No amount of changing any frame for a tableView in any order is fixing it. The only thing that fixes it is changing EdgesForExtendedLayout property for the parent controller, and this is not an option given the way everything else on the page and application is displayed.
So, how can I remove or shift the translucent overlay to whatever Y position I want?
I'm experiencing a strange issue with MKMapView placed in a view with a navigation bar. Given a UIScrollView in the same situation, whose width, height, and center are constrained to it's superview (the view controller's view object) the insets will be adjusted if the controller's automaticallyAdjustsScrollViewInsets property is set to YES, and not if set to NO. That's great. I can not find this documented anywhere, but the map view seems to do the same thing, but it's not possible to disable it. Setting automaticallyAdjustsScrollViewInsets has no effect.
In brief(ish):
In the image below, the small back square is centered within the view, regardless of navigation bar. The map view is also constrained to be exactly the size of the view (it extends behind the nav bar). The location of the map view was set to be the current location (also indicated by the blue circle) so I would expect them to match, but they are off by half the combined height of status and navigation bars.
Is there an explanation for this behavior, and a way to get it to work as expected?
This is very strange because an MKMapView is not a subclass of a UIScrollView but it is behaving like one in this case. That's not completely unreasonable, but I would expect the auto adjusting insets to work consistently on a map view and a scroll view.
Workaround
Something awful like this would 'solve the problem':
MKCoordinateRegion region = MKCoordinateRegionMake(self.coordinate, MKCoordinateSpanMake(0.008, 0.008));
MKMapRect mapRect = MKMapRectForCoordinateRegion(region);
[self.mapView setVisibleMapRect:mapRect edgePadding:UIEdgeInsetsMake(0, 0, 64, 0) animated:YES];
Either adjusting the bottom inset as well, or adding a negative inset on the top gets things lined up, but it would break if this behavior of the map view changes, or if the view controller is presented without a navigation bar, or if there is a stiff breeze. It also erodes my confidence in pulling correct coordinates back out of the map view.
MKMapView does indeed sit under the navigation bar, but automatically uses a housing view controller's topLayoutGuide to shift annotations and the compass view, etc. down from under it.
You should make sure that your own views take this into account in their autolayout code.
If you take a look at this, you can see that the mapview is very likely not sitting under the navigation bar, as you think. It is sitting between the bottom of the nav bar and the bottom of the superview.
On another note, the navigation bar is translucent by default, so if the mapview was really sitting under the nav bar you would be able to see through it, assuming you didn't disable the default nav bar behavior.