Control always half the screen

Targets iOS
1

I have no idea how to explain what I try to accomplish. I hope I make any sense :slight_smile:

I have two elements on an iPhone screen:

  • ImageViewer (with a QR code)
  • ContainerControl (with a few lines of text)

In portrait mode:
I have the imageViewer control on an iPhone screen. This fills the entire width of the iPhone screen.
Bellow I have the container control with a few lines of text.

Now I rotate my screen to landscape mode
The imageViewer stays at the same position, with the same dimensions.
But now the container control is right of the imageViewer.

In both views the text of the container control needs to respect the orientation. Since the image will display a QR code, it doesn’t really matter what orientation it is in. But the text needs to be readable.

I played with the auto layout settings. But I can’t get it to work right.
I mean, in portrait mode I can say that the imageViewer height needs to be half the height of the parent.
But when I rotate the phone, the width should be half the width of the parent.
So, I’m kinda stuck :confused:

2

If the text is rotated, it sounds like nothing is getting redrawn. Check Supported Orientations on the iPhoneScreen.

If you want the container control to move to the right of the image viewer when rotated, you will have to change layout constraints in code.

Or in the Resized event handler, change the app.currentlayout.content to a completely different screen. Kind of a hack, really.

1 Like
3

You need two layout constraints for that:
One name “img_height_portrait”, the other “img_height_landscape” (active = false).

In the resized event of the screen, activate/deactivate the constraints based on the orientation:

Dim sz As xojo.size = self.Size
Dim portrait As Boolean = sz.Height > sz.Width


self.Constraint("img_height_portrait").Active = portrait
self.Constraint("img_height_landscape").Active = not portrait

I just did a quick test and it required 6 constraints for the imageViewer and 6 constraints for the container.
Only 4 out of 6 constraints are active at any time, depending on the orientation.

2 Likes
4

Thank you Jeremie!
That is an interesting approach!