Diseño de Interfaz de Usuario Android: Controles Básicos de Imágenes

En este tutorial, aprenderá a cómo crear controles de imágenes básicos en Android.

Este tutorial le muestra los pasos para crear un número de diferentes controles ImageView en su aplicación Android. Después, aprenderá a cómo ajustar los controles de contenido de imagen en diferentes maneras. Finalmente, discutiremos algunos de las demás funciones disponibles para el control ImageView en Android.

Android SDK, incluye un control de texto static sencillo para usar dentro de sus layouts: ImageView (android.widget.ImageView). Un buen ejemplo del uso del control ImageView sería para mostrar un icono o un gráfico en la pantalla. Los controles ImageView pueden ser gráficos bitmap (como PNG, JPG y GIF) o pueden ser de otro tipo. Tipos de gráficos que tienen soporte para la plataforma Android, como formas definidas en XML.

Este es un ejemplo de una pantalla con cinco controles diferentes ImageView mostrados en ella.

Paso 1: Crear una aplicación Android

Empiece creando un proyecto Android. Implemente su aplicación Android como normal. Una vez que tenga un proyecto configurado y la aplicación lista, decida bajo que pantalla quiere agregar los controles ImageView. Quizás simplemente haya creado un nuevo proyecto Android con su Activity y su layout (main.xml) por defecto. Esto funcionará para este ejercicio. Una vez que haya conseguido configurar su proyecto Andorid, entonces estará listo para continuar con este tutorial.

Paso 2: Agregando los Controles ImageView a un Layout

Los controles ImageView, por lo general, se incluyen como parte de su archivo layout resource del Activity. Por ejemplo, para agregar un control ImageView al layout resource main.xml asociado con su aplicación, usted debe editar su archivo layout. Puede hacer esto dentro de Eclipse usando el diseñador Layout Resource o editando directamente el XML. También los controles pueden ser creados por medio de programación y añadiéndolo a su pantalla en tiempo de ejecución. Primero, haga un control ImageView (android.widget.ImageView) y añadalo a su layout dentro de su Activity.

Para añadir un control ImageView a un archivo layout resource, abra el archivo layout; /res/layout/main.xml que es parte de su proyecto Android. Haga clic sobre LinearLayout (o en un control layout parent) que desee para añadir el control ImageView. En Eclipse, desde la parte interna el diseñador gráfico Layout Resource, usted puede seleccionar el control ImageView desde la sección Images & Media de la Paleta y arrastrarlo dentro del parent layout.

Para configurar como se ve y se desempeña el control ImageView, ajuste los atributos de los controles seleccionando el control (ya sea en la pestaña Outline o en la ventana Preview) y cambie sus atributos en la pestaña Propiedades. Además, puede editar directamente el XML.

Especifique los atributos de los controles de ImageView que usted quiere tener en cuenta:

• De al control ImageView un nombre único usando la propiedad id de modo que puede ser referenciado por otros controles en el layout XML y por medio de programación desde su código Java.
• Cuando trabaje con layouts y recursos gráficos, ajuste la imagen mostrada dentro del control ImageView usando la propiedad src, esto se puede hacer por medio de programación configurandola con el método setImageResource(), o hay otras formas de cargar imágenes desde otros recursos, como setImageBitpam, setImageDrawabel y setImageUri(), dependiendo de dónde se originan los gráficos.
• Ajuste las propiedades de altura y anchura del layout del control como sea más apropiado. 
• Ajuste cualquier otro atributo que usted desee para ajustar la apariencia de los controles. Por ejemplo, ajuste el padding, la visibilidad u otra configuración.

Por ejemplo, este es el XML básico encontrado en el archivo layout para ImageView:

1

2

<ImageView

3

    android:id="@+id/imageViewOfGirl"

4

    android:src="@drawable/person"

5

    android:layout_width="wrap_content"

6

    android:layout_height="wrap_content"</ImageView>

Finalmente, cuando usted quiera acceder a un ImageView por medio de programación dentro de su clase Activity, simplemente use su identificador para cargarlo:

1

2

ImageView img = (ImageView) findViewById(R.id.imageViewOfGirl);

Ahora discutamos algunos de los atributos más comunes para los controles ImageView.

Paso 3: Cambiando el Tamaño de los Controles ImageView

Por defecto, los contenidos de un control ImageView son de cierto tamaño, por lo general, el tamaño de las dimensiones del gráfico. Son limitados por sus atributos por defecto: layout_width y layout_height. Además, puede especificar la altura y anchura mínima y máxima de los atributos usando un recurso de dimensión (dp, px, etc.). Para obtener más información, vea la documentación Android SDK sobre Resource Dimensions.

En XML, estas propiedades aparecerían dentro de su control ImageView como:

1

2

android:minHeight="50dp"

3

android:minWidth="50dp"

4

android:maxHeight="150dp"

5

android:maxWidth="150dp"

Aquí estamos especificando que el control debería tener un tamaño mínimo y máximo específico. Note que cuando lo utilizamos solo, especificando estos tamaños, éste no preserva la relación de aspecto de la imagen y, por lo tanto, éste puede lucir aplastado, estirado o, sencillamente, no ser lo ideal.

Si está trabajando con controles ImageView en su código Java, entonces puede ajustar el tamaño max y min de su control ImageView por medio de programación usando los métodos: setMinimumHeight(), setMaxHeight(), setMinimumWidth() y setMaxWidthlas() de la clase ImageView.

Paso 3: Modificando el tamaño de los Gráficos en los Controles ImageView

Cuando cambia el tamaño de un control ImageView, si está buscando como agrandarlo o reducirlo, a menudo querrá preservar su proporción o la anchura y altura relativa a las dimensiones para que la imagen se vea bien. La siguiente figura muestra varios controles ImageView mostrando exactamente la misma imagen de una chica, sólo que con diferentes anchuras, alturas y proporciones.

Usted puede especificar que el control ImageView conserva su proporción usando el atributo adjustViewBounds. En XML, esta propiedad aparecería dentro de su control ImageView como:

1

2

android:adjustViewBounds="true"

Este atributo está combinado frecuentemente con el tipo de escala que usted desea lograr. El tipo de escala comúnmente más simple que usará es el tipo fitXY, el cual escala tanto la altura como la anchura o la reduce hasta que se ajuste dentro del máximo de las dimensiones especificadas. Tenga en mente que esto no significa que el control será de las dimensiones max/min EXACTAS de estas dimensiones a menos que a menos que asigne exactamente la misma proporción.

1

2

android:scaleType="fitXY"

Si está trabajando con los controles ImageView en su código de Java, entonces puede ajustar los límites de la vista y el tipo de escala de su control ImageView por medio de programación usando los métodos setAdjustViewBounds() y setScaleType() de la clase ImageView.

Paso 5: Manejando los clics de los controles ImageView

Como cualquier otro control view, un ImageView puede ser activado a través de un clic, en caso de que se seleccione. Esta habilidad está desactivada por defecto en un ImageView. Aunque, activar está opción es sencillo. Active la opción Clic del ImageView usando el atributo clickable, y luego especifique su controlador clic con el atributo onClick, así:

1

2

android:clickable="true"

3

android:onClick="onClickGirl"

Luego, necesitará actualizar su clase Activity e implementar el método onClickGirl, así:

1

2

 public void onClickGirl(View view)

3

 {

4

    Toast.makeText(this, "You clicked me!", Toast.LENGTH_SHORT).show();

5

 }

Los controles ImageView, también tienen soporte para long-clicks, pero necesitará registrar estos por medio de programación. Además, usted puede hacer un ImageView focusable y activarlo o desactivar la respuesta táctil, en caso de que se seleccione.

Paso 7: Optimizando los Gráficos para usarlos en los controles ImageView

Por lo general, usted querrá proporcionar recursos de gráficos para dispositivos portátiles que tienen el tamaño adecuado para los tipos de dispositivos que usted desea seleccionar.

• Si está guardando gráficos como recursos del proyecto, entonces podría querer considerar siempre versiones alternativas para diferentes tamaños de pantallas o resoluciones (vea Alternative Resources en Android SDK para más información sobre resource qualifiers).
• Si necesita un gráfico que se estire en diferentes tamaños, entonces sería bueno que viera los gráficos NinePatch.
• Si los gráficos que usted está mostrando vienen de proveedores especializados, entonces usted tendrá menos control sobre el tamaño. Aún tiene dos opciones: puede cambiar el tamaño durante el transcurso como lo discutimos anteriormente, o puede usar la clase Bitmap para crear físicamente n gráficos que están al tamaño que usted desea, y después mostrarlos.

Paso 5: Hacer su control ImageView accesible

Las aplicaciones Android son utilizadas por diferentes tipos de usuarios: La funcionalidad es algo que deberá considerar cuando está escribiendo su aplicación —¿cómo funcionará su aplicación con alguien con limitada visión o sin ninguna visión? Una técnica fácil que se toma es el soporte integrado de los lectores de pantalla, y otras características accesibles de Android siempre, siempre deben ajustar la descripción de contenido para cada elemento gráfico en su pantalla —sobre todo los controles ImageView:

1

2

android:contentDescription="Picture of a girl"

Al ajustar la descripción de contenido, incluso aquellos que no pueden ver la imagen de la chica, sin embargo, sabrán que está ahí, y pueden suministrar uno con imaginación.

Además, puede ajustar esta casilla por medio de programación usando el método setContentDescription().

En conclusión

Los controles ImageView son, por lo general, usados en las aplicaciones de interfaces de usuario Android para mostrar contenidos gráficos (Drawable) en diferentes formas. En este tutorial, aprendió cómo crear controles de imágenes en Android y los personalizo en diferentes formas. Estos atributos se pueden combinar y adaptar para permitir que cada imagen sea flexible al momento de mostrarse en la pantalla.