ios - Adobe Flex Mobile 4.6 - Element positioning on iPad vs Android or BlackBerry seems off

Forgive me if this is a stupid question. I'm a bit new to mobile development.

I'm trying to test out building an app with Adobe Flex 4.6, for iPad, Android, and BlackBerry PlayBook devices.

I just built a real quick and dirty 'Hello World!' app to start with. I placed an image, a button, and a textbox on the page, making them all centered. I set the application DPI to 160.

Now when I ran the app on my PlayBook, everything looks fine and awesome. I'm going to get an iPad from a co-worker to test, but I tested it on another developer's iPod Touch, and the app did not scale well at all. The positioning of the image and textbox are off, and the textbox was even over top of the image a bit.

I ran the Flash emulator a couple of times to simulate a Galaxy Tab 10.1, and the elements looked okay, but were off center due to the larger screen size. So the app is not scaling at all.

Am I missing something here?

EDIT:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark">
<s:Label x="323" y="365" width="377" height="40" fontSize="36" text=""     
    textAlign="center" verticalAlign="middle" id="label1" />
<s:TextInput id="textbox1" x="365" y="227"/>
<s:Button id="button" x="433" y="289" width="159" label="Button"
          click="button_clickHandler(event)"/>
</s:Application>

1 Answer

  1. Brandon- Reply

    2019-11-13

    If you want your application center in all resolutions you don't have to use absolute coordinates. You need to use layouts. Like this for example:

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark">
    
        <s:layout>
            <s:VerticalLayout verticalAlign="middle" horizontalAlign="center" />
        </s:layout>
        <s:Label width="377" height="40" fontSize="36" text=""     
                 textAlign="center" verticalAlign="middle" id="label1" />
        <s:TextInput id="textbox1" />
        <s:Button id="button" width="159" label="Button"
                  click="button_clickHandler(event)"/>
    </s:Application>
    

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>