«

»

ene 28 2012

Creando nuestra propia View para usar fuentes TrueType

 

Si hay un elemento que sin duda da personalidad a nuestra aplicaciones a la hora de diseñarlas es la tipografía que usemos. Si bien es cierto que Android tan solo nos proporciona cuatro fuentes a usar a la hora de implementar nuestras aplicaciones también es cierto que nos proporciona una manera de usar cualquier fuente que incluyamos en nuestros proyectos.

En Androideity, uno de nuestros blogs amigos que os recomiendo, nos cuentan todo lo que debemos saber acerca de las fuentes en Android y como incluir en nuestros proyectos nuestras propias fuentes, pero nosotros no queríamos quedarnos solo ahí y os traemos un interesante tutorial del que aprenderéis varias cosas de Android.

Para usar fuentes propias en Android hay que cargarlas desde el directorio Assets y asignarlas en tiempo de ejecución, esta tarea se hace muy tediosa sobre todo si tenemos en cuenta que queremos cambiar la fuente en un proyecto que ya tenemos iniciado, pues tendremos que cambiarla mediante código para cada pantalla y cada elemento. En el tutorial de hoy os contaremos como crear vuestra propia View personalizada con atributos especí­ficos para facilitarnos esta tarea, así que si quieres saber como ya sabes, ¡sigue leyendo!.

 

Lo primero que haremos en nuestro proyecto es crearnos una clase que extienda a TextView a la que añadiremos la funcionalidad que deseamos, esta será nuestra vista personalizada:

 

public class CustomTextView extends TextView {

        private String fuente;

        public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
                super(context, attrs, defStyle);

                try {
                        init(attrs);
                } catch (Exception e) {
                        // Saltara la excepcion si no hemos copiado bien los archivos o
                        // hemos indicado fuentes que no existen, en ese caso no hacemos nada
                        // y dejamos que actue como un TextView normal
                        Log.e("CustomTextView", "Algunos de los parametros de configuracion no se introdujeron correctamente");
                }

        }

        public CustomTextView(Context context, AttributeSet attrs) {
                super(context, attrs);

                try {
                        init(attrs);
                } catch (Exception e) {
                        // Saltara la excepcion si no hemos copiado bien los archivos o
                        // hemos indicado fuentes que no existen, en ese caso no hacemos nada
                        // y dejamos que actue como un TextView normal
                        Log.e("CustomTextView", "Algunos de los parametros de configuracion no se introdujeron correctamente");
                }

        }
}

 

Al extender a TextView deberemos de implementar los constructores, nos centraremos en aquellos que recogen por parámetros los atributos y añadiremos ahí lo que nos interesa en el método init que se encargara de inicializar nuestra configuración.

 

Important!

Para entender bien el siguiente código debe de saber que Android distingue entre los atributos definidos en el sistema y los definidos por nosotros. Esta distinción la hace a través de una uri que es la que indicamos en todos nuestros layouts y que sirve para indicar al sistema a que conjunto de atributos estamos accediendo. Más adelante os explicaremos más al respecto.

 

          private void init(AttributeSet attrs) throws Exception {
                // Con esto controlamos que podremos seguir usando las fuentes del sistema si queremos
                // Obtenemos la fuente elegida que tiene que estar almacena en el directorio assets
                String fuente = attrs.getAttributeValue("http://schemas.android.com/apk/res/com.androcode.projectfont", "fuente");
                // Y comprobamos el estilo (Bold = 0x1, Italic = 0x2)
                String style = attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "textStyle");
                        
                Typeface font;
                        
                // Si hemos indicado fuente procedemos a configurarla
                if (fuente != null) {
                        // Comprobamos el estilo
                        if (style != null && style.equals("0x1")) { // Bold
                                font = Typeface.createFromAsset(getContext().getAssets(), fuente + "_bold.ttf");
                    } else if (style != null && style.equals("0x2")) { // Italic
                        font = Typeface.createFromAsset(getContext().getAssets(), fuente + "_italic.ttf");
                    } else {
                        font = Typeface.createFromAsset(getContext().getAssets(), fuente + ".ttf");
                    }
                                
                        if (font != null) {
                                setTypeface(font);
                        }
                                
                }
                        
        }

 

Como podéis comprobar recuperamos el atributo “fuente” (definidos por nosotros) y el atributo “textStyle” propio del sistema y a partir de estos datos decidimos que fuente recuperar:

 

font = Typeface.createFromAsset(getContext().getAssets(), fuente + ".ttf");

 

Important!

Para que este codigo funcione correctamente las fuentes deberán estar alojadas en el directorio Assets y el nombre que posean será el usado para seleccionarla mediante los atributos. Las versiones bold e italic poseerán el mismo nombre acabado en “_bold” e “_italic” respectivamente

 

Una vez hemos recuperado la fuente la asignaremos:

 

setTypeface(font);

 

Con esto ya tendríamos todo la algoritmia necesaria para nuestra CustomTextView pero deberemos indicarle al sistema que esta vista usara unos atributos adiciones. Para ello crearemos un xml de recursos que alojaremos en el directorio values y que nombraremos attrs.xml con el siguiente contenido:

 

<?xml version="1.0" encoding="utf-8"?>

<resources>

     <declare-styleable name="CustomTextView">
        <attr name="fuente" format="string" />
    </declare-styleable>

</resources>

 

En este indicaremos que para nuestra vista usaremos el atributo “fuente” de tipo “string”. Y con esto ya tendremos creada nuestra propia vista y solo nos quedará usarla y a continuación os contamos como.

 

A la hora de usar nuestra CustomView e indicarlo en nuestros layouts deberemos hacerlo con la ruta completa de la clase java que la define a diferencia de como pasa con las vistas nativas en el sistema. A continuación un ejemplo:

 

<com.androcode.projectfont.CustomTextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="SpyMIC"
        android:textStyle="bold"
        fuentes:fuente="helvetica" />

 

Pero aun queda un detalle, si introducís este código en vuestros layouts os indicara un error indicando que el atributo “fuente” no esta definido. Esto es por que en la vista padre mediante el atributos xmlns le indicamos al layout donde están definidos los atributos. Por defecto siempre indicamos los del sistema así que deberemos indicarle que en nuestro proyecto también tenemos atributos definidos añadiendo otro xmlns adicional:

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fuentes="http://schemas.android.com/apk/res/com.androcode.projectfont"
    android:layout_width="fill_parent"
    android:layout_height=...

 

Con esto hemos terminado y sabéis lo necesario. Si queréis os podéis bajar el proyecto de google code y si tenéis alguna duda o sugerencia aquí estamos para seguir aprendiendo juntos.

 

Google Code | Codigo fuente

 

Acerca del autor

JMPergar

Mobile Developer at @BeRepublic & Founder of @AndroCode. Silver Speaker & Member of Core Team at @GDGBarcelona.