Discussion :

[PetitBoutDeCode]

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 :

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
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

[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

[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é ?

[PetitBoutDeCode]

Effectivement, ce sera sans doute plus clair comme ça

Donc en haut nous avons un logo(caché ), 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).

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..

[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.

[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 ).

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

[pprem]

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

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

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
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;