Layout on iOS differs from Layout on Android

Question

I am getting (remaining) very frustrated with my choice to use Flex and Adobe products for my mobile app. Adobe making SWFLoader an available object in mobile WITHOUT TELLING US IT WON'T WORK IN PRODUCTION cost me a lot of time and money. My last post here was at the beginning of November when I believed I was about ready to deploy my app but I've had to take all this time to re-write it given that SWFLoader was added to the dist just to make it possible for programmers to really go the wrong direction. Sorry to be so annoyed but honestly, this has cost me a lot of money and I don't have the rest of my life to screw around with software that does not do what the vendor says it will do.
In any event, my latest frustration, now that I'm back to being done with all the re-coding aspects of the app, is getting it to lay out on screen properly. On my Android device, I just add the flex component to the screen, find the registration point, center on that and it lays out properly. In iOS, it does not work. Here is an example of laying out a screen with a center registration point.
var xPixels:uint = Capabilities.screenResolutionX;
var yPixels:uint  = Capabilities.screenResolutionY;
                if(xPixels < yPixels) {
                    //phone is tilted and we're measuring the incorrect orientation.
                    //reverse x and y and double them to get proper screen dim.
                    var yPix:uint = xPixels + xPixels;
                    xPixels = yPixels + yPixels;
                    yPixels = yPix;
                //the following will be sure that we've centered the
                //screen.
                xPixels = xPixels / 2;
                yPixels = yPixels / 2;
               this.busyLoader = new LoaderMessageCurtain;
                busyLoader.x = xPixels;
                busyLoader.y = yPixels;               
                enemyViewContainer.addChild(busyLoader);
                loaderShowing = true;
In the above code, busyLoader was created in FlashPro (as all my screens and animations are). It was converted to a Flex component. It has  registration at the center of the screen. On Android, this code causes the screen to lay out properly. On iOS, I'll get the top left corner in the center of the screen. WHY?????????????? WHY, WHY, WHY? I'm sick of it. Can anyone help me understand the voodoo that is going on behind the scenes to actually be done with this project with a professional looking piece of software that behaves as expected on ALL platforms it is touted as being able to be run on?
Notice as well that on Android, I don't have to tell busyLoader what dimensions it is. That's great. However, on iOS, if I don't set the width and height of the component, it will be giant or super small but not properly sized in either case. When I do set the dimensions, the outcome is problematic. Sometimes it fits and sometimes I need to add or subtract an arbitrary number of pixels to get it size properly. Sigh.
Also, I write software on a large monitor. Using the emulators to lay out code is a total waste. If I use the iPhone 4 emulator, for instance, it reports that my screen size is 1900 by 1200. Well, my monitor is 1900 by 1200 but an iPhone is not (it's 960 by 640 if I recall). It does me no good to have an emulator lay out based on my screen size. That too has cost me dearly. No offense and your tools are cool and I hope that I'll be able to solve my frustrations with Flex and continue to use your tools, but why don't you guys try doing what I do before I release software... make sure it works?

Answer 1

The reason the objects have a center registration is because the animator was trying to ensure that the animations work for different screen sizes without changing the length to width ratio of the animations. He drew a black border around the entire stage. On platforms where the screen does not fill the stage properly, the black border shows up at bottom. While I will make sure that he keeps them registered at top left from now on, I don't see why that makes any difference. A center point is a center point and should work as well as any other point on a screen (I would think).
Well the problem is that it requires you to know ahead of time how a particular asset is registered in order to properly layout and position it through code. Display objects are much easier to work with if you can assume they are always registered in their natural top left corner, and should not extend passed the desired width/height (IE. setting a negative x/y value to get a "border"). This allows the developer to know exactly where it should be positioned based on it's measured size, without having to worry about varying registration points.
I'm very interested in your thoughts on the Capabilities.screenResolutionX and Y function. Given that screens are not laying out properly without explicitly setting their size, and I want them to be the size of the screen in question (it's a full-screen mobile app), I have no choice but to call Capabilities.screenResolution X and Y and set myFlexComp.w and h as these values. If there is a better way to do this, please point me toward the resource so I can learn about it.
One should never assume the application fits the entire screen (as you have seen first hand). There are numerous better way to do this. It really depends on how your application is set up.
Here is an example AIR app that shows one possible way these assets can be correctly imported and positioned within your application. If you run the app and resize the window, you will see that the icon will always remain centered and the background will always fill the size of the window (notice how the MainView_background symbol has 9-slice scaling enabled in the fla, which is how the border remains a uniform size regardless of the window size).
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                                                                              xmlns:views="views.*" width="1024" height="768">
               <fx:Style>
                              @namespace s "library://ns.adobe.com/flex/spark";
                              @namespace views "views.*";
                              views|MainView
                                             backgroundClass: Embed(source="assets.swf", symbol="MainView_background");
                                             iconClass: Embed(source="assets.swf", symbol="MainView_icon");
               </fx:Style>
               <views:MainView top="0" left="0" bottom="0" right="0" />
</s:WindowedApplication>
package views
               import flash.display.DisplayObject;
               import mx.core.IFlexDisplayObject;
               import mx.core.ILayoutElement;
               import mx.core.UIComponent;
                * This class takes 2 styles for a background and icon class. The background is
                * scaled to the size of the component, while the icon is centered within it.
                * I also copied a few utility methods from the MobileSkin to show how the various
                * class formats are supported.
               public class MainView extends UIComponent
                              public function MainView()
                                             super();
                               * Copied from spark.skins.mobile.supportClasses.MobileSkin
                              public static function getElementPreferredHeight(element:Object):Number
                                             if(element is ILayoutElement)
                                                            return ILayoutElement(element).getPreferredBoundsHeight();
                                             else if(element is IFlexDisplayObject)
                                                            return IFlexDisplayObject(element).measuredHeight;
                                             else
                                                            return element.height;
                               * Copied from spark.skins.mobile.supportClasses.MobileSkin
                              public static function getElementPreferredWidth(element:Object):Number
                                             if(element is ILayoutElement)
                                                            return ILayoutElement(element).getPreferredBoundsWidth();
                                             else if(element is IFlexDisplayObject)
                                                            return IFlexDisplayObject(element).measuredWidth;
                                             else
                                                            return element.width;
                               * Copied from spark.skins.mobile.supportClasses.MobileSkin
                              public static function setElementPosition(element:Object, x:Number, y:Number):void
                                             if(element is ILayoutElement)
                                                            ILayoutElement(element).setLayoutBoundsPosition(x, y, false);
                                             else if(element is IFlexDisplayObject)
                                                            IFlexDisplayObject(element).move(x, y);
                                             else
                                                            element.x = x;
                                                            element.y = y;
                               * Copied from spark.skins.mobile.supportClasses.MobileSkin
                              public static function setElementSize(element:Object, width:Number, height:Number):void
                                             if(element is ILayoutElement)
                                                            ILayoutElement(element).setLayoutBoundsSize(width, height, false);
                                             else if(element is IFlexDisplayObject)
                                                            IFlexDisplayObject(element).setActualSize(width, height);
                                             else
                                                            element.width = width;
                                                            element.height = height;
                              private var _background:DisplayObject;
                              private var _icon:DisplayObject;
                              override protected function createChildren():void
                                             super.createChildren();
                                             var bgClass:Class = this.getStyle("backgroundClass") as Class;
                                             if(bgClass != null)
                                                            _background = new bgClass();
                                                            this.addChild(_background);
                                             var iconClass:Class = this.getStyle("iconClass") as Class;
                                             if(iconClass != null)
                                                            _icon = new iconClass();
                                                            this.addChild(_icon);
                              override protected function measure():void
                                             super.measure();
                                             //lets say our prefered dimensions are at least the size of the icon...
                                             if(_icon)
                                                            this.measuredWidth = getElementPreferredWidth(_icon);
                                                            this.measuredHeight = getElementPreferredHeight(_icon);
                                                            trace("this.measuredWidth = " + this.measuredWidth);
                                                            trace("this.measuredHeight = " + this.measuredHeight);
                               * @private
                              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                             trace("MainView.updateDisplayList(" + unscaledWidth + ", " + unscaledHeight + ")");
                                             super.updateDisplayList(unscaledWidth, unscaledHeight);
                                             //bet let's actually scale the contents to the full size as set by the parent...
                                             if(_background != null)
                                                            setElementSize(_background, unscaledWidth, unscaledHeight);
                                                            setElementPosition(_background, 0, 0);
                                             //and we will center the icon within those bounds...
                                             if(_icon != null)
                                                            var iconWidth:Number = getElementPreferredWidth(_icon);
                                                            var iconHeight:Number = getElementPreferredHeight(_icon);
                                                            var iconX:Number = (unscaledWidth - iconWidth) / 2;
                                                            var iconY:Number = (unscaledHeight - iconHeight) / 2;
                                                            trace("iconWidth = " + iconWidth);
                                                            trace("iconHeight = " + iconHeight);
                                                            trace("iconX = " + iconX);
                                                            trace("iconY = " + iconY);
                                                            setElementPosition(_icon, iconX, iconY);
This methodology uses the appropriate stages in the flex component life-cycle to create, measure, and position its contents.
*note: I was going to attach an example project, but I can't seem to figure out how to add an attachment. Send me a PM if you would like me to email it to you.
*edited a few typos*