Gestion des évènements Android / IOS

Version imprimable

Bonjour,

Je ne sais pas si quelqu'un pourra répondre à ma question, néanmoins je la trouve intéressante à poser.

Je suis en train de développer une application mobile avec Delphi 11, sauf que, qui dit mobile, dit tablette, et donc 50 tailles d'écrans possible!

J'ai donc créer une petite fonction sur le FormResize toute simple pour adapter mes marges en fonction de l'écran :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 procedure TMain_Login.FormResize(Sender: TObject); begin if Main_Login.Width > 338 then Begin ELogin.Margins.Right := Main_Login.Width - 328; EPassword.Margins.Right := Main_Login.Width - 328; End Else Begin ELogin.Margins.Right := 10; EPassword.Margins.Right := 10; End; ELogin.Margins.Top := (LyMidRight.Height -(ELogin.Height +ELogin.Margins.Bottom +EPassword.Margins.Top) ) /2; //(Hauteur du conteneur - (taille de mes éléments) ) /2 LLogin.Margins.Top := (LyMidLeft.Height -(LLogin.Height +LLogin.Margins.Bottom +LMotDePasse.Margins.Top) ) /2; end;
Pour ce qui est de la marge à droite, ça fonctionne bien mes TEdit ne font pas tout l'écran, par contre pour la marge .Top, ça fonctionne uniquement sous android.

Sur Iphone on dirait que la marge est calculée par la taille de la fenêtre avant le FormResize, je m'explique, quand je bascule l'Iphone en mode paysage, donc avec une petite hauteur, je me retrouve avec une grande marge, et inversement en mode portrait.

Je suis sur qu'il doit y avoir une façon plus simple d'avoir une application qui s'adapte à un écran, mais pour le coup je ne vois pas de raison à ce que le code ne fonctionne pas sur les deux plateformes de la même manière :mur:

28/03/2022, 11h31
SergioMaster

Bonjour,

pour ce qui est de IOS et de la différence de comportement je ne pourrais répondre.
Par contre AMHA c'est inutilement compliqué, on pourrait :
Utiliser un TLayout (align = client) avec une indication de Paddings (contenant les controles)
et/ou utiliser au besoin les anchors des controles

Sans image écran difficile de se faire une idée
28/03/2022, 11h35
pprem

Bonjour

Sur iPhone tous les écrans doivent avoir plus de 328 pixels de large dans tous les sens, donc ça passe systématiquement dans ton premier cas. du coup, tel que je comprends ton code, les Edit font 328 pixels de large en permanence.

Ce qui m'intrigue, c'est ton besoin de faire des calculs pour adapter ton écran.

L'avantage de FireMonkey c'est qu'il y a assez d'alignements et de possibilités d'entassement des composants pour justement ne jamais avoir ça à faire. (ou en tout cas très rarement)

A quoi veux-tu que ton écran ressemble ? Un Login / Password dans un pavé centré ?
28/03/2022, 12h08
PetitBoutDeCode

1 pièce(s) jointe(s)

Pièce jointe 616300

Effectivement, ce sera sans doute plus clair comme ça

Donc en haut nous avons un logo(caché :mrgreen:), en bas j'ai un deuxième layout, qui me sert de pied de page.

Au milieu, j'ai un layout divisé en 3, une partie pour les textes, une autre pour les Edits et un pour le bouton.

Pour la règle sur la largeur, dès que mon écran passe une certaine largeur, j'augmente la marge coté droit pour que mon Edit ne dépasse pas une certaine taille malgré son alignement (Top).

Citation:

A quoi veux-tu que ton écran ressemble ? Un Login / Password dans un pavé centré ?

Exactement! Sauf que je voulais le faire en runtime parce que je ne me suis pas encore penché sur les possibilités que nous offres Delphi à ce niveau (c'est d'ailleurs ce que je vais faire du coup).

C'était juste pour soulever le fait que la même fonction ne s'exécute visiblement pas au même moment sous Android ou IOS, enfin en apparence..
29/03/2022, 08h50
pprem

Ok, donc dans ton cas je verrais plus :

