Estructura de un proyecto Android

 

Estructura de un proyecto Android

Para empezar a comprender cómo se construye una aplicación Android vamos a echar un vistazo a la estructura general de un proyecto tipo.

Cuando creamos un nuevo proyecto Android en Eclipse se genera automáticamente la estructura de carpetas necesaria para poder generar posteriormente la aplicación. Esta estructura será común a cualquier aplicación, independientemente de su tamaño y complejidad.

Elementos creados inicialmente para un nuevo proyecto Android:

     Carpeta src

     Carpeta res y Subcarpetas

     Carpeta assets

     Carpeta gen

     Archivo AndroidManifest.xml

Carpeta /src/

Contiene todo el código fuente de la aplicación, código de la interfaz gráfica, clases auxiliares, etc. Inicialmente, Eclipse creará por nosotros el código básico de la pantalla (Activity) principal de la aplicación, siempre bajo la estructura del paquete java definido.

Carpeta /res/

Contiente todos los ficheros de recursos necesarios para el proyecto: imágenes, vídeos, cadenas de texto, etc. Los diferentes tipos de recursos de deberán distribuir entre las siguientes carpetas:

·                     /res/drawable/. Contienen las imágenes de la aplicación. Se puede dividir en /drawable-ldpi,/drawable-mdpi y /drawable-hdpi para utilizar diferentes recursos dependiendo de la resolución del dispositivo.

·                     /res/layout/. Contienen los ficheros de definición de las diferentes pantallas de la interfaz gráfica. Se puede dividir en /layout y /layout-land para definir distintos layouts dependiendo de la orientación del dispositivo.

·                     /res/anim/. Contiene la definición de las animaciones utilizadas por la aplicación.

·                     /res/menu/. Contiene la definición de los menús de la aplicación.

·                     /res/values/. Contiene otros recursos de la aplicación como por ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml), etc.

·                     /res/xml/. Contiene los ficheros XML utilizados por la aplicación.

·                     /res/raw/. Contiene recursos adicionales, normalmente en formato distinto a XML, que no se incluyan en el resto de carpetas de recursos.

Como ejemplo, para un proyecto nuevo Android, se crean los siguientes recursos para la aplicación:

Carpeta /assets/

Contiene todos los demás ficheros auxiliares necesarios para la aplicación (y que se incluirán en su propio paquete), como por ejemplo ficheros de configuración, de datos, etc.

La diferencia entre los recursos incluidos en la carpeta /res/raw/ y los incluidos en la carpeta /assets/ es que para los primeros se generará un ID en la clase R y se deberá acceder a ellos con los diferentes métodos de acceso a recursos. Para los segundos sin embargo no se generarán ID y se podrá acceder a ellos por su ruta como a cualquier otro fichero del sistema. Usaremos uno u otro según las necesidades de nuestra aplicación.

Carpeta /gen/

Contiene una serie de elementos de código generados automáticamente al compilar el proyecto. Cada vez que generamos nuestro proyecto, la maquinaria de compilación de Android genera por nosotros una serie de ficheros fuente en java dirigidos al control de los recursos de la aplicación.

El más importante es el que se puede observar en la imagen, el fichero R.java, y la clase R.

Esta clase R contendrá en todo momento una serie de constantes con los ID de todos los recursos de la aplicación incluidos en la carpeta /res/, de forma que podamos acceder facilmente a estos recursos desde nuestro código a traves de este dato. Así, por ejemplo, la constante R.drawable.icon contendrá el ID de la imagen “icon.png”contenida en la carpeta /res/drawable/. Veamos como ejemplo la clase R creada por defecto para un proyecto nuevo:

public final class R {     public static final class attr {     }     public static final class drawable {         public static final int icon=0x7f020000;     }     public static final class layout {         public static final int main=0x7f030000;     }     public static final class string {         public static final int app_name=0x7f040001;         public static final int hello=0x7f040000;     } }

Archivo AndroidManifest.xml

Contiene la definición en XML de los aspectos principales de la aplicación, como por ejemplo su identificación (nombre, versión, icono, …), sus componentes (pantallas, mensajes, …), o los permisos necesarios para su ejecución. Veremos más adelante más detalles de este fichero.

