Saltar al contenido

GTK y Python: Cambiar el estilo de una GTKLabel

Pantalla principal de Pimagizer, con los botones adaptados a la interfaz

Lleva siendo así prácticamente desde que implementé la GtkHeaderBar en Pimagizer, pero como habéis podido ver, recientemente uso el tema Arc, que implica tener un fondo oscuro en las barras de menús y herramientas. Y el problema surge ahí, en que los botones que tan bonitos se veían con el tema por defecto de GTK, pero cambia con un tema oscuro:

A la derecha botones con imagen en un tema GTK claro, a la derecha lo mismo pero con un tema oscuro
Claramente la diferencia está ahí…

La solución más eficaz pasa por convertir ese botón en uno normal y corriente, sin imágenes de ningún tipo, simplemente utilizando texto, y en concreto GTKLabel. Si estáis utilizando Glade o algún sistema gráfico parecido, podéis saltar a la siguiente sección.

Crear los elementos básicos

Daremos por hecho que ya tienes una ventanita corriendo con GTK, ya que el objetivo del artículo no es enseñar a utilizar los elementos de GTK, sino utilizar uno muy concreto. Aquí repasamos cómo se crea la etiqueta dentro del botón.

buttonPx = Gtk.ToggleButton()
labelPx = Gtk.Label("Px")  # Aquí va nuestro texto
buttonPx.add(labelPx)
buttonPx.show()
labelPx.show()

Un código bastante sencillito. Creamos un GtkToggleButton (hereda de GTKButton) y un objeto GTKLabel con el texto Px. Le decimos al botón que utilice la etiqueta que acabamos de crear y mostramos ambos objetos. Veamos cómo quedaría:

Los botones de la HeaderBar con etiquetas de texto pequeñas
No se parece demasiado al resultado que queremos conseguir…

Como podemos ver en la imagen, se consigue el objetivo de no usar una imagen para mostrar en los botones, pero son muy distintos de lo que teníamos antes: dos botones con el texto bien visible.

Decidiendo el estilo de la GTKLabel

Afortunadamente GTK ofrece bastantes herramientas para poder personalizar los aspectos que necesitemos, como este concretamente. Lo que estamos buscando exactamente es esto: Text Attribute Markup, que inicialmente fue desarrollada por Pango. Formalmente lo conocemos como Pango Text Attribute Markup Language. No os preocupéis demasiado: es muy parecido a HTML, así que aprender la sintaxis no será complejo.

Básicamente, la sintaxis se basa en XML al igual que HTML. Tenemos el soporte de etiquetas algo más reducido, pero las clásicas <b>, <i> o <u> las tenemos. Añade alguna más como <big>, <small>, <sup> y <sub>, permitiendo hacer cosas más complejas sin meterse con CSS. Lo interesante con las opciones viene con la etiqueta <span>, que permite una serie de opciones muy interesante, como distintas tipografías, colores o tamaños. De la que nos ocupa ahora son los tamaños, ya que los colores vendrán predefinidos por el tema GTK del usuario.

Para decidir el tamaño de nuestra etiqueta podemos utilizar medidas absolutas (píxeles, puntos, etc…) o relativas. Lo recomendable es utilizar medidas relativas, porque se adaptarán a la resolución que esté usando el usuario. Las medidas absolutas las veremos muy bien en nuestro ordenador, pero cambiará drásticamente cuando cambiemos a otro con una resolución más distinta.

Para la etiqueta <span> disponemos del atributo size=»» o font_size=»». En la documentación tenéis informacion sobre otros muchos atributos, y modos de uso, pero nos centaremos en los tamaños relativos. Disponemos de una escala de 7 tamaños, ordenadas de menor a mayor: ‘xx-small‘, ‘x-small‘, ‘small‘, ‘medium‘, ‘large‘, ‘x-large‘, ‘xx-large‘. La que aplicaremos en nuestra aplicación será la más grande, pues obtendremos el resultado similar al que conseguíamos con las imágenes.

<span size="xx-large"><b>Px</b></span>

También le ponemos la etiqueta <b> para darle más grosor a la fuente. Ahora sólo nos queda incorporarlo al código

Utilizar marcado Pango en GTKLabel

Al código de nuestra primera sección le debemos de dar unos breves retoques para poder poner lo que necesitamos. Y es que si rellenamos la etiqueta tal cual lo tenemos en el cuadro de texto anterior el usuario verá las etiquetas, que es algo que no deseamos. GTKLabel tiene un atributo que indica si se está utilizando marcado o no.

buttonPx = Gtk.ToggleButton()
labelPx = Gtk.Label("<span size="xx-large"><b>Px</b></span>")
buttonPx.add(labelPx)
buttonPx.show()
labelPx.set_use_markup(True)  # Muy Importante!!
labelPx.show()

Como vemos, la penúltima línea es la que nos dejará hacer la magia. Le estamos diciendo que aplique el marcado a esa etiqueta. Y ya, al ejecutar de nuevo nuestra aplicación tendremos el resultado que buscábamos:

Las GTKLabel de la aplicación ahora se ven adecuadamente
¡Ahora sí!

Siempre podéis consultar el resultado en directo en la versión 0.4.5 de Pimagizer.

Un saludo!

Véase: Documentación GTK | Pimagizer

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.