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;
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
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
add a comment |
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
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
1
This or this could be helpful when you changetopLayoutGuide
(deprecated) tosafeAreaLayoutGuide
.
– nayem
Nov 15 '18 at 9:34
add a comment |
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
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
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
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
ios swift
asked Nov 15 '18 at 7:54
Sandeep BhandariSandeep Bhandari
12.1k32344
12.1k32344
1
This or this could be helpful when you changetopLayoutGuide
(deprecated) tosafeAreaLayoutGuide
.
– nayem
Nov 15 '18 at 9:34
add a comment |
1
This or this could be helpful when you changetopLayoutGuide
(deprecated) tosafeAreaLayoutGuide
.
– 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
add a comment |
1 Answer
1
active
oldest
votes
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
.
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
|
show 2 more comments
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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
.
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
|
show 2 more comments
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
.
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
|
show 2 more comments
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
.
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
.
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
|
show 2 more comments
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
|
show 2 more comments
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
1
This or this could be helpful when you change
topLayoutGuide
(deprecated) tosafeAreaLayoutGuide
.– nayem
Nov 15 '18 at 9:34