Discussion :

[mario9]

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

[Paul TOTH]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Andnotor]

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