Gap between status bar and toplayout guide bottom anchor even though `edgesForExtendedLayout` set to `top`



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








0















I have a simple view controller which is being rendered modally simply by using



viewController.present(myVC, animated: true, completion: nil)


myVC view controller does not have any embedded navigation controller and in viewDidLoad of myVC I am setting view which is supposed to behave like navigation bar view (I can't use navigation bar / navigation controller unfortunately)



Here is how I add the view programmatically



 self.view.addSubview(topView)
topView.translatesAutoresizingMaskIntoConstraints = false
topView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
topView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 70).isActive = true


I have specified extended edges as top in my viewDidLoad of myVC



self.edgesForExtendedLayout = .top


And the UI looks like



enter image description here



There is a gap between status bar and view added highlighted by yellow border which I am not sure how to fix :(



Please help










share|improve this question

















  • 1





    This or this could be helpful when you change topLayoutGuide(deprecated) to safeAreaLayoutGuide.

    – nayem
    Nov 15 '18 at 9:34


















0















I have a simple view controller which is being rendered modally simply by using



viewController.present(myVC, animated: true, completion: nil)


myVC view controller does not have any embedded navigation controller and in viewDidLoad of myVC I am setting view which is supposed to behave like navigation bar view (I can't use navigation bar / navigation controller unfortunately)



Here is how I add the view programmatically



 self.view.addSubview(topView)
topView.translatesAutoresizingMaskIntoConstraints = false
topView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
topView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 70).isActive = true


I have specified extended edges as top in my viewDidLoad of myVC



self.edgesForExtendedLayout = .top


And the UI looks like



enter image description here



There is a gap between status bar and view added highlighted by yellow border which I am not sure how to fix :(



Please help










share|improve this question

















  • 1





    This or this could be helpful when you change topLayoutGuide(deprecated) to safeAreaLayoutGuide.

    – nayem
    Nov 15 '18 at 9:34














0












0








0








I have a simple view controller which is being rendered modally simply by using



viewController.present(myVC, animated: true, completion: nil)


myVC view controller does not have any embedded navigation controller and in viewDidLoad of myVC I am setting view which is supposed to behave like navigation bar view (I can't use navigation bar / navigation controller unfortunately)



Here is how I add the view programmatically



 self.view.addSubview(topView)
topView.translatesAutoresizingMaskIntoConstraints = false
topView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
topView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 70).isActive = true


I have specified extended edges as top in my viewDidLoad of myVC



self.edgesForExtendedLayout = .top


And the UI looks like



enter image description here



There is a gap between status bar and view added highlighted by yellow border which I am not sure how to fix :(



Please help










share|improve this question














I have a simple view controller which is being rendered modally simply by using



viewController.present(myVC, animated: true, completion: nil)


myVC view controller does not have any embedded navigation controller and in viewDidLoad of myVC I am setting view which is supposed to behave like navigation bar view (I can't use navigation bar / navigation controller unfortunately)



Here is how I add the view programmatically



 self.view.addSubview(topView)
topView.translatesAutoresizingMaskIntoConstraints = false
topView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
topView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
topView.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true
topView.heightAnchor.constraint(equalToConstant: 70).isActive = true


I have specified extended edges as top in my viewDidLoad of myVC



self.edgesForExtendedLayout = .top


And the UI looks like



enter image description here



There is a gap between status bar and view added highlighted by yellow border which I am not sure how to fix :(



Please help







ios swift






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 15 '18 at 7:54









Sandeep BhandariSandeep Bhandari

12.1k32344




12.1k32344







  • 1





    This or this could be helpful when you change topLayoutGuide(deprecated) to safeAreaLayoutGuide.

    – nayem
    Nov 15 '18 at 9:34













  • 1





    This or this could be helpful when you change topLayoutGuide(deprecated) to safeAreaLayoutGuide.

    – nayem
    Nov 15 '18 at 9:34








1




1





This or this could be helpful when you change topLayoutGuide(deprecated) to safeAreaLayoutGuide.

– nayem
Nov 15 '18 at 9:34






This or this could be helpful when you change topLayoutGuide(deprecated) to safeAreaLayoutGuide.

– nayem
Nov 15 '18 at 9:34













1 Answer
1






active

oldest

votes


















1














You get the gap because you are adding your topView's top constraint to the view's topLayoutGuide.bottom (which sits a bit below the notch). So that is intended behavior.



The cleanest way to get rid of that gap is to embed you view controller in a UINavigationController and use a real navigation bar.



But if you cannot do that you have to get rid of the gap yourself.



I cannot think of an elegant way to get rid of this gap but you could add a negative constant to the constraint that is as high as the gap:



topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -14).isActive = true


But you would have to make sure that this is only done on devices that have a safeAreaLayoutGuide.topAnchor > 0. (iPhoneX etc.). On all other devices the constant has to be 0.



As I said this is not a very stable or elegant solution but it would work.



BTW If possible you should change self.topLayoutGuide.bottomAnchor (deprecated) to view.safeAreaLayoutGuide.topAnchor.






share|improve this answer

























  • thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

    – Sandeep Bhandari
    Nov 15 '18 at 8:40











  • The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

    – joern
    Nov 15 '18 at 8:42











  • thank you for your effort and time,lemme try your answer :)

    – Sandeep Bhandari
    Nov 15 '18 at 8:43






  • 1





    Fair enough.I would be interested in a cleaner solution as well ;-)

    – joern
    Nov 15 '18 at 13:07






  • 1





    That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

    – joern
    Nov 20 '18 at 15:39












Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314690%2fgap-between-status-bar-and-toplayout-guide-bottom-anchor-even-though-edgesforex%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














You get the gap because you are adding your topView's top constraint to the view's topLayoutGuide.bottom (which sits a bit below the notch). So that is intended behavior.



The cleanest way to get rid of that gap is to embed you view controller in a UINavigationController and use a real navigation bar.



But if you cannot do that you have to get rid of the gap yourself.



I cannot think of an elegant way to get rid of this gap but you could add a negative constant to the constraint that is as high as the gap:



topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -14).isActive = true


But you would have to make sure that this is only done on devices that have a safeAreaLayoutGuide.topAnchor > 0. (iPhoneX etc.). On all other devices the constant has to be 0.



As I said this is not a very stable or elegant solution but it would work.



BTW If possible you should change self.topLayoutGuide.bottomAnchor (deprecated) to view.safeAreaLayoutGuide.topAnchor.






share|improve this answer

























  • thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

    – Sandeep Bhandari
    Nov 15 '18 at 8:40











  • The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

    – joern
    Nov 15 '18 at 8:42











  • thank you for your effort and time,lemme try your answer :)

    – Sandeep Bhandari
    Nov 15 '18 at 8:43






  • 1





    Fair enough.I would be interested in a cleaner solution as well ;-)

    – joern
    Nov 15 '18 at 13:07






  • 1





    That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

    – joern
    Nov 20 '18 at 15:39
















