I'm making a simple app and I love using blue effects throughout the UI. Normally if I use a tableView I pin the 4 edges all the way out to the edge of the viewController, and everything scrolls correctly "behind" the blurred navigation bar and tab bar.
However, for one scene I want one view "Original Post VisualFX View" to be "pinned" at the top while the answer fields scroll behind that view and the nav/bottom bars.
Here's the view hierarchy:
Even after I turned off "clip to bounds" on the tableview as well as every view in the hierarchy above it, I can only get the tableView to scroll a BIT behind the Original Post VisualFX View and the bottom tab bar before they disappear. I assume it's because tableViews don't draw things that aren't visible at all within its bounds.
I'm trying to do everything in the Storyboard in IB with as little code as possible. I feel like this shouldn't be that hard, right?
So after tinkering for a while, I found a workaround: use a TableViewController for the whole scene, and just use a custom TableViewCell as the header, which pins it at the top when you scroll. By using ClearColor for the background and putting a UIVisualEffectView with blur in the background, I'm able to get everything to work beautifully.
Related
I have been battling this transition animation and I am pretty much out of ideas. I am attempting something similar to going from the collection to the individual photos in the Photos app on iOS.
It all works to my satisfaction with the exception that the frame for the "big" detail view of the image is not correct. It is the right size but it is about 87 points closer to the top of the screen compared to the actual position of the image in the final state. This is pretty much the same height as what is above the "safe area" (iPhone X titles + navItem) and irritatingly close to what is also below the safe area (toolbar and iPhone X home area).
I have Googled (and "SO'd") a bunch of different solutions to similar sounding problems. E.g: UIViewControllerAnimatedTransitioning with Safe Area Insets on iPhone X
I have downloaded and perused example code from Github. E.g: https://github.com/SamStone92/CustomTransitions
It seems to me that I have something in my view (controller) hierarchy which is complicating this more than most. I would love some hints as to what might be causing the problem and how I might go about fixing it.
My hierarchy is:
NavigationController containing the root VC with a UICollectionView.
Tapping a cell transitions to a UIPageViewController for a "detail view" where I can page between items in the collection.
UIPageViewController has a bottom toolbar in addition to the navigation bar.
The content ViewController has a ScrollView with a UIImageView in it to get some zooming.
Seems like the common approach is to add the destination view to the container, force a layout pass and then get the frame. I have tried many variants of this with and without converting the coordinates. (they appear to always remain the same before and after conversion)
My Theory
I am leaning towards the UIPageViewController being the complicating factor. But I have not been able to untangle how to get the correct coordinates.
The destination view (in the animation) is not the content view but the PageVC view which in turn may or may not have added the content view, adapted it to the navigation item or the toolbar.
Seems like viewWillAppear on the content VC does not have the right coordinates. I can tell that the detail content view is getting a call to viewWillLayoutSubviews after that and also after all the animation delegation stuff has had its turn.
This is a color overlay of my main views. Grey is the top and bottom areas outside the safe area. Blue is where the transition animates to before revealing the green, underlying actual position it should have animated to.
Somehow the Segmented Control does not get the proper height when the iPhone is in Landscape.
It is already bad enough when rotating the simulator that the toolbar at the bottom doesn't get thinner height, but when navigating back to the previous screen and then in again, the toolbar does get the propper height, but the segmented control extends above it, and even looks much bigger.
Is the is bug in the simulator or am i doing something wrong?
After digging around another day, I found where it all went wrong!
When dealing with UINavigationControllers, DO NOT drag in a UIToolbar at all! UINavigationController comes with two bars, a top-bar for the Navigation Controller and a bottom-bar for the ToolBar - that latter one is hidden by default.
In any newly added ViewControllers, there will be a toolbar that can be populated from the IB. However, if it is not a UIBarButton, there are some issues. To use a stepper, on/off-switch or a segmented control, drag it first to the Navigation bar, and then in the left column navigator of IB, drag it to the toolbar.
This solved all the problems mentioned before
How to make tableview's content displayed under a transparent navigation bar?
Like this:In "Photos" app, albums displayed under navigation bar.
Special thanks
If you use _rootNavigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent; then set correct tableview frame thats it. If you are in xib dont forget to simulate the translucent navigation bar.
One way I have found to accomplish this is by shifting your tableview's superview up to have the origin at {0, 0}. However after researching more several people have said altering the superview (UIViewControllerWrapperView) is a bad idea. However I also have not found any information on why just changing the frame would create problems. I am shifting the superview right now and haven't found any problems related to it yet.
Might be you can set it like this:
[navigationBar setAlpha:0.5f];
For making the navigation bar transparent alone, you can check this post, How to make a Navigation bar transparent and fade out like in the photo app in the iPhone
Also check this How to set the transparency color for Toolbar and Navigation bar using MonoTouch?
I am not sure whether you can add the table view behind the navigation bar. You might have to add it as a subview of self.parentViewController.view.
Another way to do this is by hiding navigation bar and using a transparent tool bar in place of that. This can be added on top of the current view. The only problem is with the back button. You might have to use custom button for that.
Once again, I'm almost entirely sure this is something dumb that I'm doing, but I've been banging my head against this one for hours & am getting nowhere.
I'm trying to restructure the view hierarchy of my app. I need to be able to detect user interface orientation changes globally in order to correctly rotate a "Loading" view displayed when the app is downloading content. (device orientation changes seem to fire at different times, causing the view that needs to respond to these events to rotate sporadically).
The app previously added a UINavigationController's view to the main window. I modified the hierarchy to add the view of a UIViewController subclass to the main window, and added the view of the UINavigationController to the subclass's view. The UIViewController subclass manages the display & rotation of the "Loading" subview, and I was expecting the rest of the app to continue behaving normally, as inserting one extra empty view into the hierarchy didn't feel like I was changing too much.
My initial problem was the positioning of the UINavigationController - it was 20 pixels too low, resulting in a gap between the status bar and the navigation bar, and cutting off the bottom 20 pixels of the tab bar. I was able to adjust this by setting the frame property of the UINavigationController's view to the bounds property of the UIViewController's view, which corrected the position.
However, now I'm stuck with a 20-pixel-high dark "overlay" on top of my navigation bar. If I were to guess, I'd say it was black with 50% opacity. Touch events on this bar don't work (e.g. if I try to tap the "Back" button through the overlay, nothing happens). The fact that the height is equal to that of the status bar hasn't escaped me, but I'm at a total loss as to what could be causing it.
I hate feeling this stupid, so if anyone has any insight into this problem, you'd really make my day. Thanks in advance!
OK, a few things pop out from your post.
My initial problem was the positioning of the
UINavigationController - it was 20
pixels too low
This makes me believe it is related to your new problem.
I was able to adjust this by setting
the frame property of the
UINavigationController's view to the
bounds property of the
UIViewController's view
This sounds like the view it was loaded onto was offset 20 pixels, and when you set it to the bounds, it repositioned it on the windows view space.
Touch events on this bar don't work
(e.g. if I try to tap the "Back"
button through the overlay, nothing
happens)
This is the big thing. If touch events aren't being sent to the view, then what that means is that the OS doesn't see a view where you are pressing (or rather the view you want it to), so that view doesn't get the message to do something.
From what you have said, I believe your problem is with your base view controller that you just added. Try redoing the frame on, making it conform to where you want. Then take out the code you put in to set the navigation controllers frame. The navigation controller should fit to the view you added too, and once you have that main view where it needs to be (20 pixels higher apparently), then everything should work.
I am using InterfaceBuilder to set up my app. I have several views being controlled by a UINavigationController. In IB I set up the views using the simulated metrics to position the elements below the Navigation Bar.
I have a background texture that is placed in the window object of the Main.nib so that it is shared throughout the app. I want that texture to be visible behind a transucent navigation bar.
If the actual navigationBar's style is BlackOpaque the elements of the various views are positioned correctly below the navBar when the app is run.
If I set the NavigationBar to be translucent, view elements are repositioned to the bottom of the status bar when the app is run so that they are visible behind the navigationBar, even though they are positioned correctly in their various nib files.
How do I defeat this behavior?
I figured out the answer...
If you do NOT want objects to be slid up to be positioned behind a translucent NavigationBar, In IB, set the simulated metrics for the navBar to none, and position the view elements as desired.