En el siguiente post veremos los componentes software principales con los que podemos construir una aplicación Android.

Elementos de la interfaz de usuario de una aplicación Android

Layouts

Si queremos combinar varios elementos de tipo vista tendremos que utilizar un objeto de tipo Layout. Un Layoutes un contenedor de una o más vistas y controla su comportamiento y posición. Hay que destacar que un Layoutpuede contener a otro Layout y que es un descendiente de la clase View.

 La siguiente lista describe los Layout más utilizados en Android:

LinearLayout: Dispone los elementos en una fila o en una columna.

TableLayout: Distribuye los elementos de forma tabular.

RelativeLayout: Dispone los elementos en relación a otro o al padre.

AbsoluteLayout: Posiciona los elementos de forma absoluta.

FrameLayout: Permite el cambio dinámico de los elementos que contiene.

Dado que un ejemplo vale más que mil palabras, pasemos a mostrar cada uno de estos layouts en acción:

LinearLayout es uno de los Layout más utilizado en la práctica. Distribuye los elementos uno detrás de otro, bien de forma horizontal o vertical. 

Botones en Android

En el apartado anterior hemos visto los distintos tipos de layout con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En las próximas lecciones vamos a hacer un recorrido por los diferentes controles, y en esta concretamente los de tipo Button (Botón) que pone a nuestra disposición la plataforma de desarrollo Android.

vamos a ver los diferentes tipos y cómo podemos personalizarlos, Android en este caso nos proporciona tres tipos de botones:

Button: Es el típico botón normal, contiene un texto y puede contener imágenes de tipo icono que puedes alinear con el texto.
ToggleButton: es de tipo on/off, contiene una rayita que indica ese on/off.
ImageButton: El botón contiene una imagen, es muy útil para cuando queremos hacer cosas vistosas y de diseño con formas raras, ya que el Button es rectangular, y aquí podemos usar cualquier forma poniendo el fondo transparente.

Imagenes

Despues de saber como mostrar un Hola Mundo por la pantalla de nuestro android, el siguiente paso será mostrar una imagen. Es massencillo de lo que en principio parece, ya que se asemeja mucho a la forma de usar Visual Basic y su arrastrar y soltar. Ya podremospresumir de movil con nuestra propia apli con imagen!

Huelga decir que para seguir este tutorial necesitaremos tener instalado la ultimaversion del SDK de Android y tener instalado Eclipse y el plugin ADT en tu Windows o Linux.

Empezaremos creando un nuevo proyecto de Android y nos iremos a la carpeta "Drawable" (si no existe, la creamos) y borraremos el icono que viene predeterminado para poner uno personalizado, en este caso pondremos el logo de scenebeta (disponible en el paquete descargable que está al final del tutorial). En esta carpeta estarán alojadas todas las imagenes del proyecto. Para borrar el icono daremos Boton derecho del raton ->Delete:

Una vez borrado, procederemos a instertar (o mejor dicho, importar) todas las imagenes del proyecto. En nuestro caso, el icono y la imagen que aparecerá en pantalla. Daremos clic derecho sobre nuestra carpeta Drawable y pincharemos en "Import..." Nos aparecerá una pantalla como esta:

Seleccionaremos "File System" y pincharemos en "Next>" Otra pantalla nos aparecera, en la que seleccionaremos la ubicacion de las imagenes en nuestro ordenador:

Ahora vamos a decir a la aplicacion qué icono tiene que usar. Esa informacion se da en el AndroidManifest.xml

Como podemos ver en la imagen anterior, la pantalla que nos muestra esa informacionesta en la segunda pestaña (Application, al lado de Manifest). El valor a cambiar es el de Icon. Podemos escribirlo a mano poniendo la ruta empezando por arroba "@" y sin poner la extension del icono. Guardaremos el AndroidManifest.xml y nos iremos a res ->values -> strings.xml

Nos muestra un HelloWorld predeterminado que no nos interesa, recordemos que eso ya lo sabemos hacer y que nuestro objetivo es mostrar una imagen, asi que lo eliminaremos tal y como muestra la imagen:

La pantalla principal se nos quedará en negro. Es el momento de añadir la imagen.