1














You get the gap because you are adding your topView's top constraint to the view's topLayoutGuide.bottom (which sits a bit below the notch). So that is intended behavior.



The cleanest way to get rid of that gap is to embed you view controller in a UINavigationController and use a real navigation bar.



But if you cannot do that you have to get rid of the gap yourself.



I cannot think of an elegant way to get rid of this gap but you could add a negative constant to the constraint that is as high as the gap:



topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -14).isActive = true


But you would have to make sure that this is only done on devices that have a safeAreaLayoutGuide.topAnchor > 0. (iPhoneX etc.). On all other devices the constant has to be 0.



As I said this is not a very stable or elegant solution but it would work.



BTW If possible you should change self.topLayoutGuide.bottomAnchor (deprecated) to view.safeAreaLayoutGuide.topAnchor.






share|improve this answer

























  • thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

    – Sandeep Bhandari
    Nov 15 '18 at 8:40











  • The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

    – joern
    Nov 15 '18 at 8:42











  • thank you for your effort and time,lemme try your answer :)

    – Sandeep Bhandari
    Nov 15 '18 at 8:43






  • 1





    Fair enough.I would be interested in a cleaner solution as well ;-)

    – joern
    Nov 15 '18 at 13:07






  • 1





    That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

    – joern
    Nov 20 '18 at 15:39














