[x10-Android]Format page d'accueil appareil android

Bonjour

Je désires amélioré ma page d'acceuil dans mon application android et les formats que je peux appliqué dans X10 sont un peu petit je me retrouve avec un image au centre de l'écran ,le top et le bas noir le temp de l'ouverture.

voir 426X320.png 470X320.png 640X 480.png 960X720.png Est-ce qu'il a une particularité que je dois faire pour un affichage normal ou plein écran.

J'utilise un Asus avec écran 5.5 pcs pour mes essais.

Merci

Mario

il y a une petite astuce sous Android, tu peux utiliser des images 9 Patch

l'idée originale des images 9 Patch est de définir une zone étirable dans l'image, voir les images ici, elles sont explicites je trouve, les bords du bouton sont figés, c'est le centre qui est étiré quand on change la taille de l'image, du coup les bords ne sont pas floutés

ce n'est pas immédiat, mais voilà comment procéder.

1) il faut conserver la taille des images sinon l'IDE les refuses
2) il faut les renommer en .9.png
3) il faut en faire des images 9 patch, soit avec l'outils du SDK, soit directement avec Delphi (cf plus bas)
4) dans les options de déploiement, il faut décocher splash_image_def.xml et renommer les images (sur la cible) en splash_image_def.9.png

attention, j'ai constaté que sur un Galaxy S5 en portait, c'est l'image 470x320 qui est utilisée avec un facteur de zoom à 300% et en mode paysage...du coup l'image est tronquée !

l'autre approche serait de modifier le fichier splash_image_def.xml en se référant à la doc Android, ou de choisir soit même les images à déployer avec des tailles différentes que celles proposées par Delphi

voici le code que j'ai utilisé pour modifier mes PNG
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 procedure TForm1.Open1Click(Sender: TObject); var PNG : TPNGImage; x, y: Integer; Pix : pByteArray; begin if OpenPictureDialog1.Execute then // Choix de l'image begin Caption := OpenPictureDialog1.FileName; Image1.Picture.LoadFromFile(OpenPictureDialog1.FileName); if not (Image1.Picture.Graphic is TPNGImage) then // conversion en PNG si nécessaire begin PNG := TPNGImage.Create; try PNG.Assign(Image1.Picture.Graphic); Image1.Picture.Graphic := PNG; finally PNG.Free; end; end; PNG := Image1.Picture.Graphic as TPNGImage; PNG.CreateAlpha; // -> ajoute un canal alpha (si nécessaire) y := PNG.Height - 1; for x := 0 to PNG.Width - 1 do begin PNG.Pixels[x, 0] := 0; // effacer le pixels en haut et en bas PNG.Pixels[x, y] := 0; end; x := PNG.Width - 1; for y := 0 to PNG.Height - 1 do begin PNG.Pixels[0, y] := 0; // effacer les pixels à droite et à gauche PNG.Pixels[x, y] := 0; end; Pix := PNG.AlphaScanline[0]; for x := 0 to PNG.Width - 1 do begin Pix[x] := 0; // effacer le canal alpha de la première ligne end; for x := 1 to 5 do begin Pix[x] := $FF; // définir une zone d'étirement horizontale de 5 pixels à droite et à gauche de l'image Pix[PNG.Width - 1 - x] := $FF; end; for y := 1 to PNG.Height - 2 do begin Pix := PNG.AlphaScanline[y]; // effacer le canal alpha à droite et à gauche Pix[0] := 0; end; for y := 1 to 5 do begin Pix := PNG.AlphaScanline[y]; // définir une zone d'étirement verticale de 5 pixels en haut et en bas Pix[0] := $FF; Pix := PNG.AlphaScanline[PNG.Height - 1 - y]; Pix[0] := $FF; end; Pix := PNG.AlphaScanLine[PNG.Height - 1]; Pix[0] := 0; for x := 1 to PNG.Width - 2 do begin Pix[x] := $FF; // définir la zone sensible sur toute la largeur end; x := PNG.Width - 1; Pix[x] := 0; for y := 1 to PNG.Height - 2 do begin Pix := PNG.AlphaScanLine[y]; // définir la zone sensible sur toute la hauteur Pix[x] := $FF; end; end; end;
mon image contenant un logo au centre, je m'assure d'avoir une bordure d'au moins 6 pixels (1 pixel pour les informations 9-patch, et 5 pixels utilisés dans la l'étirement), c'est en fait le contraire de l'exemple du bouton, les bords monochromes sont étirés et le centre (le logo) reste à sa taille d'origine.

1 pièce(s) jointe(s)

Pour un rendu optimal et une gestion simplifiée, il faut dissocier l'image du bouton de son pictogramme.

Ça a plusieurs avantages :

si on a dix boutons identiques, ça permet de ne calculer qu'une image ;
le pictogramme sera toujours proportionnel (largeur-hauteur) et adapté au bouton dans sa taille (copié par stretching).

Je ne sais pas s'il est possible d'installer des polices sur les systèmes mobiles mais sous Windows et si le pictogramme est monochrome, créer une police TTF (style Wingdings) est la meilleure option.

ps: pour un bouton avec fond dégradé je ne dis pas mais pour un aplat, autant couper l'image par son centre. Un bouton rond deviendra un rectangle arrondi mais ressemblera toujours à quelque chose ;)

Pièce jointe 194573