# Control always half the screen

**URL:** <https://forum.xojo.com/t/control-always-half-the-screen/62050>\
**Category:** iOS\
**Created:** [March 15, 2021, 5:58pm UTC](https://forum.xojo.com/t/control-always-half-the-screen/62050 "2021-03-15T17:58:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Edwin\_van\_den\_Akker](https://forum.xojo.com/user_avatar/forum.xojo.com/edwin_van_den_akker/32/1063_2.png) [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [March 15, 2021, 5:58pm UTC](https://forum.xojo.com/t/control-always-half-the-screen/62050/1 "2021-03-15T17:58:20Z")

</div>

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

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 😕

---

<div class="post-metadata">

**Author:** ![Art\_Gorski](https://forum.xojo.com/user_avatar/forum.xojo.com/art_gorski/32/704_2.png) [@Art\_Gorski](https://forum.xojo.com/u/Art_Gorski)\
**Post date:** [March 15, 2021, 6:09pm UTC](https://forum.xojo.com/t/control-always-half-the-screen/62050/2 "2021-03-15T18:09:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jeremie\_L](https://forum.xojo.com/user_avatar/forum.xojo.com/jeremie_l/32/150_2.png) [@Jeremie\_L](https://forum.xojo.com/u/Jeremie_L)\
**Post date:** [March 15, 2021, 9:10pm UTC](https://forum.xojo.com/t/control-always-half-the-screen/62050/3 "2021-03-15T21:10:16Z")

</div>

> [@Edwin\_van\_den\_Akker](#):
>
> 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.

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Edwin\_van\_den\_Akker](https://forum.xojo.com/user_avatar/forum.xojo.com/edwin_van_den_akker/32/1063_2.png) [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [March 15, 2021, 9:29pm UTC](https://forum.xojo.com/t/control-always-half-the-screen/62050/4 "2021-03-15T21:29:42Z")

</div>

Thank you Jeremie!  
That is an interesting approach!