1












1








1







You get the gap because you are adding your topView's top constraint to the view's topLayoutGuide.bottom (which sits a bit below the notch). So that is intended behavior.



The cleanest way to get rid of that gap is to embed you view controller in a UINavigationController and use a real navigation bar.



But if you cannot do that you have to get rid of the gap yourself.



I cannot think of an elegant way to get rid of this gap but you could add a negative constant to the constraint that is as high as the gap:



topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -14).isActive = true


But you would have to make sure that this is only done on devices that have a safeAreaLayoutGuide.topAnchor > 0. (iPhoneX etc.). On all other devices the constant has to be 0.



As I said this is not a very stable or elegant solution but it would work.



BTW If possible you should change self.topLayoutGuide.bottomAnchor (deprecated) to view.safeAreaLayoutGuide.topAnchor.






share|improve this answer















You get the gap because you are adding your topView's top constraint to the view's topLayoutGuide.bottom (which sits a bit below the notch). So that is intended behavior.



The cleanest way to get rid of that gap is to embed you view controller in a UINavigationController and use a real navigation bar.



But if you cannot do that you have to get rid of the gap yourself.



I cannot think of an elegant way to get rid of this gap but you could add a negative constant to the constraint that is as high as the gap:



topView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: -14).isActive = true


But you would have to make sure that this is only done on devices that have a safeAreaLayoutGuide.topAnchor > 0. (iPhoneX etc.). On all other devices the constant has to be 0.



As I said this is not a very stable or elegant solution but it would work.



BTW If possible you should change self.topLayoutGuide.bottomAnchor (deprecated) to view.safeAreaLayoutGuide.topAnchor.







share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 20 '18 at 15:43

























answered Nov 15 '18 at 8:36









joernjoern

21.5k66783




21.5k66783












  • thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

    – Sandeep Bhandari
    Nov 15 '18 at 8:40











  • The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

    – joern
    Nov 15 '18 at 8:42











  • thank you for your effort and time,lemme try your answer :)

    – Sandeep Bhandari
    Nov 15 '18 at 8:43






  • 1





    Fair enough.I would be interested in a cleaner solution as well ;-)

    – joern
    Nov 15 '18 at 13:07






  • 1





    That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

    – joern
    Nov 20 '18 at 15:39


















  • thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

    – Sandeep Bhandari
    Nov 15 '18 at 8:40











  • The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

    – joern
    Nov 15 '18 at 8:42











  • thank you for your effort and time,lemme try your answer :)

    – Sandeep Bhandari
    Nov 15 '18 at 8:43






  • 1





    Fair enough.I would be interested in a cleaner solution as well ;-)

    – joern
    Nov 15 '18 at 13:07






  • 1





    That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

    – joern
    Nov 20 '18 at 15:39

















thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

– Sandeep Bhandari
Nov 15 '18 at 8:40





thanks a lot for the response, Ill try your solution and update you soon, but how did you come up with the value of -14 status bar height is 20 nav bar height is 44 then how did you achieve that -14 is that a random number and should I find it by trial n error?

– Sandeep Bhandari
Nov 15 '18 at 8:40













The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

– joern
Nov 15 '18 at 8:42





The gap has nothing to do with the status bar. I found the value by trial and error. As I said: not a very elegant nor stable solution ;-)

– joern
Nov 15 '18 at 8:42













thank you for your effort and time,lemme try your answer :)

– Sandeep Bhandari
Nov 15 '18 at 8:43





thank you for your effort and time,lemme try your answer :)

– Sandeep Bhandari
Nov 15 '18 at 8:43




1




1





Fair enough.I would be interested in a cleaner solution as well ;-)

– joern
Nov 15 '18 at 13:07





Fair enough.I would be interested in a cleaner solution as well ;-)

– joern
Nov 15 '18 at 13:07




1




1





That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

– joern
Nov 20 '18 at 15:39






That's definitely a cleaner and better approach. I'll add that to the answer so it is more visible.

– joern
Nov 20 '18 at 15:39




















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53314690%2fgap-between-status-bar-and-toplayout-guide-bottom-anchor-even-though-edgesforex%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo