Custom interfaces for Portrait & Landscape mode iOS

I am trying to layout user interfaces differently for Portrait & Landscape orientations. The difference comes in the following ways:

I have few UIStackViews. Some of their axis becomes horizontal in landscape but vertical in portrait mode,

The order of buttons in UIStackView may be different in both the modes,

A button which is added to subview1 in landscape needs to be removed & added to subview2 in landscape. subview1 may not be present at all in portrait mode,

Autolayout constraints are different in both the modes.

I started with vary for traits in XCode but it seems to have limitations. I am manually switching constraints in the code on observing trait collection changes (viewWillTransition:...) but it seems clumsy. Is there a better way or the best way would be to have duplicate sets of controls for both the modes and hide the ones not needed in landscape/portrait modes?

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

2

A recent WWDC video talks about using different constraints for different "modes." Might be worth a watch. Specifically starting at 26:00 ... developer.apple.com/videos/play/wwdc2018/220

– DonMag
Nov 20 '18 at 19:58

That's what I am doing, but it doesn't seem to be enough, particularly condition 3.

– Deepak Sharma
Nov 21 '18 at 9:44

Can you share the xib?

– Arun B
Dec 11 '18 at 20:09

add a comment |

I am trying to layout user interfaces differently for Portrait & Landscape orientations. The difference comes in the following ways:

I have few UIStackViews. Some of their axis becomes horizontal in landscape but vertical in portrait mode,

The order of buttons in UIStackView may be different in both the modes,

A button which is added to subview1 in landscape needs to be removed & added to subview2 in landscape. subview1 may not be present at all in portrait mode,

Autolayout constraints are different in both the modes.

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

2

A recent WWDC video talks about using different constraints for different "modes." Might be worth a watch. Specifically starting at 26:00 ... developer.apple.com/videos/play/wwdc2018/220

– DonMag
Nov 20 '18 at 19:58

That's what I am doing, but it doesn't seem to be enough, particularly condition 3.

– Deepak Sharma
Nov 21 '18 at 9:44

Can you share the xib?

– Arun B
Dec 11 '18 at 20:09

add a comment |

I am trying to layout user interfaces differently for Portrait & Landscape orientations. The difference comes in the following ways:

I have few UIStackViews. Some of their axis becomes horizontal in landscape but vertical in portrait mode,

The order of buttons in UIStackView may be different in both the modes,

A button which is added to subview1 in landscape needs to be removed & added to subview2 in landscape. subview1 may not be present at all in portrait mode,

Autolayout constraints are different in both the modes.

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

I am trying to layout user interfaces differently for Portrait & Landscape orientations. The difference comes in the following ways:

I have few UIStackViews. Some of their axis becomes horizontal in landscape but vertical in portrait mode,

The order of buttons in UIStackView may be different in both the modes,

A button which is added to subview1 in landscape needs to be removed & added to subview2 in landscape. subview1 may not be present at all in portrait mode,

Autolayout constraints are different in both the modes.

ios xcode ios-autolayout uistackview landscape-portrait

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

asked Nov 20 '18 at 19:07

Deepak Sharma

1,4032037

2

A recent WWDC video talks about using different constraints for different "modes." Might be worth a watch. Specifically starting at 26:00 ... developer.apple.com/videos/play/wwdc2018/220

– DonMag
Nov 20 '18 at 19:58

That's what I am doing, but it doesn't seem to be enough, particularly condition 3.

– Deepak Sharma
Nov 21 '18 at 9:44

Can you share the xib?

– Arun B
Dec 11 '18 at 20:09

add a comment |

2

A recent WWDC video talks about using different constraints for different "modes." Might be worth a watch. Specifically starting at 26:00 ... developer.apple.com/videos/play/wwdc2018/220

– DonMag
Nov 20 '18 at 19:58

That's what I am doing, but it doesn't seem to be enough, particularly condition 3.

– Deepak Sharma
Nov 21 '18 at 9:44

Can you share the xib?

– Arun B
Dec 11 '18 at 20:09

A recent WWDC video talks about using different constraints for different "modes." Might be worth a watch. Specifically starting at 26:00 ... developer.apple.com/videos/play/wwdc2018/220

– DonMag
Nov 20 '18 at 19:58

That's what I am doing, but it doesn't seem to be enough, particularly condition 3.

– Deepak Sharma
Nov 21 '18 at 9:44

Can you share the xib?

– Arun B
Dec 11 '18 at 20:09

add a comment |

2 Answers
2

active

oldest

votes

+25

The interface builder is really powerful if you use it right, I'm not completely sure what you're trying to do, it'd be useful if you share some screenshots at least. I'm assuming that you're every subview of the UIStackView is a button, or it contains a button, in that case what I'd do is:

Having 2 different UIStackView, one for landscape and the other for portrait.

Add variants to the installed interface builder property for traits. So only one of the two UIStackView will be installed at a time.

For every UIButton add the event, connect it to the respective IBAction or selector. This will work even if there're 2 buttons that do the same.

So regarding your issues:

The axis itself wont change, but this will work because there're 2 version of the UIStackView.