un TLayout avec une taille fixe, centré dans l'écran
- un TGridPanelLayout de deux lignes, deux colonnes, aligné en Top, pour les libellés et champs de saisie
- un TLayout aligné en Top pour le bouton
- un TLayout aligné en Top pour le texte du bas

Aucune raison de jouer avec les marges si tu veux un truc à taille fixe (en revanche, sur le onResize de la fiche, assure toi quand même que les trucs à taille fixe ne débordent pas de l'écran pour les réduire), profite qu'on puisse empiler les choses les unes dans les autres en FMX, ce qui est impossible ou plus compliqué en VCL.

Je te suggère de te mettre à jour sur les différentes solutions proposées avec FireMonkey pour gérer des interfaces sans penser aux positions et tailles des éléments.
30/03/2022, 22h12
PetitBoutDeCode

Oui je vois l'idée, pourquoi s'embêter a créer des évènements alors qu'il y a des tas d'outils a disposition pour alléger le code...

C'est sans doute que je suis un peu vieux jeu j'aime gérer certaines choses en runtime (il faut dire que je suis passé de Delphi 6 à 11 sans transition :mrgreen:).

J'ai bien étudier le lien et je suis fan des TGridPanelLayout maintenant :D.

Tu sais, aimer coder, c'est pas forcément une question d'âge... (#hum)

Exemple extrait du jeu Memory codé ce week-end :

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
procedure TfrmChallenge.FinDePartie;
var
  ZoneAffichageScoreFinal, ZoneHaut, ZoneBas: tlayout;
  VotreScore: TMotsEnImages;
  ValeurScore: TNombreEnImages;
  BoutonPartage: TBoutonPartage;
begin
  if assigned(BlocageEcranFinDePartie) then
    FreeAndNil(BlocageEcranFinDePartie);
 
  BlocageEcranFinDePartie := tlayout.Create(self);
  BlocageEcranFinDePartie.Parent := zoneDeJeu;
  BlocageEcranFinDePartie.Align := talignlayout.contents;
  BlocageEcranFinDePartie.HitTest := true;
 
  if TPlatformServices.Current.SupportsPlatformService
    (IFMXShareSheetActionsService) then
  begin
    BoutonPartage := TBoutonPartage.Create(BlocageEcranFinDePartie);
    BoutonPartage.Parent := self;
    BoutonPartage.Align := talignlayout.Center;
    BoutonPartage.OnClick := BoutonPartageClick;
  end;
 
  ZoneAffichageScoreFinal := tlayout.Create(BlocageEcranFinDePartie);
  ZoneAffichageScoreFinal.Parent := self;
  ZoneAffichageScoreFinal.HitTest := false;
  ZoneAffichageScoreFinal.Height := 180;
  ZoneAffichageScoreFinal.Align := talignlayout.top;
  if (position.Y > 50) then
    ZoneAffichageScoreFinal.Margins.top := 50 - position.Y
  else
    ZoneAffichageScoreFinal.Margins.top := 5 - position.Y;
 
  ZoneHaut := tlayout.Create(BlocageEcranFinDePartie);
  ZoneHaut.Parent := ZoneAffichageScoreFinal;
  ZoneHaut.HitTest := false;
  ZoneHaut.Height := 80;
  ZoneHaut.Align := talignlayout.top;
 
  VotreScore := TMotsEnImages.Create(BlocageEcranFinDePartie);
  VotreScore.name := '';
  VotreScore.Parent := ZoneHaut;
  VotreScore.HitTest := false;
  VotreScore.Height := 80;
  VotreScore.Align := talignlayout.Center;
  VotreScore.Value := 'Score final:';
  if VotreScore.Width > ZoneAffichageScoreFinal.Width then
    ZoneAffichageScoreFinal.Width := VotreScore.Width;
 
  ZoneBas := tlayout.Create(BlocageEcranFinDePartie);
  ZoneBas.Parent := ZoneAffichageScoreFinal;
  ZoneBas.HitTest := false;
  ZoneBas.Height := 80;
  ZoneBas.Align := talignlayout.bottom;
 
  ValeurScore := TNombreEnImages.Create(BlocageEcranFinDePartie);
  ValeurScore.name := '';
  ValeurScore.Parent := ZoneBas;
  VotreScore.HitTest := false;
  ValeurScore.Height := 80;
  ValeurScore.Align := talignlayout.Center;
  ValeurScore.Value := score;
  if ValeurScore.Width > ZoneAffichageScoreFinal.Width then
    ZoneAffichageScoreFinal.Width := ValeurScore.Width;
 
  ZoneScore.Visible := false;
end;

31/03/2022, 16h00
PetitBoutDeCode

2 pièce(s) jointe(s)
Tout à fait d'accord! C'est pourquoi c'est uniquement ma façon de coder que j'ai qualifié de vieux jeu, je ne voudrais froisser personne!

Pour en revenir à notre sujet, finalement il me reste toujours le problème du OnResize qui ne semble pas intervenir au bon moment coté Iphone...

J'ai placé un TStringGrid qui a deux colonnes, quand je passe mon écran en paysage ou portrait il faut donc que mes colonnes s'adaptent à la nouvelle dimension d'écran.
Code:

1 2 3 4 5 6 procedure TMain.FormResize(Sender: TObject); begin GridVente.Columns[0].Width := GridVente.Width / 2 ; GridVente.Columns[1].Width := GridVente.Width / 2 ; end;
Sur Android /Windows, aucun soucis, par contre sur IOS le résultat ressemble à ça :
Paysage:
Pièce jointe 616533
Portrait:
Pièce jointe 616534

Désolé d'être aussi insistant mais on dirait vraiment que le OnResize coté IOS intervient avant le redimensionnement tandis qu'il arrive après coté Windows/Android, ou alors j'ai raté quelque chose dans mon code, mais j'ai pas l'impression que ça soit le cas.
31/03/2022, 18h47
pprem

bizarre comme différence

tente onResized à la place

et remets nous ton code à jour si ça coince toujours car je n'ai pas noté de différence sur ce type de choses entre les différents OS, donc tu ne devrais pas avoir ça

C'est aussi peut-être le Sender qui ne va pas !

Le gestionnaire s'appelle FormResize donc surement le TForm comme Sender
Faudrait mettre sur le OnResize du GridVente :
Code:

1 2 3 4 5 6 procedure TMain.GridVenteResize(Sender: TObject); begin Assert(Sender = GridVente); GridVente.Columns[0].Width := GridVente.Width / 2 ; GridVente.Columns[1].Width := GridVente.Width / 2 ; end;
OnResized n'est pas documenté

Ca venait effectivement de la, il n'y a pas de OnResized sur les évènements de la Form elle même, par contre sur le OnResized du StringGrig ça fonctionne bien, c'est un petit peu dommage si on a plusieurs éléments a redimensionner, je voulais tous les gérer dans le même évènements mais bon..

Le code qui ne fonctionne pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
procedure TMain.FormResize(Sender: TObject);
begin
  GridVente.Columns[0].Width := GridVente.Width / 2 ;
  GridVente.Columns[1].Width := GridVente.Width / 2 ;
 
  GridSuivi.Columns[0].Width := GridSuivi.Width * 0.3;
  GridSuivi.Columns[1].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[2].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[3].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[4].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[5].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[6].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[7].Width := GridSuivi.Width * 0.1;
 
end;

Et celui qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
procedure TMain.GridSuiviResized(Sender: TObject);
begin
  GridSuivi.Columns[0].Width := GridSuivi.Width * 0.3;
  GridSuivi.Columns[1].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[2].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[3].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[4].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[5].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[6].Width := GridSuivi.Width * 0.1;
  GridSuivi.Columns[7].Width := GridSuivi.Width * 0.1;
end;
 
procedure TMain.GridVenteResized(Sender: TObject);
begin
  GridVente.Columns[0].Width := GridVente.Width / 2 ;
  GridVente.Columns[1].Width := GridVente.Width / 2 ;
end;

C'est juste un peu plus contraignant, mais apparemment c'est seulement IOS qui n'aime pas ce code, déjà que je n'ai jamais été fan d'Apple.. :mrgreen: