Comment créer une fenêtre HUD pour Firemonkey

Question

Je veux reproduire la fonctionnalité HUD de https://github.com/jdg/MBProgressHUD dans Delphi avec firemonkey.

Voici à quoi ressemble l'iPhone :

La question principale est de savoir comment rendre le formulaire semi-transparent et supprimer complètement les bordures.

Answer 1

Créez votre formulaire Firemonkey HD, définissez ses paramètres. Fill.Kind a bkNone et c'est Fill.Color a Null . De plus, il est possible de définir Transparency à True, et c'est BorderStyle a bsNone .

Créez un TRectangle (ou n'importe quelle forme), et définissez l'attribut Stroke.Kind à la propriété bkNone . Définissez-le Fill.Color a Gray c'est Opacity à 0,5.

Créer un TAniIndicator y TLabel avec le parent des deux comme formulaire. C'est Opacity reste à 1.0. En option, créez également un TImage et lui donner exactement la même taille et la même position que l'élément TAniIndicator .

A partir de là, il s'agit simplement de travailler avec TFloatAnimation sur le TAniIndicator lorsque vous souhaitez modifier l'image (une coche ou autre) et le texte de l'étiquette pour qu'il soit simplement remplacé par le message que vous souhaitez afficher. Idéalement, il suffit de créer une procédure qui accepte une chaîne de caractères ou un nombre entier comme variable, puis de modifier le texte et l'indicateur/l'image en conséquence. Par exemple ;

Procedure TForm1.Process(Mode : Integer);
Begin
 if Mode = 1 then
 begin
  AniIndicator1.Enabled := True;
  AniIndicator1.Visible := True;
  Image1.Visible := False;
  Label1.TextAlign := TTextAlign.taCenter; // Must be called to reset alignment
  Label1.Text := 'Loading';
 End
 else if Mode = 2 then
 Begin
  AniIndicator1.Enabled := False;
  AniIndicator1.Visible := False;
  Label1.TextAlign := TTextAlign.taCenter; // Must be called to reset alignment
  Image1.Bitmap.LoadFromFile('Tick.png');
  Image1.Visible := True;
  Label1.Text := 'Complete!';
 end;
end;

Vous pouvez ensuite créer un tpanel dans votre formulaire principal, puis ajouter le formulaire ci-dessus (qui contient l'option TAniIndicator, label, and rectangle ) comme composant enfant. Vous appelez ensuite la procédure que vous avez créée avec une variable de mode valide et elle s'exécutera comme vous l'avez indiqué dans le code. Il est assez facile d'ajouter d'autres modes et j'ai fait quelque chose de similaire avec l'une de mes propres applications (bien qu'il s'agissait d'une application liée à TRectangle plutôt que de créer un indicateur).