Módulo 8: Iconos, Recursos y Recursos Visuales

Incorpora imágenes, iconos y recursos gráficos a tus interfaces

---

Objetivos de Aprendizaje

Al finalizar este módulo serás capaz de:

• Crear y gestionar archivos de recursos (.qrc)
• Usar imágenes en Labels mediante la propiedad pixmap
• Agregar iconos a botones y elementos de menú
• Usar imágenes de fondo y bordes con Style Sheets
• Seleccionar los formatos de imagen adecuados para cada caso
• Organizar recursos con prefixes
• Encontrar y usar iconos gratuitos de alta calidad

---

8.1 El Resource System de Qt

Qt tiene un sistema de recursos que te permite empaquetar imágenes, iconos y otros archivos dentro de tu aplicación. Es como las "Bibliotecas" de Adobe Creative Cloud.

¿Qué es un archivo de recursos (.qrc)?

Un archivo .qrc es un archivo XML que lista todos los recursos (imágenes, iconos, etc.) que tu aplicación necesita. Qt los compila dentro de la aplicación para que no necesites distribuir archivos de imagen por separado.

Cómo crear un archivo de recursos

1. Ve a Editar > Edit Resources (o haz clic en el icono de recursos en la toolbar)
2. Se abrirá el Resource Editor en la parte inferior
3. Haz clic en "New Resource File" (icono de documento en blanco)
4. Dale un nombre (ej: recursos.qrc) y guárdalo en tu proyecto
5. Haz clic en "Add Prefix" y escribe /iconos o /imagenes
6. Haz clic en "Add Files" y selecciona tus archivos de imagen/icono
7. Ahora puedes usar estos recursos en cualquier widget

📸 [PLACEHOLDER PARA IMAGEN]: Captura de pantalla del Resource Editor mostrando cómo agregar un prefix y archivos.

Estructura de un archivo .qrc

<RCC>
    <qresource prefix="/iconos">
        <file>iconos/guardar.png</file>
        <file>iconos/eliminar.png</file>
        <file>iconos/configuracion.svg</file>
    </qresource>
    <qresource prefix="/imagenes">
        <file>imagenes/logo.png</file>
        <file>imagenes/fondo.jpg</file>
    </qresource>
</RCC>

Cómo usar los recursos

Una vez agregados, los recursos se referencian con la sintaxis :/prefix/archivo:

💡 CONSEJO: Organiza tus recursos con prefixes como /iconos, /imagenes, /fondos. Es como organizar tus archivos en carpetas dentro de tu proyecto de diseño.

---

8.2 Formatos de Imagen Recomendados

Regla de oro

💡 CONSEJO: Para iconos, prefiere formato SVG porque escala a cualquier tamaño sin perder calidad. Un icono SVG de 24x24 se verá perfecto tanto en un botón pequeño como en uno grande.

---

8.3 Usar Imágenes en Labels

Un Label puede mostrar imágenes usando su propiedad pixmap.

Paso a paso

1. Selecciona un Label
2. En el Property Editor, busca la propiedad pixmap
3. Haz clic en el botón ... y selecciona "Choose Resource..."
4. Selecciona la imagen de tu archivo de recursos
5. Ajusta la propiedad scaledContents a true para que la imagen se ajuste al tamaño del Label

Propiedades importantes para imágenes en Labels

Label circular (avatar/foto de perfil)

Para crear un Label circular (como una foto de perfil):

QLabel#foto_perfil {
    border-radius: 60px; /* mitad del ancho/alto */
    border: 3px solid #41CD52;
}

💡 CONSEJO: Para que el border-radius funcione como círculo, el Label debe ser cuadrado y el radio debe ser la mitad del ancho. Ejemplo: Label de 120x120 con border-radius: 60px.

---

8.4 Iconos en Botones

Los botones pueden tener iconos además de texto. Esto hace tu interfaz más profesional e intuitiva.

Push Button con icono

1. Selecciona un Push Button
2. Busca la propiedad icon en el Property Editor
3. Haz clic en ... y selecciona "Choose Resource..."
4. Selecciona tu icono
5. Ajusta iconSize para controlar el tamaño del icono (ej: 24, 24)

Tool Button

El Tool Button está diseñado específicamente para iconos:

Dónde conseguir iconos gratuitos

---

8.5 Icono de la Ventana

Para agregar un icono a la barra de título de tu ventana:

1. Selecciona el Dialog o MainWindow
2. En el Property Editor, busca windowIcon
3. Haz clic en ... y selecciona "Choose Resource..."
4. Selecciona tu icono (preferiblemente .ico o PNG de 256x256)

---

8.6 Imágenes de Fondo y Bordes con Style Sheets

Imagen de fondo

/* Imagen de fondo que se repite (tile) */
QWidget {
    background-image: url(:/imagenes/fondo.png);
}

/* Imagen de fondo que no se repite */
QWidget {
    background-image: url(:/imagenes/header.png);
    background-repeat: no-repeat;
    background-position: top center;
}

/* Imagen de fondo que cubre todo el widget */
QWidget {
    background-image: url(:/imagenes/fondo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Nota: background-size puede no funcionar en todas las versiones de Qt */
}

Borde con imagen

QFrame {
    border-image: url(:/imagenes/borde.png) 10 10 10 10 stretch stretch;
}

Label con imagen de fondo

QLabel#banner {
    background-image: url(:/imagenes/banner.png);
    background-repeat: no-repeat;
    background-position: center;
    min-height: 150px;
}

---

8.7 Organizar Recursos en el Proyecto

Una buena estructura de carpetas para tus recursos:

mi_proyecto/
├── mi_app.ui
├── recursos.qrc
├── recursos/
│   ├── iconos/
│   │   ├── guardar.svg
│   │   ├── eliminar.svg
│   │   ├── configurar.svg
│   │   ├── usuario.svg
│   │   └── logo.png
│   ├── imagenes/
│   │   ├── banner.png
│   │   ├── fondo.jpg
│   │   └── avatar.png
│   └── fuentes/
│       └── MiFuente.ttf

💡 CONSEJO: Mantén todos tus recursos en una carpeta recursos/ organizada por tipo. Esto facilita la gestión y hace que el archivo .qrc sea más fácil de mantener.

---

8.8 Recursos Embebidos vs. Externos

Recursos embebidos (recomendado)

Los recursos se incluyen en el archivo .qrc y se compilan dentro de la aplicación.

Ventajas:

• No necesitas distribuir archivos de imagen por separado
• Los recursos siempre están disponibles
• Mejor rendimiento

Desventajas:

• La aplicación es más grande
• Cambiar una imagen requiere recompilar

Referencias externas (rutas absolutas)

Los recursos se referencian por ruta de archivo.

QLabel {
    background-image: url(C:/imagenes/fondo.png);
}

Ventajas:

• Puedes cambiar imágenes sin recompilar
• La aplicación es más pequeña

Desventajas:

• Debes distribuir las imágenes por separado
• Las rutas pueden romperse en otros sistemas

💡 CONSEJO: Siempre usa recursos embebidos (.qrc) para iconos y elementos de la interfaz. Usa referencias externas solo para imágenes que el usuario pueda cambiar (como un fondo personalizado).

---

Ejercicio Práctico del Módulo

🏋️ EJERCICIO 8: Tarjeta de Perfil con Foto e Iconos

>

Objetivo: Crear una tarjeta de perfil profesional con foto e iconos.

>

Pasos:

1. Descarga 4 iconos SVG gratuitos (usuario, email, teléfono, web) de [Feather Icons](https://feathericons.com) o [Heroicons](https://heroicons.com)

2. Descarga una imagen para usar como foto de perfil (puede ser cualquier imagen)

3. Crea un archivo de recursos (recursos.qrc)

4. Agrega un prefix /iconos y agrega los 4 iconos SVG

5. Agrega un prefix /imagenes y agrega la foto de perfil

6. Crea un Dialog de 350x450 píxeles con fondo oscuro (#1a1a2e)

7. Agrega un Frame como contenedor de la tarjeta:

- styleSheet: background-color: #2d2d3d; border-radius: 16px;

- minimumSize: 310x410

- Aplica un Layout Vertical

8. Agrega un Label para la foto de perfil:

- pixmap: selecciona tu imagen desde recursos

- scaledContents: true

- minimumSize: 120, 120

- maximumSize: 120, 120

- styleSheet: border-radius: 60px; border: 3px solid #41CD52;

- alignment: AlignCenter

9. Agrega un Label para el nombre:

- text: "Ana García"

- font: 18pt, Bold, blanco

- alignment: AlignCenter

10. Agrega un Label para la profesión:

- text: "Diseñadora UX/UI"

- font: 12pt, color verde (#41CD52)

- alignment: AlignCenter

11. Agrega un Label para la bio:

- text: "Apasionada por crear experiencias digitales memorables"

- font: 10pt, color gris (#aaa)

- wordWrap: true

- alignment: AlignCenter

12. Agrega una Horizontal Line como separador

13. Agrega 3 Tool Buttons con iconos (email, teléfono, web):

- iconSize: 24, 24

- toolButtonStyle: IconOnly

- styleSheet para cada uno:

`css

QToolButton {

background-color: transparent;

border: none;

padding: 8px;

}

QToolButton:hover {

background-color: #41CD52;

border-radius: 8px;

}

`

14. Coloca los 3 Tool Buttons en un Horizontal Layout centrado

15. Renombra todos los widgets

16. Guarda como tarjeta_perfil.ui

17. Presiona Ctrl+R y verifica que se vea como una tarjeta de presentación moderna

>

Resultado esperado: Una tarjeta de perfil elegante con foto circular, nombre, profesión, bio y botones de contacto con iconos.

---

Recursos Adicionales

---

Evaluación de Comprensión

1. ¿Qué es un archivo .qrc y para qué sirve?
2. ¿Cómo agregas una imagen a un Label?
3. ¿Qué propiedad debes activar para que una imagen se ajuste al tamaño del Label?
4. ¿Cuál es la sintaxis para referenciar un recurso en un Style Sheet?
5. ¿Qué formato de imagen recomiendas para iconos? ¿Por qué?
6. ¿Cómo cambias el icono de la ventana (barra de título)?
7. ¿Qué propiedad del Tool Button controla cómo se muestran el icono y el texto?
8. ¿Cuál es la ventaja de usar recursos embebidos vs. referencias externas?
9. ¿Cómo creas un Label circular para una foto de perfil?
10. ¿Menciona 3 fuentes de iconos gratuitos?

---

Módulo anterior: ← [Módulo 7: Propiedades Avanzadas](06-propiedades-avanzadas.md)

Siguiente módulo: → [Módulo 9: Menús y Toolbars](08-menu-toolbars.md)