Tipografía personalizada en Android II

¿Puedo cambiar la fuente desde el xml? Sí, pero…

Una forma alternativa y muy recomendable para hacer más fácil el uso de fuentes es crear un TextView personalizado al que podamos agregarle la fuente que queremos usar desde el archivo xml, ahorrándonos tener que agregar líneas extra en el código java. Para realiza nuestro TextView personalizado tendremos que definir un atributo “fuente” que podamos usar en el layout.xml, cuyo valor será el de la ruta a la fuente que queremos usar en dicho caso, y tendremos que modificar los constructores de la clase TextView para que haga uso de ese atributo. Esto permitirá utilizar cualquier fuente que carguemos con una misma clase TextView.

Paso a paso

Realizar un TextView personalizado consta de los siguientes pasos:

  1. Definir un recurso declare-styleable que contendrá el atributo “fuente” para indicar la ruta a la fuente en el xml
  2. Hacer uso del atributo “fuente” en el xml
  3. Crear una clase que herede de TextView que utilice la fuente que especifiquemos en el xml

1. Definir un recurso declare-styleable

Crearemos el archivo attr.xml en la carpeta values (app/src/main/res/values) donde añadiremos un elemento declare-styleable con el atributo name="Extra" y un elemento <attr> llamado “fuente” y que sea de formato String.

Tanto al elemento declare-styleable como al elemento <attr>, podemos ponerle el nombre que queramos, pero debemos tenerlo presente para el siguiente paso.

2. Crear una clase que herede de TextView

Llamaremos a esta clase “TextViewPersonalizado“. Debemos sobrescribir todos los constructores de la clase y fijaros en los que reciben un AttributeSet (el conjunto de atributos que recibe del xml):

TextViewPersonalizado.java

El primer constructor solo recibe el parámetro context, por lo que no nos sirve, aunque debemos sobrescribirlo igualmente. El segundo y el tercero sí reciben un AttributeSet. Para no repetir código, hemos creado el método setTypeface(), que obtiene el atributo “fuente” y cambia la tipografía. Lo llamaremos solamente desde estos dos últimos constructores.

¿Cómo funciona? En el atributo “fuente” habremos escrito (paso 3) la ruta a la tipografía que queremos usar a partir de la carpeta app/src/main/assets. Para obtener esta ruta se utiliza el método obtainStyledAttributes() cuyos parámetros son:

  1. El conjunto de atributos de la vista
  2. El conjunto de atributos que queremos recuperar
  3. El atributo que hay en el tema actual que referencia al recurso donde se indican los valores por defecto para ese AttributeSet
  4. El archivo de recursos que contiene los valores por defecto para este AttributeSet

Solo nos interesan los dos primeros. Tenemos que pasarle el grupo de atributos recibidos en el constructor y el grupo de atributos que queremos recuperar. Hacemos referencia a este segundo grupo mediante el identificador R.styleable.Extra, que será el id que se habrá asignado al declare-styleable que definimos en el primer apartado.

A continuación obtenemos el valor del atributo “fuente” con el método TypedArray.getString(), igual que si fuera un Bundle, es decir, pasándole la clave del valor que queremos recuperar. Este identificador se habrá guardado en R como R.styleable.Extra_fuente, ya que el nombre que le asignamos al atributo era “fuente”. Y dado que le indicamos que el atributo tenía un formato de String, lo guardamos en una variable de tipo String. Luego, llamamos al método TyperArray.recycle(), que permitirá a la aplicación seguir utilizando ese TypedArray.

El método getString() devolverá nulo si no existe el valor indicado, por lo que, antes de seguir, debemos comprobar si es nulo o no. Si no lo es, el valor será el valor que indicamos en el xml, por lo que ahora podemos utilizarlo para obtener la fuente, ya sea con la clase TypefacesUtils que definimos en el tutorial anterior o llamando simplemente a setTypeface(Typefaces.createFromAssets(context, rutaFuente).

3. Hacer uso del atributo

Después de esto, vamos al layout donde queremos utilizar nuestro TextViewPersonalizado y lo declaramos de la siguiente manera:

Creamos un elemento TextViewPersonalizado indicando toda la ruta al mismo. Para saber cuál es, buscamos la clase en el proyecto, hacemos clic secundario sobre ella y luego seleccionamos Copy Reference, y lo pegamos en el xml.

Selecciónar opción 'Copy source' haciendo clic secundario sobre la clase en la estructura del proyecto

Haciendo clic secundario sobre una clase, seleccionamos ‘Copy Source’

Observa el nuevo namespace que aparece en la definición del LinearLayout con el nombre “codictados”. Dado que el atributo “fuente” lo hemos definido nosotros, para poder utilizarlo es necesario que creemos un namespace propio de nuestro proyecto. Podemos ponerle el nombre que queramos excepto “android“, ya que ese está en uso. Para crearlo solo tenemos que escribir algún atributo utilizando ese namespace y se nos ofrecerá la opción de importarlo con Alt + Intro. Es decir, que si escribimos “codictados:fuente“, se nos ofrecerá la opción de crear el namespace. El valor tiene que ser el primero de la lista: “http://schemas.android.com/apk/res-auto”.

Una vez hecho esto, podemos indicar en este atributo la ruta a cualquier fuente que tengamos en app/src/main/assets/fonts comenzando por “fonts/”.

Cuatro TextViewPersonalizado con fuentes distintas en una misma 'Activity'

CuatroTextViewPersonalizado con cuatro fuentes distintas

0 Comentarios

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

©2017 Codictados Comunidad libre para el aprendizaje de codigo Online

o

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?