Autor

Alejandro Alcalde

Data Scientist and Computer Scientist. Creator of this blog.

Más artículos de Alejandro Alcalde | Porfolio

Hace poco, mientras escribía un CustomAdapter para una aplicación en la que estoy trabajando, descubrí una nueva característica gracias a la herramienta Lint del sdk, los compound drawables.

Compound Drawables

Consiste en simplificar un layout cuando éste conste de un ImageView y un TextView. Suele ser frecuente encontrarse en una lista de elementos una imagen junto a un texto. Algo así:

<LinearLayout
    <!--....--> >

    <ImageView
        <!--....--> />

    <TextView
       <!--....--> />
</LinearLayout>

Si el layout consta de estos dos elementos, Lint muestra el siguiente mensaje : This tag and its children can be replaced by one and a compound drawable. Viene a decir que es posible simplificar el layout eliminando la imagen y usarla dentro del elemento TextView como Compound Drawable.

Como es frecuente en Android, hay dos formas de hacer esto, mediante código o mediante XML. Empecemos con el primero:

El método setCompoundDrawableWithIntrinsicBounds(), se encarga de unir un ImageView a un TextView, como menciona su documentación:

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. Use 0 if you do not want a Drawable there. The Drawables’ bounds will be set to their intrinsic bounds.

Los cuatro parámetros que acepta este método son las imágenes a adjuntar al texto, se puede adjuntar a la izquierda, arriba, derecha o abajo. Si solo interesa fijar una imagen a la izquierda del texto, basta con pasar un 0 a los 3 parámetros restantes.

Una vez unida la imagen al texto, con setCompoundDrawablePadding() se puede establecer un relleno (padding) para separar el texto de la imagen la distancia deseada, por ejemplo.

TextView tv = (TextView) findViewById( R.id.textView );
tv.setCompoundDrawablesWithIntrinsicBounds( R.drawable.ic_launcher, 0, 0, 0 );
tv.setCompoundDrawablePadding(10);

Es posible realizar el proceso anterior mediante XML, en lugar de java:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_launcher"
        android:drawablePadding="10dp"
        android:gravity="center_vertical"
        android:text="@string/text"
        android:textAppearance="?android:attr/textAppearanceSmall" />

Cos los atributos (android:drawableLeft, y android:drawablePadding) se logra el mismo resultado.

Con esta pequeña optimización estamos reduciendo el layout de dos a un View, puede parecer poco, pero si usamos esto en un listView con 10 filas por ejemplo, se pintará más rápido y el desplazamiento por la lista será más suave.

Referencias

¿Has visto algún error?: Por favor, ayúdame a corregirlo contactando conmigo o comentando abajo.

Categorías:Etiquetas:

Quizá también te interese leer...