You can choose to arrange the button on each UIStackView.

Just add the buttons wherever you want on each UIStackView.

Set the constraints as you want depending on which UIStackView you're working on.

An I missing something? please update your question with more information so people can help you in a better way.

edited Dec 13 '18 at 17:10

answered Dec 11 '18 at 19:23

Fantini

1,5401527

1

I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime.

– Deepak Sharma
Dec 22 '18 at 17:40

You could add a method that returns the active UIButton or UIStackView depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time.

– Fantini
Dec 26 '18 at 21:10

add a comment |

What I have done is to observe the UIDevice.orientationDidChangeNotification and update the necessarily constraints to achieve different layouts, as you have already implemented. And I think this is the better way to solve the problem ~~and never trying or even thinking to create different views for each orientation 🙅🏿‍♂️~~.

Attending the conditions:

The first condition only needs to set the axis property accordingly.

The order of the arrangedSubviews is part of the design, and therefore, its up to the developer to rearranged them manually if he/she has to.

In this part what I would do is what you have said: to removeFromSuperview() the button and addSubview(view:) from one subview to another.

This is made automatically, as long as we activate the constraints for one orientation and deactivate the other ones, the system update the UI without any problem.

The most important thing is to make sure that when removing subviews, any constraint attached to it is removed, or the app will crash.

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes.

– Deepak Sharma
Dec 7 '18 at 18:15

I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in WWDC video, but instead of observing traitCollections we have to observe if UIDevice.current.orientation.isLandscape or not, and deactivate or activate correspondingly the constraints.

– Ángel Téllez
Dec 7 '18 at 19:03

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399890%2fcustom-interfaces-for-portrait-landscape-mode-ios%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

+25

Having 2 different UIStackView, one for landscape and the other for portrait.

Add variants to the installed interface builder property for traits. So only one of the two UIStackView will be installed at a time.

For every UIButton add the event, connect it to the respective IBAction or selector. This will work even if there're 2 buttons that do the same.

So regarding your issues:

The axis itself wont change, but this will work because there're 2 version of the UIStackView.

You can choose to arrange the button on each UIStackView.

Just add the buttons wherever you want on each UIStackView.

Set the constraints as you want depending on which UIStackView you're working on.

An I missing something? please update your question with more information so people can help you in a better way.

edited Dec 13 '18 at 17:10

answered Dec 11 '18 at 19:23

Fantini

1,5401527

1

I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime.

– Deepak Sharma
Dec 22 '18 at 17:40

You could add a method that returns the active UIButton or UIStackView depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time.

– Fantini
Dec 26 '18 at 21:10

add a comment |

+25

Having 2 different UIStackView, one for landscape and the other for portrait.

Add variants to the installed interface builder property for traits. So only one of the two UIStackView will be installed at a time.

For every UIButton add the event, connect it to the respective IBAction or selector. This will work even if there're 2 buttons that do the same.

So regarding your issues:

The axis itself wont change, but this will work because there're 2 version of the UIStackView.

You can choose to arrange the button on each UIStackView.

Just add the buttons wherever you want on each UIStackView.

Set the constraints as you want depending on which UIStackView you're working on.

An I missing something? please update your question with more information so people can help you in a better way.

edited Dec 13 '18 at 17:10

answered Dec 11 '18 at 19:23

Fantini

1,5401527

1

I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime.

– Deepak Sharma
Dec 22 '18 at 17:40

You could add a method that returns the active UIButton or UIStackView depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time.

– Fantini
Dec 26 '18 at 21:10

add a comment |

+25

Having 2 different UIStackView, one for landscape and the other for portrait.

Add variants to the installed interface builder property for traits. So only one of the two UIStackView will be installed at a time.

For every UIButton add the event, connect it to the respective IBAction or selector. This will work even if there're 2 buttons that do the same.

So regarding your issues:

The axis itself wont change, but this will work because there're 2 version of the UIStackView.

You can choose to arrange the button on each UIStackView.

Just add the buttons wherever you want on each UIStackView.

Set the constraints as you want depending on which UIStackView you're working on.

An I missing something? please update your question with more information so people can help you in a better way.

edited Dec 13 '18 at 17:10

answered Dec 11 '18 at 19:23

Fantini

1,5401527

Having 2 different UIStackView, one for landscape and the other for portrait.

Add variants to the installed interface builder property for traits. So only one of the two UIStackView will be installed at a time.

For every UIButton add the event, connect it to the respective IBAction or selector. This will work even if there're 2 buttons that do the same.

So regarding your issues:

The axis itself wont change, but this will work because there're 2 version of the UIStackView.

You can choose to arrange the button on each UIStackView.

Just add the buttons wherever you want on each UIStackView.

Set the constraints as you want depending on which UIStackView you're working on.

An I missing something? please update your question with more information so people can help you in a better way.

edited Dec 13 '18 at 17:10

answered Dec 11 '18 at 19:23

Fantini

1,5401527

edited Dec 13 '18 at 17:10

answered Dec 11 '18 at 19:23

Fantini

1,5401527

answered Dec 11 '18 at 19:23

Fantini

