To explain my problem, I will show you a screenshot of what happens.
After that, I will show the storyboard and the code that I use.
There are actually two problems, which I think are related.
My app UI looks as follows:
When scrolling down, I get the following behaviour:
Navigationbar and tabbar disappear, this is desired behaviour.
Note the white bar below the red bar, this is not desired behaviour and I'm not sure where it comes from.
Edit
When making the NewsfeedPageCell blue, I get the following:
When scrolling back to the top, the result is:
Suddenly the newsfeed rendered is positioned too high.
My storyboard looks as follows:
The newsfeed rendered is a reusable View that is loaded from an xib.
Edit: the newsfeed item cell is a reusable view loaded from an xib.
As far as I know, I have added all the required anchors in the storyboard.
The code of my Newsfeed class that handles the visibility of the navigationbar and the tabbar on scroll:
func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
// Remove navigationbar and tabbar on scroll
if(velocity.y > 0) {
parentViewController?.navigationController?.setNavigationBarHidden(true, animated: true)
parentViewController?.tabBarController?.hideTabBarAnimated(hide: true)
} else {
parentViewController?.navigationController?.setNavigationBarHidden(false, animated: true)
parentViewController?.tabBarController?.hideTabBarAnimated(hide: false)
}
}
I've been stuck with this problem for a while.
Any help is appreciated, and if you need more info, please ask.
Edit: The constraints are as follows:
Constraints for the Newsfeed Pager:
Edit2: Debug view navbar hidden:
Debug view without navbar hidden:
Looks like the top anchor of the menu is to the status bar.
Try:
Change MenuBar.top to superview.top, instead of Safe Layout.tom
As a quick fix:
override viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .red /// or the MenuBar backgroundColor tiny color
}
I think y implement all things right.
if you face the problem devices ios 11.0+ then the problem is UIScrollViewContentInsetAdjustmentBehavior when navigation bar is hidden which is UIScollView behavior
you need to set
self.collectionView.contentInsetAdjustmentBehavior = .never
the default value for it is .automatic so scroll starting after the status bar.
Related
What I want to to: I want to drag down the whole view of a viewController to dismiss to the parent viewController using a pan gesture recognizer.
The Problem: When I drag the view down, the navigationBar decreases its height and does not look good. When the view returns to its original position, the navigationBar returns to the default size. I want the navigationBar to stay at its size. I also tried to use the new large titles and some other properties of the navigationController/-bar, but that did not solve it.
Note: Everything worked fine already before iOS 11.
My code:
override func viewDidLoad() {
super.viewDidLoad()
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(dragViewDown(_:)))
navigationController!.view.addGestureRecognizer(panGesture)
}
#IBAction func dragViewDown(_ gesture: UIPanGestureRecognizer) {
if let dragView = gesture.view {
let translation = gesture.translation(in: dragView)
dragView.center.y = (dragView.center.y + translation.y)
gesture.setTranslation(CGPoint.zero, in: dragView)
}
}
This test project only has one viewController and does not provide the dismissal, but the problem is the same as in my working project.
I also uploaded the project to GitHub: https://github.com/maddinK7/navitationBar-pull-down-problem
Does anyone have an idea how to solve this? Thanks in advance.
I want the navigationBar to stay at its size
It is staying at its size. If you check the navigation bar's bounds size height before, during, and after the drag, you will see that it remains the same (probably 44) at all times. What's changing is the drawing extension that causes the drawing of the nav bar to extend up behind the status bar. It can't do that when you pull the whole thing away from the top of the screen, because it is not at the top next to the status bar any more. iOS 11 is more strict about the way it performs this drawing extension, probably because it has to do it in a special way on the iPhone X.
So, let's make sure you're doing this correctly:
Make sure that the navigation bar has a top constraint pinned to the safe area layout guide's top, with a constant of zero.
Make sure that the navigation bar has a delegate that returns .topAttached from position(forBar:).
If you are doing both those things and it doesn't help, you'll have to implement this in some other way entirely. Making the view directly draggable like this, without a custom parent view controller, was always dubious.
When UINavigationController attached top, system will add safe area top margin in the navigation background.
(NOTICE: Background margin will not changed when offset value is between 1 and 0)
So you have to handle attached/detached top event by handle gesture offset to change the right offset and content insets.
You can try the solution in my lib example. ;)
My example include UITableViewController in the UINavigationController, so it will relatively complex.
https://github.com/showang/OverlayModalViewController
I am designing an iOS app in swift, and I am having some difficulty with animations during a controller transition. Specifically, I've implemented a UINavigationControllerDelegate, to listen for when a certain view is pushed. When this view is pushed, I want to hide a bar at the bottom of the screen. My code is working almost perfectly, however whenever I begin an animation on the height of the navigation controller, the current view (which is being removed) animates its height correctly, but the new controller which is being pushed already has the new height from the animation. To put some code to it, the following function is called from my UINavigationControllerDelegate's willShow viewController function:
func animatePlayerVisibility(_ visible: Bool) {
if visible == showingPlayer {
return
}
showingPlayer = visible
let height: CGFloat = visible ? 56.0 : 0.0
self.view.layoutIfNeeded()
UIView.animate(withDuration: 0.35) {
self.playerHeight.constant = height
self.viewBottom.constant = height
self.view.layoutIfNeeded()
}
}
'playerHeight' is an IBOutlet to a constraint on the height of the player container view. 'viewBottom' is also an IBOutlet constraint between the bottom of the top container view and the bottom of the screen. Essentially, as long as these two constraints are animated together, it should look nice.
To help visualize the graphical bug, I edited this line
self.viewBottom.constant = height
to
self.viewBottom.constant = height * 2.0
I have created an imgur album of the actual wrong behavior in action:
http://imgur.com/a/znAim
As you can see, the old view controller animates properly, when the new controller already has the new animated size.
Here is the layout of my storyboard:
Any help would be really appreciated. I've been trying to fix this for a while with no success.
EDIT: The view of the animation without the *2 applied.
https://imgur.com/a/2a5Sw
Have you thought about not using UINavigationController? Maybe it will be easier to use ChildViewControllers mechanism. Then with it you can use a powerful autolayouts and have more control over animation (in your case height)
More info about this here
I've created a nice little sample project you can find here!
There are a number of things that could be going wrong, and since I haven't looked over your project personally it's likely I organized things very differently in my sample, but hopefully you will understand it. I think the big thing is that I added a constraint in storyboard to the navigationController's container to the bottom of the root viewController. I don't adjust the height of this container at all when I animate.
I have a toolbar with an added subview which has a height of 50. The subview is working perfectly but the toolbar cuts off the bottom of the view.
I have tried changing the frame with CGRectMake but this doesn't have any effect.
Here is the code:
var bannerAdView: FBAdView!
override func viewDidAppear(animated: Bool) {
super.viewWillAppear(false)
self.navigationController?.setToolbarHidden(false, animated: true)
bannerAdView = FBAdView(placementID: "bannerID", adSize: kFBAdSizeHeight50Banner, rootViewController: self)
bannerAdView.delegate = self
navigationController?.toolbar.addSubview(bannerAdView)
navigationController?.toolbar.frame = CGRectMake(0,50,320,50)
bannerAdView.loadAd()
}
Edit:
As Nate pointed out below, you can subclass UIToolbar and override the height to whatever custom height you want. That'd be cleaner than cloning it with a normal UIView, as you'd still get all the rest of the natural UIToolbar behaviors.
Original: unfortunately you're pretty much stuck with the typical UIToolbar height of 44.0px.
If I absolutely had to use something 50px high, I'd hide the actual toolbar and spoof it with a UIView that looks exactly like one. You might have some trouble emulating UIBarButtonItems with UIButtons, but if it's gotta be 50px high that's probably the quickest way for you to implement your UI.
I have a UIScrollView with a UIView for content inside of it. On the UIView, I have some buttons I'm using for a menu. Everything works great until I rotate to landscape. Once I rotate, the buttons on the UIView can't be clicked but the top buttons still work. I'm assuming it's because the UIView holding the buttons isn't being resized so it's not responding to taps. This can be seen in the 3d exploded image (Image 4). I have tried all of these lines of code to try to get it to resize, buttons have worked (code is commented because I tried different combos).
override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) {
//hides and displays tab bar on orientation changes
if toInterfaceOrientation.isLandscape {
tabBarController!.tabBar.hidden = true
//self.navigationController!.view.sizeToFit()
//self.navigationController!.view.setNeedsLayout()
//self.viewForContent.setNeedsLayout()
//self.viewForMenuItems.setNeedsLayout()
//self.viewForContent.contentSize = CGSizeMake(900, 900)
//self.viewForContent.setNeedsLayout()
}
else if toInterfaceOrientation.isPortrait {
tabBarController!.tabBar.hidden = false
//self.navigationController!.view.setNeedsLayout()
//self.viewForContent.setNeedsLayout()
//self.viewForMenuItems.setNeedsLayout()
//self.viewForContent.contentSize = CGSizeMake(900, 900)
//self.viewForContent.setNeedsLayout()
}
}
Also I have this in the DidLoad and DidLayoutSubviews. When I comment out the DidLayoutSubviews the buttons work again, but the scrollview isn't large enough to allow me to scroll to the bottom buttons when in landscape
override func viewDidLoad() {
super.viewDidLoad()
let size = UIScreen.mainScreen().bounds.size
viewForContent.contentSize = CGSizeMake(size.width, 458)
// Do any additional setup after loading the view.
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let size = UIScreen.mainScreen().bounds.size
viewForContent.contentSize = CGSizeMake(size.width, 458)
}
The My Information, My Staff, My Colleagues, and My Residents are the buttons that work in landscape mode.
I have used autolayout constraints to setup the views. Also, I am using XCode7 with Swift.
Any help would be appreciated
Thanks
First I setup my views as outlined in the link posted above in the comments by Kusul (Thank you). But when I did this and added the buttons to the content view they wouldn't show on when the screen was rotated to landscape because they were off of the bottom and the UIScrollView didn't "grow".
I figured out that I needed to add a bottom constraint to my last button. So the last button now has a constraint to the top and the bottom. This forced the scroll view to "grow" to the proper size. I could then eliminate setting the size in the didLoad and didLayoutSubviews. Thanks for the help
Since I updated my app to iOS 7 new GUI I have a problem that I can't solve.
My app consists in a scrollable TableView. Trouble is that TableView scrolls underlying top bar, means that table doesn't consider top bar and extends till the top and it's ugly to see.
I tried removing check on "Extend edges under Top Bars" but it's the same.
How can I solve this?
One solution is: set the table view's contentInset and scrollIndicatorInsets to have a top inset of 20. The table view will still underlap the status bar, but it will be completely visible when scrolled all the way.
If you don't like that solution, and you want a permanent empty area behind the status bar, you will have to change the way you pin/position the top of the table view, to allow for the status bar. How you do this depends on whether you are using auto layout. If you are, just pin to the top layout guide. If you are not, you will have to use the "delta" field provided in the nib editor.
If you are using a UITableViewController, however, you are not in charge of the top of the table view; it is a full-screen view and it is the view controller's main view. This is quite a troublesome situation, actually. I have resorted to two solutions:
Put the whole thing into a UINavigationController in order to get the nav bar to "run interference" for me.
Or, embed the table view controller in a custom parent view controller just so that I can position the top of the table view.
In UINavigationController I created an UIView, which goes under status bar but in front of embed controller (the Table), so table disappear behind this view and status bar is always on top.
var patch: UIView!
override func viewDidLoad() {
super.viewDidLoad()
patch = UIView(frame: CGRectMake(0, 0, view.bounds.width, 20))
patch.backgroundColor = UIColor.redColor()
self.view.addSubview(patch)
}
Then I make it disappear when screen goes in Landscape (in iOS9, status bar automatically disappear in Landscape) and make it reappear when screen goes in Portrait.
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
if UIDevice.currentDevice().orientation.isLandscape.boolValue {
patch.hidden = true
} else {
patch.hidden = false
}
}