Componente para menu carrusel

[MaxiDucoli]

Buenas tardes.
Vengo con otra consulta por que la verdad es que estoy en la nada misma.
Siempre usé los componentes de delphipor defecto o alguno que ha hecho algún programador y he bajado de acá o de alguna otra página.
Vengo con la idea de hacer un frontend para lanzar emuladores desde hace rato y de a poco voy queriendo agregar más cosas o tratar de en vez de usar uno hecho y yo solo agregarle scripts, hacerlo por mi mismo.
Pero estoy medio "en bolas" como se dice acá en Argentina y quisiera saber si alguien puede orientarne para saber qué leer y qué cosas tengo que aprender.

Mi idea es hacer un menú que se parezaca al de la foto que voy a poner en el siguiente link: https://www.creativosonline.org/blog...usel-react.jpg

Pero les digo la verdad.
No tengo ni la menor idea de donde empezar, qué componente usar para modificarlo y poder hacer algo parecido, no sé como hacer para que ese componente se alinie a la izquierda, derecha, centro, arriba o abajo y de ser posible hacerlo tipo abanico también es esos alineamientos.


No les estoy pidiendo código ni nada por el estilo, aunque si existe algo parecido me vendría bien. Lo que necesito que me digan es qué se usa para hacer este tipo de componentes o qué componente se modifica para partir de ese y hacer lo que más o menos quiero.
Si tienen información de lectura sobre este tipo de cosas también sería genial y de esta manera lo trataré de hacer yo mismo por que creo que ya es hora de dejar de pedir cosas "prestadas" y poder hacerlas yo mismo o por lo menos tratar tantas veces como pueda hasta decir que no me salen.

Alguien tiene idea de estas cosas por acá????

Muchas gracias!!!!!

[mamcx]

Ese tipo de "menu" no es muy ergonomico que digamos. Si va a hacer el ppal de la app es mejor usar algo diferente.

Si tienes relativamente pocas opciones, un grid de botones con iconos es mejor.

Si son muchas, usa un menu tradicional.

Con respecto a como alinear y todo eso, delphi tiene buenas opciones. Varia ligeramente si usa VCL o FMX pero hay una propiedad ALIGN y también se combinan con LAYOUTs. Con respecto a qué puedes usar depende de la version de Delphi.

[MaxiDucoli]

Empezado por mamcx

Ese tipo de "menu" no es muy ergonomico que digamos. Si va a hacer el ppal de la app es mejor usar algo diferente.

Si tienes relativamente pocas opciones, un grid de botones con iconos es mejor.

Si son muchas, usa un menu tradicional.

Con respecto a como alinear y todo eso, delphi tiene buenas opciones. Varia ligeramente si usa VCL o FMX pero hay una propiedad ALIGN y también se combinan con LAYOUTs. Con respecto a qué puedes usar depende de la version de Delphi.

Tengo Community 10.3.3
La idea es mandar un fondo, ese menú o uno tipo abanico (esos mismos graficos pero alineados a la izquierda o derecha y en forma de semi círculo) y dicen que FMX sería ideal para esto, pero no sé mucho de ese tampoco.

Vi videos de FMX haciendo un menú parecido al instagram, pero por lo que entendí lo hace en tiempo de diseño o no entendí muy bien el video.
La idea es cargar una lista de imágenes que van a estar dentro de un directorio y que esas imágenes se pongan en ese "carrrousel" del menú y al clickear con el teclado o mouse entre a otro menú un poco más cargado con una lista de juegos para emulaores.

Por lo que estoy viendo o leyendo estoy muy "verde" todavía para todo esto, pero si me orientas con esa idea del Align o Layout iría probando con eso.
También vi unas transciciones que FMX tiene para los controles que están muy buenas.

Muchas gracias!!!!!

[mamcx]

Deberías prestar atención a material que enseñe los fundamentos. Como alinear un control es algo básico.

Sigo pensando que un carrusel no es una buena idea como menu.

Con respecto a como hacerlo, debes pensar en componente y capas.

De la imagen que mandaste:

- Una caja que contiene todo (layer 1)

- Un rectángulo * "opción de menu"
- Un label encima del rectangulo, centrado

o

- Un boton sin margenes y fondo plano

De aqui a como distribuirlo dependera. Si es un grid de botones, entonces es muy simple. Cojes un grid y lo llenas de los botones.

