Extra-large

Images

Il arrive souvent que l’on réalise une application mobile pour smartphone et qu’on la porte ensuite sur tablette.

Comment l’application s’adapte-t-elle à cette nouvelle largeur d’écran ?

iOS

Si l’application n’a pas été adaptée spécifiquement pour l’iPad, iOS propose de la faire fonctionner à sa taille iPhone, centrée à l’écran, sur fond noir. 

C’est ce que l’on constate sur cette copie d’écran de l’application Eurosports (à noter qu’existe une version spécifique iPad).

Photo

Une pastille affiche un bouton 2x qui permet de zoomer pour exécuter l’application à la taille de l’écran de l’iPad, au prix d’une pixellisation notable.

Pour Flex Mobiles ?

Le choix de la cible (iPhone et/ou iPad) se paramètre dans le fichier de description de l’application. Voici un exemple de paramétrage pour une application compatible avec les deux cibles de la plateforme iOS :

<iPhone>

<InfoAdditions><![CDATA[

<key>UIDeviceFamily</key> 

<array><string>1</string><string>2</string></array>

]]>

</InfoAdditions>

<requestedDisplayResolution>high</requestedDisplayResolution>

</iPhone>

Le tableau qui suit la clé UIDeviceFamily permet de restreindre ou non le support à une gamme donnée.  La chaine ci-dessous restreindrait à l’iPhone :

<array> <string>1</string> </array>

La chaîne <requestedDisplayResolution>high</requestedDisplayResolution> indique quand à elle si l’application utilise la définition standard 320×480 ou peut s’adapter au 640×960 (tout en continuant à s’afficher en 320×480 sur le 3GS).

Se reporter à la documentation d’Adobe :iOS Settings, http://help.adobe.com/en_US/air/build/WSfffb011ac560372f7e64a7f12cd2dd1867-80…

Et sur Android ?

Étirer ou zoomer

Depuis Android 3.0 (Honeycomb), la version du système de google conçue pour tablette, Android propose un redimensionnement automatique de l’application à la taille de l’écran.

Un article du monde informatique présentait cette fonctionnalité au moment de son annonce : http://www.lemondeinformatique.fr/actualites/lire-google-va-redimensionner-le…

La version 3.2 du système propose le choix entre étirer l’affichage de l’écran pour remplir l’écran (comme en 3.0) ou zoomer (équivalent au mode zoom 2x de l’iPad) :

000000022102

Pas le choix donc de pouvoir exécuter l’application à sa taille initiale comme sur l’iPad.

Et pour les applications adaptées ?

Si vous avez fait l’effort d’adapter l’application à un écran de tablette, vous souhaitez sans doute vous débarrasser de la possibilité de zoomer.

Il suffit pour cela de rajouter une déclaration supplémentaire dans la section Android du fichier de description :

<android>

<manifestAdditions><![CDATA[

<manifest android:installLocation= »preferExternal »>

<supports-screens android:xlargeScreens= »true » />

Cette option est décrite dans la documentation proposée par Google dans la section indiquée ci-dessous :

http://android-developers.blogspot.com/2011/07/new-mode-for-apps-on-large-scr…

Cette chaîne ne figure pas par défaut dans le fichier de description généré par Flash Builder. Cependant, lors de la préparation du package .apk, la totalité de la section manifestAdditions est recopiée dans le fichier attendu par Android pour déterminer les pré-requis de l’application. Il suffit donc de la rajouter manuellement dans votre fichier de description AIR. 

A partir d’Android 3.2, il est également posible de spécifier dans l’élément <supports-screens> un nombre minimal de pixels. Par exemple, android:requiresSmallestWidthDp= »600″ va imposer un minimum de 600 pixels, ce qui correspond généralement à une diagonale de 7″.

L’article Preparing for Handsets décrit très bien les différentes options disponibles ainsi que les techniques de compatibilité d’interface entre smartphone et tablette, mais ceci est une autre histoire !

Conclusion

Il est important de se familiariser avec les différentes sections du fichier de description pour garantir un bon déploiement sur les différents mobiles.

La documentation d’Adobe ne suffit pas forcément, car certaines options proposées par iOS ou Android sont décrites uniquement dans leur documentation respective.

A consulter l’article de Samir Moussouni « Applications Flex/AIR : mode zoom sur tablettes Android« .

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :