Trucos con el diseño en Android #1

El blog oficial de desarrollo de Android tiene unos artículos muy interesantes, didácticos y sintéticos. Así que a partir de ahora, vamos a empezar una serie de traducciones al español que complementan el curso de desarrollo de and.roid.es iniciado hace unos meses. Aquí os dejo el primer artículo.

Las herramientas para crear interfaces en Android ofrecen varias formas de gestionar el diseño, algunas más fáciles que otras, pero la mayor parte de las veces solo se necesita algunas características básicas para implementarlas. Ser Fiel a las características básicas, por desgracia, no es la manera más eficaz para crear interfaces de usuario. Un ejemplo común es el abuso de los LinearLayout, lo que conduce a una proliferación de View en la jerarquía del diseño. Cada View que añades a tu aplicación tiene un coste de inicialización. Puede ser especialmente costoso cuando se anidan varios LinearLayout que utilizan el parámetro weight, ya esto requiere que el hijo se mida dos veces.

Por ejemplo, un simple y común diseño: un elemento de una lista formado por un icono de la izquierda, un título en la parte superior y una descripción opcional debajo del título. Quedaría de la siguiente forma:

Simple list item

Para entender mejor como funcionan las View utilizaremos una ImageView y dos TexView. Aquí hay un diagrama del diseño capturado por el HierarchyViewer:

Wireframe of the simple list item

Implementar este diseño es sencillo con LinearLayout. El elemento, es una LinearLayout horizontal con una ImageView y un LinearLayout vertical, que contiene dos TextView. El código fuente del diseño sería el siguiente:

<LinearLayout xmlns:android='http://schemas.android.com/apk/res/android'
    android:layout_width='fill_parent'
    android:layout_height='?android:attr/listPreferredItemHeight'

    android:padding='6dip'>

    <ImageView
        android:id='@+id/icon'

        android:layout_width='wrap_content'
        android:layout_height='fill_parent'
        android:layout_marginRight='6dip'

        android:src='@drawable/icon' />

    <LinearLayout
        android:orientation='vertical'

        android:layout_width='0dip'
        android:layout_weight='1'
        android:layout_height='fill_parent'>

        <TextView
            android:layout_width='fill_parent'
            android:layout_height='0dip'
            android:layout_weight='1'

            android:gravity='center_vertical'
            android:text='My Application' />

        <TextView
            android:layout_width='fill_parent'
            android:layout_height='0dip'
            android:layout_weight='1' 

            android:singleLine='true'
            android:ellipsize='marquee'
            android:text='Simple application that shows how to use RelativeLayout' />

    </LinearLayout>

</LinearLayout>

Este diseño es correcto pero puede ser un desperdicio si lo utilizas para cada elemento de una ListView (lista). El mismo diseño puede ser rescrito usando una única RelativeLayout, ahorrando una View, y mejorando un nivel en la jerarquia de View, por elemento. La implementación del diseño con RelativeLayout queda así de simple:

<RelativeLayout xmlns:android='http://schemas.android.com/apk/res/android'
    android:layout_width='fill_parent'
    android:layout_height='?android:attr/listPreferredItemHeight'

    android:padding='6dip'>

    <ImageView
        android:id='@+id/icon'

        android:layout_width='wrap_content'
        android:layout_height='fill_parent'

        android:layout_alignParentTop='true'
        android:layout_alignParentBottom='true'
        android:layout_marginRight='6dip'

        android:src='@drawable/icon' />

    <TextView
        android:id='@+id/secondLine'

        android:layout_width='fill_parent'
        android:layout_height='26dip' 

        android:layout_toRightOf='@id/icon'
        android:layout_alignParentBottom='true'
        android:layout_alignParentRight='true'

        android:singleLine='true'
        android:ellipsize='marquee'
        android:text='Simple application that shows how to use RelativeLayout' />

    <TextView
        android:layout_width='fill_parent'
        android:layout_height='wrap_content'

        android:layout_toRightOf='@id/icon'
        android:layout_alignParentRight='true'
        android:layout_alignParentTop='true'
        android:layout_above='@id/secondLine'
        android:layout_alignWithParentIfMissing='true'

        android:gravity='center_vertical'
        android:text='My Application' />

</RelativeLayout>

Esta implementación se comporta de la misma forma que la anterior, excepto en un caso. Cuando el elemento que queremos mostrar tiene dos lineas de texto: el título y una descripción opcional. Cuando la descripción no esta preparada para dicho elemento, la aplicación simplemente pondrá la visibilidad del segundo TextView en GONE. Esto funciona perfectamente con la primera implementación de LinearLayout pero no con la versión de RelativeLayout:

RelativeLayout and description GONE
RelativeLayout and description GONE

En una RelativeLayout, las View se alinean cada una con su padre, consigo misma, o con otras. Por ejemplo, declaramos que la descripción se ajusta a la parte inferior de la RelativeLayout y que el título se coloca por encima de la descripción y anclados parte superior del padre. Con la descripción en GONE, RelativeLayout no sabe dónde colocar el título. Para resolver este problema, se puede utilizar un parámetro de diseño llamado alignWithParentIfMissing.

Este parámetro es un booleano, que simplemente dice a la RelativeLayout que utilize sus propios bordes como anclas cuando faltan las definidas. Por ejemplo, si una posición para la derecho de una View que esta GONE y alignWithParentIfMissing true, la RelativeLayout anclará la View a su borde izquierdo. En este caso, utilizando alignWithParentIfMissing causará que la RelativeLayout para alinear la parte inferior del título lo haga con su propia parte inferior. El resultado es el siguiente:

RelativeLayout, description GONE and alignWithParentIfMissing
RelativeLayout, description GONE and alignWithParentIfMissing
El comportamiento de nuestro diseño es perfecto, incluso cuando no hay descripción. Aún mejor, la jerarquía es más simple porque no estamos utilizando el parámetro weight de LinearLayout. La diferencia entre las dos implementaciones se pone de manifiesto al compararlas en el HierarchyViewer. Una vez más, la diferencia será mucho más importante, por ejemplo, cuando se utiliza un diseño para cada elemento en un ListView .
LinearLayout vs RelativeLayout
Esperemos que este ejemplo simple demuestre que el conocimiento de los diseños es la mejor manera de obtener información sobre cómo optimizar la interfaz de usuario.

Artículo original | Android Developers Blog

4 comentarios sobre “Trucos con el diseño en Android #1

  1. Pingback: Bitacoras.com

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s