Con un carrusel es MUCHO mas complejo, porque tienes que hacer animaciones, pintados parciales y otras chorradas, que ademas terminaran no siendo muy amigables para un menu.

De ahi mejor usar un control hecho.

---

Yo creo que lo que quieres hacer es mas como esto:



Es mucho mas intuitivo un grid de botones. Si quieres tener el "splash" dramatico, solo muestra 1 a la vez, el mas destacado.

[MaxiDucoli]

Empezado por mamcx

Deberías prestar atención a material que enseñe los fundamentos. Como alinear un control es algo básico.

Sigo pensando que un carrusel no es una buena idea como menu.

Con respecto a como hacerlo, debes pensar en componente y capas.

De la imagen que mandaste:

- Una caja que contiene todo (layer 1)

- Un rectángulo * "opción de menu"
- Un label encima del rectangulo, centrado

o

- Un boton sin margenes y fondo plano

De aqui a como distribuirlo dependera. Si es un grid de botones, entonces es muy simple. Cojes un grid y lo llenas de los botones.

Con un carrusel es MUCHO mas complejo, porque tienes que hacer animaciones, pintados parciales y otras chorradas, que ademas terminaran no siendo muy amigables para un menu.

De ahi mejor usar un control hecho.

---

Yo creo que lo que quieres hacer es mas como esto:



Es mucho mas intuitivo un grid de botones. Si quieres tener el "splash" dramatico, solo muestra 1 a la vez, el mas destacado.

Gracias por responder-

Aspiro a algo así:
https://emulationstation.org/assets/...ing_system.png

O ese mismo menú en vertical a los márgentes o en forma de carrousel a los costados.

Lo del grid no lo entiendo.
Un grid comun con botones? y se puede hacer invisible ese grid?

[Neftali [Germán.Estévez]]

Con las posibilidades de Firemonkey en cuanto a animciones yo creo que deberías hacer pruebas, porque creo que deberías poder conseguirlo.
Es más, he recordado que uno de los primeros videos de presentación de FireMonkey era justo un carrusel de imágenes como el que necesitas.
Buscando, he encontrado el vídeo aquí (mira a partir del minuto 1).


