• Inicio
  • Documentación
  • Cursos
  • Blog
  • FAQs
  • Inicio
  • Documentación
  • Cursos
  • Blog
  • FAQs
inicio/Preguntas/UI / UX/Diseño de pantalla con grid de categorías
Búsquedas populares:¿Cómo agrego el Google API key?, Declaración de permisos de ubicación

Diseño de pantalla con grid de categorías

358 vistas 0 23 diciembre, 2020 Updated on 23 December, 2020 marino

En este tutorial, explicaremos como hacer una sección de categorías con scroll dentro de una pantalla. El resultado seria el siguiente:

Diseño:
Agrega un contenedor que tenga el 100% de ancho, de alto pueden ser los pixeles que tu consideres, yo recomiendo que sean más del 20% de tu pantalla principal.

Realiza el diseño de tu ficha (Que va a contener la categoría), el diseño puede ser como tu prefieras, lo único que debes respetar y es muy importante :eye: que el ancho no esté en % (porcentaje) si no en pixeles, como se muestra en la imagen. A lo alto sí puedes colocar en porcentaje.

:eye: No olvides colocar un nombre identificable tanto al texto de tu categoría como a la imagen.

Función:
Recuerda crear en tu base de datos la colección “Categorías”

*Sí quieres mostrar las categorías más importantes, o algunas categorías que consideres a especie de resumen, es importante agregar el campo “Índice” como se muestra en la imagen y enlistarlas.

En el Onload de tu pantalla agrega la función > Get database data

En esta ocasión quiero que se muestren las categorías filtradas por el índice que hicimos previamente y que muestre únicamente las primeras 4. (Esto es opcional)

Vas a seleccionar el botón azul (Open database browser) y vas a elegir tu colección “Categoría”, y vamos a salir de esta ventana.

En los callbacks > Data Obtained vas a agregar una función de Add collections to UI (Para crear la lista de categorías)

En tu Entry Vars > List data vas a agregar el PreviusOutputs > Get database data

Y activaremos el switch de Enable horizontal

Ahora tendrás que darle click al botón azul “Modify elements” > Elige el contenedor con la distribución que corresponde a categorías.

En List data vas a elegir el elemento “Imagen” > Control property > src > Y en la última opción (ListContext) vas a colocar el Atributo a sustituir (Igual que en tu base de datos), en este caso es Imagen

Lo mismo con el texto, eligiendo el Control property > text

Y listo, con esto tendrás un grid para tus categorías.

Relacionado

¿Esto te ayudó?

Si  No
Artículos similares
  • Tamaño de los pointer en un mapa
  • Como cambiar de color un elemento de la lista al seleccionarlo o des-seleccionarlo
  • Como reciclar una pantalla de estado de pedidos
  • Estructura básica de un “Menu tabs”
  • ¿Cómo cambiar el color de mi App? y qué paleta de color elegir
  • Cambiar el ICONO de mi App: Medidas y recomendaciones

Didn't find your answer? Contact Us

Leave A Comment Cancelar respuesta

Artículos populares
  • Paso a paso para publicar tu App en Play Store
  • Paso a paso para publicar tu App en App Store
  • Declaración de permisos de ubicación en segundo plano en Google Play (geolocation tracking)
  • ¿Cómo agrego el Google API key?
  • Pasos para publicar tu app en App Store
Categorías
  • Tiendas
  • Información
  • Plantillas
  • APK
  • Funciones
  • UI / UX
  • Controles
  • Precios
  • Integraciones
UI / UX
  • Diseño de pantalla con grid de categorías
  • Tamaño de los pointer en un mapa
  • Como cambiar de color un elemento de la lista al seleccionarlo o des-seleccionarlo
  • Como reciclar una pantalla de estado de pedidos
  • Estructura básica de un “Menu tabs”
  • ¿Cómo cambiar el color de mi App? y qué paleta de color elegir
Ver todos 24  

  Elementos sobrepuestos en una ventana

Conociendo la interfaz de la plataforma – Parte 2  

© 2020 Apphive Inc. Derechos reservados.
Búsquedas populares:¿Cómo agrego el Google API key?, Declaración de permisos de ubicación