Como hemos podido observar, al lado de lo que seria nuestra pantalla del movil (donde antes ponia "HelloWorld") tenemos dos bloques. Usaremos el de la parte de abajo.

Pincharemos en el que dice "ImageButton" (Flecha nº1) y lo arrastraremos a la pantalla negra. Se nos creará un boton (Flecha nº3) que terminará siendo nuestra imagen. Pincharemos dos veces sobre lo que señala la flecha nº2 para editar las propiedades de ese boton.

Pincharemos el casillero de Background (Flecha nº1) y seleccionaremos la imagen que queremos mostrar (Flecha nº2) y daremos a OK

Como podemos observar, tambien podemos poner la ruta a mano de igual manera que como lo hicimos con el icono.

Se ve un poco mal asi que pincharemos en Portrait como se muestra en la imagen:

Ya está. Ya solo nos queda probarlo en nuestro telefono (teniendo el USB conectado) o en el emulador del SDK de Android pinchando en 

Utilizando etiquetas (labels)

El widget más simple que existe en Android es la etiqueta (label) que encontraremos con el nombre de TextView. Al igual que en el resto de los kits de herramientas de GUI, las etiquetas son fragmentos de texto no editable directamente por los usuarios. Se utilizan generalmente para identificar los widgets adyacentes, es decir, los widgets que se encuentran a un lado de las etiquetas. El ejemplo más sencillo son los formularios en los que regularmente encontraremos cada etiqueta seguida de un campo de texto, un radio button, etc.

En Java, la creación de una etiqueta puede hacerse mediante la declaración de una instancia de un objeto TextView. Sin embargo, la práctica más común es la de crear los layout a través de archivos XML, y para ello, necesitaremos incluir el elemento <TextViewandroid:text=”[Mi etiqueta]“/> si queremos incluir etiquetas con su texto correspondiente en la GUI.

En algunos casos también, será necesario dotar a nuestra aplicación de ciertas características como la internacionalización, es decir, de manejar múltiples idiomas en el texto de nuestras interfaces. Esto es posible gracias a las referencias que podemos hacer a algún recurso en lugar de otro según las configuraciones que haga el usuario o las del propio teléfono. Este tema se abarcará con más detalle en un siguiente artículo, por lo mientras tengamos bien fuertes los conceptos básicos.

Propiedades de las etiquetas

A continuación enumero una lista de las propiedades más utilizadas cuando trabajamos con etiquetas:

§  android:typeface que sirve para indicar el tipo de letra con que se mostrará el texto de la etiqueta (ejemplo: normal, sans, serif, monospace, etc.)

§  android:textStyle para indicar si el tipo de letra seleccionado debe mostrarse en un formato en negritas (bold), cursiva (italic) o ambas (bold_italic).