Ese código de ejempo es este (http://docwiki.embarcadero.com/CodeE...ireFlow_Sample) y se puede descargar del repositorio de github de Embarcadaero.

https://github.com/Embarcadero/RADSt...rface/FireFlow


He probado a compilarlo con las versiones nuevas (10.3) y lo hace sin problemas.

[MaxiDucoli]

Empezado por Neftali [Germán.Estévez]

Con las posibilidades de Firemonkey en cuanto a animciones yo creo que deberías hacer pruebas, porque creo que deberías poder conseguirlo.
Es más, he recordado que uno de los primeros videos de presentación de FireMonkey era justo un carrusel de imágenes como el que necesitas.
Buscando, he encontrado el vídeo aquí (mira a partir del minuto 1).


Ese código de ejempo es este (http://docwiki.embarcadero.com/CodeE...ireFlow_Sample) y se puede descargar del repositorio de github de Embarcadaero.

https://github.com/Embarcadero/RADSt...rface/FireFlow


He probado a compilarlo con las versiones nuevas (10.3) y lo hace sin problemas.

GRACIAS!!!!!

Me cansé de buscar (por lo que veo busqué mal) por todos lados, miré montón de videos de Delphi Academy, puse Carrousel, menú de imágenes, ya ni me acuerdo cuantas cosas y mirá qué maravilla que me acabas de dar!!!!

También busqué en Neftali y de ahí me "robé" TSelectOnRuntime pero no me funciona en FMX (le cambié la parte de control : TWincontrol por control : VCL.Controls.Controls pero al querer usarlo en tiempo de ejecución dió error) así que lo voy a mirar y re mirar hasta entenderlo.

MUCHÍSIMAS GRACIAS OTRA VEZ!!!!!

Y aprovecho a agradecerte directamente Neftali (espero que sea el mismo de la página por que si no qué vergüenza ) por tu gran blog del que me ha sacado siempre de alguna duda y con el que he aprendido a escribir mucho más que lo que era edit1.text := 'Hola';

Muchas gracias a vos por esa gran ayuda de años!!!!!

[mamcx]

Empezado por MaxiDucoli

Lo del grid no lo entiendo.
Un grid comun con botones? y se puede hacer invisible ese grid?

Claro. Todos los controles tienen un conjunto de propiedades comunes como el background, border, foreground. Usando solo eso se puede hacer todo. Con respecto al background, lo puedes "llenar" como quieras, incluidos otros controles.

Cuando se diseña una UI, uno debe pensar "como se organiza" (layout) y "como estilizo" (ie: aplicar colores y formas) para llegar al objetivo. Esto es especialmente el caso si se quiere hacer algo desde 0.

El truco es no pensar en lo que directamente ves, con colores y todo, sino separar la forma(layout) del estilo.

Un grid es una sequencia de controles en filas y columnas, con separacion entre ellos.

Un boton es una rectangulo con border estilizado y un label en el centro.

Un label es un conjunto de caracteres de una fuente con un fondo transparente.

etc.

Es lo mismo que con clases y objetos. Los controles tienen sus abstracciones, y se construyen haciendo composicion, mezclando en capaz un control con otros.

[Casimiro Notevi]

Empezado por MaxiDucoli

Y aprovecho a agradecerte directamente Neftali (espero que sea el mismo de la página por que si no qué vergüenza ) por tu gran blog del que me ha sacado siempre de alguna duda y con el que he aprendido a escribir mucho más que lo que era edit1.text := 'Hola';
Muchas gracias a vos por esa gran ayuda de años!!!!!

Es el mismo, inimitable e inconfundible Neftali

[MaxiDucoli]

Empezado por mamcx

Claro. Todos los controles tienen un conjunto de propiedades comunes como el background, border, foreground. Usando solo eso se puede hacer todo. Con respecto al background, lo puedes "llenar" como quieras, incluidos otros controles.

Cuando se diseña una UI, uno debe pensar "como se organiza" (layout) y "como estilizo" (ie: aplicar colores y formas) para llegar al objetivo. Esto es especialmente el caso si se quiere hacer algo desde 0.

El truco es no pensar en lo que directamente ves, con colores y todo, sino separar la forma(layout) del estilo.

Un grid es una sequencia de controles en filas y columnas, con separacion entre ellos.

Un boton es una rectangulo con border estilizado y un label en el centro.

Un label es un conjunto de caracteres de una fuente con un fondo transparente.

etc.

Es lo mismo que con clases y objetos. Los controles tienen sus abstracciones, y se construyen haciendo composicion, mezclando en capaz un control con otros.

Lo que pasa es que tengo un lio de conceptos en la cabeza con todo esto.
Siempre use delphi, empece con visual basic hace como 20 años,pero todo siempre como hobbie.
Todo se diói por la edición del juego Winnng Eleven de playstation, ahí agarré visual basic y después un amigo brasilero me presentó a Delphi y nunca más lo "largué".
Lo malo de todo esto es que como no trabajo en nada relacionado a la programación y demás, nunca le dediqué el tiempo y la lectura de aprendizaje necesario y el tiempo me fue devorando desde Delphi 7 hasta hoy que ya no entiendo más nada.
Nunca aprendí a hacer cosas complejas, ni componentes (eso creía, pero me di cienta que los puedo "modificar" directamente y es como hacerlos) y muchos conceptos hoy cambiaron y tengo como que empezar desde cero otra vez y ya la vejez me comió toda la paciencia.

Por lo que solo sé usar componentes de otros, modificar básicamente los componentes ya hechos por defecto y crear, modificar, classes, etc,etc.

Esto se me está complicando pero creo que es hora de dar un paso más allá que siempre y dedicarle algo de tiempo para entenderlo de una vez por todas.

[Neftali [Germán.Estévez]]

Empezado por MaxiDucoli

Y aprovecho a agradecerte directamente Neftali (espero que sea el mismo de la página por que si no qué vergüenza ) por tu gran blog del que me ha sacado siempre de alguna duda y con el que he aprendido a escribir mucho más que lo que era edit1.text := 'Hola';

Muchas gracias a vos por esa gran ayuda de años!!!!!

Sí es el mismo...
De nada.

[MaxiDucoli]

Uso este mismo post para poner esta maravilla.

Le pregunté a un programador de Youtube sobre este listado de imágenes y me lo acaba de responder maravillosamente y con un video, haciendo toda la base de lo que es el menú del que estoy interesado.

Lo subo por si a alguien le interesa para alguno de sus proyectos.