Ir al contenido



Foto

Material Design - Text Fields by Firemonkey


  • Por favor identifícate para responder
4 respuestas en este tema

#1 el-mono

el-mono

    Advanced Member

  • Miembros
  • PipPipPip
  • 117 mensajes

Escrito 05 julio 2018 - 05:06

Hola Gente les comparto un poco de código que descubrí en https://www.youtube....h?v=6J9qKvPfbiI

 

Lo que hace este codigo es que en nuestras aplicaciones Firemonkey nuestros TEdit se comporten como dicta Material Design.

 

Dejo adjunto mi codigo para que jueguen un poco.


delphi
  1. unit Unit7;
  2.  
  3. interface
  4.  
  5. uses
  6. System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  7. FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  8. FMX.Controls.Presentation, FMX.Edit, FMX.StdCtrls;
  9.  
  10. type THelperObject = Class Helper for TFMXObject
  11. Public
  12. procedure Caption(Desc: String);
  13. End;
  14.  
  15.  
  16.  
  17. type
  18. TForm7 = class(TForm)
  19. Edit1: TEdit;
  20. StyleBook1: TStyleBook;
  21. Edit2: TEdit;
  22. Edit3: TEdit;
  23. Edit4: TEdit;
  24. procedure FormCreate(Sender: TObject);
  25. procedure Edit1Enter(Sender: TObject);
  26. procedure Edit1Exit(Sender: TObject);
  27. private
  28. { Private declarations }
  29. public
  30. { Public declarations }
  31. end;
  32.  
  33. var
  34. Form7: TForm7;
  35.  
  36. implementation
  37.  
  38. {$R *.fmx}
  39.  
  40. { THelperObject }
  41.  
  42. procedure THelperObject.Caption(Desc: String);
  43. var
  44. lbl :Tlabel;
  45. begin
  46. lbl := TLabel.create(Self);
  47. lbl.Text := desc;
  48. lbl.Name := 'Label'+ self.Name;
  49. lbl.StyledSettings := [TstyledSetting.Family];
  50. lbl.Position.X := 3;
  51. lbl.Position.Y := 0;
  52. lbl.TextSettings.Font.Size := 18;
  53. lbl.TextSettings.FontColor := Talphacolors.Darkgrey;
  54. lbl.Parent := self;
  55.  
  56. end;
  57.  
  58. procedure TForm7.Edit1Enter(Sender: TObject);
  59. var
  60. runlbl: Tlabel;
  61. begin
  62. if (Sender as TEdit).text = '' then
  63. begin
  64. runlbl := Tlabel((Sender as TEdit).FindComponent('Label' + (Sender as TEdit).Name ));
  65. runlbl.AnimateFloat('Font.Size',9,0.1, TAnimationtype.InOut,tinterpolationType.Linear);
  66. runlbl.AnimateFloat('Position.y',-16,0.1, TanimationType.InOut, TInterpolationType.Linear );
  67. runlbl.FontColor := TAlphacolors.Blue;
  68. end;
  69.  
  70. end;
  71.  
  72. procedure TForm7.Edit1Exit(Sender: TObject);
  73. var
  74. runlbl: Tlabel;
  75. begin
  76. if (Sender as TEdit).text = '' then
  77. begin
  78. runlbl := Tlabel((Sender as TEdit).FindComponent('Label' + (Sender as TEdit).Name ));
  79. runlbl.AnimateFloat('Font.Size',14,0.1, TAnimationtype.InOut,tinterpolationType.Linear);
  80. runlbl.AnimateFloat('Position.y',3,0.1, TanimationType.InOut, TInterpolationType.Linear );
  81. runlbl.FontColor := TAlphacolors.Black;
  82. end;
  83.  
  84.  
  85. end;
  86.  
  87. procedure TForm7.FormCreate(Sender: TObject);
  88. begin
  89. Edit1.Caption('Nombre');
  90. Edit2.Caption('Domicilio');
  91. Edit3.Caption('Telefono');
  92. Edit4.Caption('Email');
  93.  
  94. end;
  95.  
  96. end.
  97.  

Lo que buscamos conseguir:

 

https://material.io/...xt-fields.html#

 

 

 

  


  • 0

#2 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.156 mensajes
  • LocationArgentina

Escrito 05 julio 2018 - 09:54

Por poco vuelo el hilo al ver el título en inglés.

 

¿Que es esto de Diseño Material? ¿Una nueva "regla" o "guía" que dicta como debiera de comportarse nuestros diseños de GUI?

En el enlace que apuntas, pareciera que esos Edits y estilos con sus funcionalidades parecerían tener más sentido cuando se trata de diseño web y/o en aplicaciones móviles. Para el entorno de escritorio no tanto.

 

Saludos,


  • 0

#3 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.385 mensajes
  • LocationRepública Dominicana

Escrito 07 julio 2018 - 06:32

Mi estimado Delphius, Material Design es un framework css+javascript al igual que Bootstrap, Kendo, Telerik, etc.. creado por google..


  • 0

#4 Agustin Ortu

Agustin Ortu

    Advanced Member

  • Moderadores
  • PipPipPip
  • 829 mensajes
  • LocationArgentina

Escrito 16 julio 2018 - 08:49

No es un framework, ni tampoco tiene mucho que ver con html o cualquier otra tecnologia web

 

Es simplemente el paradigma de Google de como se deben construir interfaces graficas. Originalmente fue pensado para dispositivos android. Tambien es cierto que hay implementaciones para la web. Te dice cosas como que colores usar, cuando y donde sombrear, el uso de animaciones, la profunidad, el uso de controles en su mayor parte "cuadrados" y no redondeados, etc

 

https://material.io/design/

 

Podria ser el analogo a "metro" de Microsoft para Windows (8 era?), o alguno de los sabores de Linux (GNOME, etc)


  • 0

#5 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.156 mensajes
  • LocationArgentina

Escrito 16 julio 2018 - 09:04

No es un framework, ni tampoco tiene mucho que ver con html o cualquier otra tecnologia web

 

Es simplemente el paradigma de Google de como se deben construir interfaces graficas. Originalmente fue pensado para dispositivos android. Tambien es cierto que hay implementaciones para la web. Te dice cosas como que colores usar, cuando y donde sombrear, el uso de animaciones, la profunidad, el uso de controles en su mayor parte "cuadrados" y no redondeados, etc

 

https://material.io/design/

 

Podria ser el analogo a "metro" de Microsoft para Windows (8 era?), o alguno de los sabores de Linux (GNOME, etc)

 

Gracias por la aclaración Agustín.

Le debería dar alguna leída más detallada, cuando tenga algo de tiempo. 8o|

 

Saludos,

PD: Se ha notado tu asuencia estas últimas semanas. ¡No te nos desaparezcas chango!


  • 0