1,5401527

answered Dec 11 '18 at 19:23

Fantini

1,5401527

1

I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime.

– Deepak Sharma
Dec 22 '18 at 17:40

You could add a method that returns the active UIButton or UIStackView depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time.

– Fantini
Dec 26 '18 at 21:10

add a comment |

1

I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime.

– Deepak Sharma
Dec 22 '18 at 17:40

You could add a method that returns the active UIButton or UIStackView depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time.

– Fantini
Dec 26 '18 at 21:10

I did the same thing, but the problem with it is you need to manage two UIButtons or UIStackViews in the code everytime.

– Deepak Sharma
Dec 22 '18 at 17:40

You could add a method that returns the active UIButton or UIStackView depending the device's rotation (or if they're attached to a superview or not) that way your code will be more stable and clean by no repeating the same every time.

– Fantini
Dec 26 '18 at 21:10

add a comment |

Attending the conditions:

The first condition only needs to set the axis property accordingly.

The order of the arrangedSubviews is part of the design, and therefore, its up to the developer to rearranged them manually if he/she has to.

In this part what I would do is what you have said: to removeFromSuperview() the button and addSubview(view:) from one subview to another.

This is made automatically, as long as we activate the constraints for one orientation and deactivate the other ones, the system update the UI without any problem.

The most important thing is to make sure that when removing subviews, any constraint attached to it is removed, or the app will crash.

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes.

– Deepak Sharma
Dec 7 '18 at 18:15

I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in WWDC video, but instead of observing traitCollections we have to observe if UIDevice.current.orientation.isLandscape or not, and deactivate or activate correspondingly the constraints.

– Ángel Téllez
Dec 7 '18 at 19:03

add a comment |

Attending the conditions:

The first condition only needs to set the axis property accordingly.

The order of the arrangedSubviews is part of the design, and therefore, its up to the developer to rearranged them manually if he/she has to.

In this part what I would do is what you have said: to removeFromSuperview() the button and addSubview(view:) from one subview to another.

This is made automatically, as long as we activate the constraints for one orientation and deactivate the other ones, the system update the UI without any problem.

The most important thing is to make sure that when removing subviews, any constraint attached to it is removed, or the app will crash.

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes.

– Deepak Sharma
Dec 7 '18 at 18:15

I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in WWDC video, but instead of observing traitCollections we have to observe if UIDevice.current.orientation.isLandscape or not, and deactivate or activate correspondingly the constraints.

– Ángel Téllez
Dec 7 '18 at 19:03

add a comment |

Attending the conditions:

The first condition only needs to set the axis property accordingly.

The order of the arrangedSubviews is part of the design, and therefore, its up to the developer to rearranged them manually if he/she has to.

In this part what I would do is what you have said: to removeFromSuperview() the button and addSubview(view:) from one subview to another.

This is made automatically, as long as we activate the constraints for one orientation and deactivate the other ones, the system update the UI without any problem.

The most important thing is to make sure that when removing subviews, any constraint attached to it is removed, or the app will crash.

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

Attending the conditions:

The first condition only needs to set the axis property accordingly.

The order of the arrangedSubviews is part of the design, and therefore, its up to the developer to rearranged them manually if he/she has to.

In this part what I would do is what you have said: to removeFromSuperview() the button and addSubview(view:) from one subview to another.

This is made automatically, as long as we activate the constraints for one orientation and deactivate the other ones, the system update the UI without any problem.

The most important thing is to make sure that when removing subviews, any constraint attached to it is removed, or the app will crash.

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

answered Dec 6 '18 at 22:16

Ángel Téllez

52928

Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes.

– Deepak Sharma
Dec 7 '18 at 18:15

I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in WWDC video, but instead of observing traitCollections we have to observe if UIDevice.current.orientation.isLandscape or not, and deactivate or activate correspondingly the constraints.

– Ángel Téllez
Dec 7 '18 at 19:03

add a comment |

Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes.

– Deepak Sharma
Dec 7 '18 at 18:15

I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in WWDC video, but instead of observing traitCollections we have to observe if UIDevice.current.orientation.isLandscape or not, and deactivate or activate correspondingly the constraints.

– Ángel Téllez
Dec 7 '18 at 19:03

Now the problem I have with removeFromSuperView() & addSubview is the following. How do I define the constraints for both the modes in Storyboard? In order to define constraints for portrait mode, I would first need to pull the view from superview and add it to another subview in storyboard for Compact WidthxRegular Height trait collection. But that isn't allowed in vary for traits. Only option left is programatic definition of constraints in both modes.

– Deepak Sharma
Dec 7 '18 at 18:15

I try not to work with Interface Builder because my brain explote at the moment of linking the mockup with the code. Sorry about that, we have to wait for a superhero in IB. But for the programmatically way: you only need to create a Storyboard for one orientation and the other create it by code. A good example can be seen around 30:00 in WWDC video, but instead of observing traitCollections we have to observe if UIDevice.current.orientation.isLandscape or not, and deactivate or activate correspondingly the constraints.

– Ángel Téllez
Dec 7 '18 at 19:03

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk