<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>mobileScreen &#8211; Xojo Programming Blog</title>
	<atom:link href="https://blog.xojo.com/tag/mobilescreen/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.xojo.com</link>
	<description>Blog about the Xojo programming language and IDE</description>
	<lastBuildDate>Mon, 07 Oct 2024 19:34:21 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Welcome to Mobile Orientation Orientation!</title>
		<link>https://blog.xojo.com/2024/10/07/welcome-to-mobile-orientation-orientation/</link>
		
		<dc:creator><![CDATA[Geoff Perlman]]></dc:creator>
		<pubDate>Mon, 07 Oct 2024 19:34:19 +0000</pubDate>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Cross-Platform]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[mobileScreen]]></category>
		<guid isPermaLink="false">https://blog.xojo.com/?p=13840</guid>

					<description><![CDATA[Mobile apps sometimes have to adjust to the user rotating the device from portrait mode to landscape mode and the reverse. For the most part,&#8230;]]></description>
										<content:encoded><![CDATA[
<p>Mobile apps sometimes have to adjust to the user rotating the device from portrait mode to landscape mode and the reverse. For the most part, Xojo handles this for you. For Android projects, if you have locked controls properly and for iOS projects, if you have set the constraints properly, the controls will do the right thing when the device is rotated.</p>



<p>If there&#8217;s something you need to do in code when the orientation changes, you&#8217;re in luck. The <a href="https://documentation.xojo.com/api/user_interface/mobile/mobilescreen.html#mobilescreen-methods">MobileScreen</a> class has an <a href="https://documentation.xojo.com/api/user_interface/mobile/mobilescreen.html#mobilescreen-orientationchanged">OrientationChanged</a> event. When this event fires, that means the user has rotated their device and the orientation has changed. This is where your code would go should you need to respond to an orientation change.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Note: If you need to know when the screen has changed in size, that&#8217;s what the <a href="https://documentation.xojo.com/api/user_interface/mobile/mobilescreen.html#mobilescreen-resized">Resized</a> event is for (at least on iOS &#8211; it&#8217;s not yet supported for Android).</p>
</blockquote>



<p>What might not be immediately intuitive or obvious is that rotating your device does not automatically mean the orientation has changed. Consider the following example project that displays the Resized and OrientationChanged events in a table when they occur. While this is on iOS, it works the same way (without the Resized event) on Android. The device is starting in portrait mode.</p>



<figure class="wp-block-image size-large is-resized"><img fetchpriority="high" decoding="async" width="513" height="1024" src="https://blog.xojo.com/wp-content/uploads/2024/10/1-1-513x1024.png" alt="" class="wp-image-13847" style="width:249px;height:auto" srcset="https://blog.xojo.com/wp-content/uploads/2024/10/1-1-513x1024.png 513w, https://blog.xojo.com/wp-content/uploads/2024/10/1-1-150x300.png 150w, https://blog.xojo.com/wp-content/uploads/2024/10/1-1-768x1534.png 768w, https://blog.xojo.com/wp-content/uploads/2024/10/1-1-769x1536.png 769w, https://blog.xojo.com/wp-content/uploads/2024/10/1-1.png 806w" sizes="(max-width: 513px) 100vw, 513px" /></figure>



<p>We will focus on just the OrientationChanged events for now. It gets an initial OrientationChanged event. Then the user rotates their phone clockwise enough that the orientation is changed from portrait to landscape.</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" width="1610" height="805" src="https://blog.xojo.com/wp-content/uploads/2024/10/2-1024x512.png" alt="" class="wp-image-13850" style="width:471px;height:auto" srcset="https://blog.xojo.com/wp-content/uploads/2024/10/2-1024x512.png 1024w, https://blog.xojo.com/wp-content/uploads/2024/10/2-300x150.png 300w, https://blog.xojo.com/wp-content/uploads/2024/10/2-768x384.png 768w, https://blog.xojo.com/wp-content/uploads/2024/10/2-1536x768.png 1536w, https://blog.xojo.com/wp-content/uploads/2024/10/2.png 1610w" sizes="(max-width: 1610px) 100vw, 1610px" /></figure>



<p>You can see that another OrientationChanged event has fired as you&#8217;d expect. Next the user rotates the phone clockwise again.</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" width="512" height="1024" src="https://blog.xojo.com/wp-content/uploads/2024/10/3-512x1024.png" alt="" class="wp-image-13851" style="width:267px;height:auto" srcset="https://blog.xojo.com/wp-content/uploads/2024/10/3-512x1024.png 512w, https://blog.xojo.com/wp-content/uploads/2024/10/3-150x300.png 150w, https://blog.xojo.com/wp-content/uploads/2024/10/3-768x1536.png 768w, https://blog.xojo.com/wp-content/uploads/2024/10/3.png 806w" sizes="(max-width: 512px) 100vw, 512px" /></figure>



<p>Now the phone is upside down. Notice, however, the orientation from the perspective of the OS has not changed. The layout is still in landscape orientation. This is not a bug. The device does not support portrait mode when the device is turned upside down. Thus the layout is still in landscape orientation and thus no OrientationChanged event has fired because there has been no orientation change.</p>



<p>Next the user rotates the phone clockwise yet again.</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" width="1024" height="513" src="https://blog.xojo.com/wp-content/uploads/2024/10/4-1024x513.png" alt="" class="wp-image-13852" style="width:537px;height:auto" srcset="https://blog.xojo.com/wp-content/uploads/2024/10/4-1024x513.png 1024w, https://blog.xojo.com/wp-content/uploads/2024/10/4-300x150.png 300w, https://blog.xojo.com/wp-content/uploads/2024/10/4-768x384.png 768w, https://blog.xojo.com/wp-content/uploads/2024/10/4-1536x769.png 1536w, https://blog.xojo.com/wp-content/uploads/2024/10/4.png 1610w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>You might think that an OrientationChanged event would fire, but it doesn&#8217;t. Why not? Because as far as the OS is concerned, the layout is still in landscape orientation. It has not changed its orientation. Finally, the user rotates the device clockwise once last time.</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" width="512" height="1024" src="https://blog.xojo.com/wp-content/uploads/2024/10/5-512x1024.png" alt="" class="wp-image-13853" style="width:334px;height:auto" srcset="https://blog.xojo.com/wp-content/uploads/2024/10/5-512x1024.png 512w, https://blog.xojo.com/wp-content/uploads/2024/10/5-150x300.png 150w, https://blog.xojo.com/wp-content/uploads/2024/10/5-768x1536.png 768w, https://blog.xojo.com/wp-content/uploads/2024/10/5.png 806w" sizes="auto, (max-width: 512px) 100vw, 512px" /></figure>



<p>This time the orientation has changed from landscape to portrait and thus the OrientationChanged event fired. Given that the initial OrientationChanged event fired when the app launched, out of the four 90 degree clockwise rotations, only two orientation changes occurred and thus only two OrientationChanged events fired.</p>



<p>This is one of those cases where what is initially intuitive turns out to be wrong until you look more closely at what is really going on.</p>



<p><em>Geoff Perlman is the Founder and CEO of Xojo. When he’s not leading the Xojo team he can be found playing drums in Austin, Texas and spending time with his family.</em></p>



<ul class="wp-block-social-links has-normal-icon-size is-content-justification-center is-layout-flex wp-container-core-social-links-is-layout-16018d1d wp-block-social-links-is-layout-flex"><li class="wp-social-link wp-social-link-facebook  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/goxojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>

<li class="wp-social-link wp-social-link-x  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://x.com/xojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg><span class="wp-block-social-link-label screen-reader-text">X</span></a></li>

<li class="wp-social-link wp-social-link-linkedin  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/xojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg><span class="wp-block-social-link-label screen-reader-text">LinkedIn</span></a></li>

<li class="wp-social-link wp-social-link-github  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://github.com/topics/xojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg><span class="wp-block-social-link-label screen-reader-text">GitHub</span></a></li>

<li class="wp-social-link wp-social-link-youtube  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/c/XojoInc" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg><span class="wp-block-social-link-label screen-reader-text">YouTube</span></a></li></ul>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