§  android:textColor para indicar el color que tendrá el texto mostrado en la etiqueta, este debe estar expresado en formato RGB hexadecimal (ejemplo: #A4C639 para el verde característico de Android (; )

§  Conoce más propiedades consultando la tabla XML Attributes desde la documentación oficial de Androiddevelopers.

El código…

Para ver en acción todo esto, te muestro a continuación el código de un layout en XML que tiene únicamente una etiqueta en su definición:

Hemos especificado un texto para la etiqueta, un color, su disposición en la pantalla del teléfono, el tipo y estilo de letra así que el resultado obtenido será el siguiente:

Sencillo ¿no? Jugando con las propiedades de cada widget puedes dotar a tu aplicación de aspectos visuales llamativos y agradables del usuario, una cuestión que también debemos cuidar. Acuérdate que los usuarios se enamoran de las aplicaciones bonitas y no solamente de aquellas que hacen las cosas bien. Si consigues mezclar ambos aspectos ya la hiciste. Ahora sigamos con los botones en Android.

Cuadros de Texto

Junto con los botones y las etiquetas, las cajas de texto son el tercer tipo de elemento más común con el que trabajarás. En Android, la clase que utilizamos para implementar las cajas de texto se llama EditText, que es una subclase de TextView que utilizamos para crear etiquetas (labels).

Aparte de las propiedades que esta clase hereda de TextView, posee otras muy interesantes que podemos utilizar:

§  android:autoText para definir si la caja de texto proveerá corrección ortográfica de manera automática.

§  android:capitalize si queremos que la caja de texto cambie la primera letra del texto introducido a mayúscula.

§  android:singleLine para controlar si el texto que se introduzca en la caja de texto ocupará una línea o varias; esta propiedad también define el comportamiento de la tecla Enter (si nos posicionará en el siguiente widget en caso de que su valor sea true o si nos agregará una línea nueva para escribir en caso de que se defina como false).

§  android:numeric cuando queramos que el texto introducido sean únicamente números.

§  android:password cuando requerimos que el usuario ingrese datos de tipo contraseña y muestre la información en formato de puntos.

§  Esta clase posee muchos atributos interesantes que puedes consultar en la tabla XML Attributes de la documentación oficial de AndroidDevelopers.

El código…

Para ver el resultado de utilizar algunos de los atributos mencionados arriba vamos a hacer un ejemplo en el que definiremos varios EditText definidos con combinaciones diferentes de atributos para ver su comportamiento en tiempo de ejecución.

1. Creamos un proyecto llamado AndroideityEditText con la versión Android 2.1 update 1.

2. Modificamos el archivo main.xml del directorio res/layout definiendo tres TextView para identificar el atributo que implementa el EditText que colocaremos junto. Así deberá quedarte el código: 

3. Lo ejecutamos y vemos el resultado:

En el primer EditText cada vez que demos Enter nos agregará una línea nueva para seguir escribiendo lo que queramos. En el segundo, utilizamos la propiedad de entrada de texto restringida a números, por lo que aunque tecleemos letras, el resultado en pantalla serán dígitos numéricos. Y por último, utilizamos el atributo de contraseña que como puedes ver hace el texto ilegible para el ojo humano.

Usando listas en Android

Android tiene un tipo de elemento llamado Listview, este elemento fue creado específicamente para desplegar listas y  contiene todo lo que necesitas  para representar tus datos en una aplicación. Vamos a utilizar este elemento para mostrar nuestra lista de países.

Dentro del layout que acabas de crear,  debes incluir un elemento Listview.  Por ahora este listview no tiene ningún dato asignado así que no mostrara nada en pantalla, para que muestre nuestra lista debes agregarle la propiedad android:entries asignándole allí el valor “@array/paises” que corresponde al arreglo que hemos creado al inicio de este ejercicio.

<ListView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:entries="@array/planetas"

android:id="@+id/miLista"

/>

Inicie un nuevo proyecto llamado HelloGridView .

  Encontrar algunas fotos que quieras utilizar o descargar estas imágenes de muestra . Guarde los archivos de imagen en el proyecto res / estirable / directorio.

  Abra la res / layout / main.xml archivo e introduzca lo siguiente:

<? xml version = "1.0" encoding = "utf-8" ?>
<GridViewxmlns:android= "http://schemas.android.com/apk/res/android"
    android:id= "@+id/gridview"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    android:columnWidth= "90dp"
    android:numColumns= "auto_fit"
    android:verticalSpacing= "10dp"
    android:horizontalSpacing= "10dp"
    android:stretchMode= "columnWidth"
    android:gravity= "center"
/>

Este GridView llenará toda la pantalla. Los atributos son bastante explica por sí mismo. Para obtener más información acerca de los atributos válidos, consulte el GridView referencia.

  Abrir HelloGridView.java e inserte el siguiente código para el onCreate () método:

public void onCreate( Bundle savedInstanceState) {
    super . onCreate( savedInstanceState);
    setContentView( R . layout . main );

    GridViewgridview= ( GridView) findViewById( R . id . gridview);
    gridview. setAdapter( new ImageAdapter( this ));

    gridview. setOnItemClickListener( new OnItemClickListener() {
        public void onItemClick( AdapterView<?>parent , View v , intposition , long id ) {
            Toast . makeText( HelloGridView. this , "" + position , Toast . LENGTH_SHORT ). show();
        }
    });
}

Después de la main.xml disposición se establece para la vista de contenido, el GridView se captura de la disposición con findViewById (int) . El setAdapter () método establece entonces un adaptador personalizado ( ImageAdapter ) como la fuente de todos los elementos que se muestran en la cuadrícula. ElImageAdapter se crea en el paso siguiente.

Para hacer algo cuando se hace clic en un elemento de la red, el setOnItemClickListener () método se aprobó una nueva AdapterView.OnItemClickListener . Esta instancia anónima define el onItemClick ()método de devolución de llamada para mostrar un pan tostado que muestra la posición de índice (basado en cero) del elemento seleccionado (en un escenario real, la posición se podría utilizar para obtener la imagen de tamaño completo para alguna otra tarea ).

  Crear una nueva clase llamada ImageAdapter que se extiende BaseAdapter :

    crear un nuevo ImageView para cada artículo al que hace referencia el
           si no se recicla, inicializar algunos
    referencias a nuestra   

En primer lugar, este implementa algunos métodos necesarios heredados de BaseAdapter . El constructor ygetCount () son fáciles de entender. Normalmente, getItem (int) debe devolver el objeto real en la posición especificada en el adaptador, pero ha ignorado para este ejemplo. Del mismo modo, GetItemID (int) debe devolver la fila Identificación del tema, pero no es necesario aquí.

El primer método es necesario getView () . Este método crea una nueva vista para cada imagen añadida a la ImageAdapter . Cuando esto se llama, una Vista se pasa, que normalmente es un objeto reciclado (por lo menos después de lo que ha sido llamado una vez), por lo que hay una comprobación para ver si el objeto es nulo. Si es nulo, un ImageView se instancia y se configura con las propiedades deseadas para la presentación de la imagen:

·         setLayoutParams (ViewGroup.LayoutParams) ajusta la altura y la anchura de la Vista-esto asegura que, sin importar el tamaño de la estirable, cada imagen se redimensiona y recortada para encajar en estas dimensiones, según el caso.

·         setScaleType (ImageView.ScaleType) declara que las imágenes deben ser recortadas hacia el centro (si es necesario).

·         setPadding (int, int, int, int) define el relleno para todos los lados. (Tenga en cuenta que, si las imágenes tienen diferentes aspecto de ratios, a continuación, menos relleno causará más de recorte de la imagen si no coincide con las dimensiones dadas a la ImageView.)

Si la Vista pasado a getView () es no nulo, el local de ImageView se inicializa con el reciclado Ver objeto.

Al final de la getView () método, la posición de número entero pasa en el método se utiliza para seleccionar una imagen de la mThumbIds matriz, que se establece como el recurso de imagen para el ImageView .

Todo lo que queda es definir el mThumbIds gama de recursos dibujables.

  Ejecute la aplicación.

Pestañas

Los tabs nos van a permitir crear una interfaz de usuario basada en pestañas, donde, de una forma muy intuitiva, podemos ofrecer al usuario diferentes vistas, que son seleccionadas al pulsar una de las pestañas que se muestran en la parte superior:

Para crear una interfaz de usuario con pestañas, es necesario utilizar FragmentTabHost y TabWidget.FragmentTabHost debe ser el nodo raíz para el diseño, que contendrá tanto el TabWidget para la visualización de las pestañas, como un FrameLayout para mostrar el contenido. A continuación se muestra el esquema a utilizar:

Nota: En las primeras versiones de Android se usaba TabHosten lugar de FragmentTabHost. A partir del nivel de API 13, TabHost ha sido declarado obsoleto. Google ha reorientado su jerarquía de clases para introducir el concepto de fragment. No obstante, puedes seguir utilizando TabHost sin ningún problema.

Nota: Hasta la vesión 3.0 (API 11) no aparece FragmentTabHost. Entonces, no podría usarse en niveles de API anteriores. Para resolver este problema, y más generalmente para poder usar fragments en versiones anteriores a la 3.0, Google ha creado la librería de compatibilidad[1] (android.support). Se añade por defecto al crear un nuevo proyecto. Por lo tanto, podemos usar fragments y clases relacionadas desde cualquier versión.

<android.support.v4.app.FragmentTabHost

   android:id="@android:id/tabhost" …/>

   <LinearLayout …>

         <TabWidget

               android:id="@android:id/tabs" …/>

         <FrameLayout

               android:id="@android:id/tabcontent" …>

   </LinearLayout>

</TabHost>