Question

Due to screen density of iPhone, image assets are developed larger. So, when specifying the icons and images to Flex components takes this form.

<s:ViewNavigator id="tab1" label="Tab1 width="100%" height="100%" firstView="views.Tab1">
        <s:icon>
            <s:MultiDPIBitmapSource source160dpi="@Embed('assets/tabIcon.png')"/>
        </s:icon>
</s:ViewNavigator>

Flex of course renders this correctly and adjusts the size to what it should be.

However, when I load images myself, they appear blown up as they would appear double in size.

This is how I use it when overriding the tab bar.

public class TabbedViewNavigatorTabBarSkin extends ButtonBarSkin
{

    [Embed (source="/assets/tabBar.png" )]
    private var TabBarPng:Class;

    override protected function createChildren():void
    {
        var bgb:Bitmap = new TabBarPng() ;

        addChild(bgb);
    }
}

This is when the image appears blown up. What am I doing wrong?

Answer 1

Well I think what you’re trying to get it to do can be achieved with the following code, this is basically going to negate the work done internally to scale the asset based on the screen size, while allowing it to scale other components based on the DPI, I’m not sure exactly how this will play out in practice.

        import mx.core.mx_internal;

…

        var bgb : Bitmap = new TabBarPng();
        bgb.scaleX = 1 / systemManager.mx_internal::densityScale;
        bgb.scaleY = 1 / systemManager.mx_internal::densityScale;

or another possibility I think is:

        var mul : MultiDPIBitmapSource = new MultiDPIBitmapSource();
        mul.source160dpi = new TabBarPng();

        var bgb : BitmapImage = new BitmapImage();
        bgb.source = mul;

        var gr : Graphic = new Graphic();
        gr.width = 100 / systemManager.mx_internal::densityScale; //not sure if you'd want densityScale being applied here or what?  Same below just a matter of testing on more devices
        gr.height = 100 / systemManager.mx_internal::densityScale;
        gr.addElement(bgb)
        addChild(gr);

[From MultiDPIBitmapSource API doc]

This class provides a list of bitmaps for various runtime densities. It is supplied as the source to BitmapImage or Image and as the icon of a Button. The components will use the Application.runtimeDPI to choose which image to display.

I think this documentation:

http://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c682e5a9412cf5976c17-8000.html

is probably still the clearest explanation you’ll find though it’s not entirely clear how this will affect the application at run-time on different devices. The best option is to just test on as many devices as you can (or need to support).