programación básica con android introducción - … · res –> values -> strings.xml y...
TRANSCRIPT
Programación básica con android
Aurelio López Ovando 1
Introducción
En este primer tutorial diseñado para la materia de programación básica, veremos cómo iniciarse en la programación android de
una manera sencilla, utilizaremos cono entorno de desarrollo que vamos a utilizar será Eclipse, se asume que el lector tiene
conocimientos de java y del uso de eclipse, de no ser así sería bueno leerse unos tutoriales antes de iniciar, para una mejor
compresión serpía bueno ir siguiendo lo que aquí se muestra e ir analizando la información aquí presentada.
1. Crear el proyecto
La secuencia para crear el proyecto es la siguiente: File -> New -> Android Application Project.
Nombre del proyecto y de la aplicación, normalmente
coinciden, pero no es una regla ya que Application Name
será el nombre que aparecerá a los usuarios en sus
teléfonos al instalar la app y Project Name es el nombre
del directorio donde se guardará el proyecto mientras lo
desarrollamos.
Package Name es el espacio de nombres
donde se organizarán nuestros archivos y
al mismo tiempo es una manera de ir
firmando la app.
Versiones de sistema operativo mínimo y
máximo sobre los que correrá nuestra app.
Programación básica con android
Aurelio López Ovando 2
Si marcamos esta opción, podremos en la siguiente
pantalla seleccionar el ícono de arranque de nuestra
aplicación, que normalmente es un “androidcito” o
podremos subir nuestro propio ícono.
Con esta opción podemos seleccionar en las
siguientes pantallas, un activity o pantalla de inicio de
nuestra aplicación.
Especificamos que queremos crear nuestra aplicación
en el workspace de eclipse, si quisiéramos crear
nuestro proyecto en otra carpeta, debemos
desmarcar esta casilla.
Como en la pantalla anterior marcamos la casilla
“Create custom launcher icon” ahora podemos
configurar el ícono de nuestra app, aquí te
recomiendo que navegues y veas tu mismo las
diferentes modalidades o configuraciones del
ícono.
Programación básica con android
Aurelio López Ovando 3
Después de todos estos pasos pulsamos el botón “Finish”.
Simliar al anterior, como previamente, dos pantallas
antes, marcamos la casilla “Create activity” ahora
podemos escoger unos templates de pantallas de
inicio, te recomiendo que de momento escojas la
opción “Blank Activity” ya mas adelante que tengas
más conocimiento, explores en las otras opciones.
Esta parte es crucial, ya que el desarrollo
android está basado en la arquitectura
“Modelo-Vista-Controlador”, en esta sección
damos nombre a nuestro controlador, que no
es otra cosa que un archivo con la extensión
.java y a nuestra vista que es representado
por archivo von la extensión .xml (El modelo
queda pendiente aún).
Donde dice “Activity Name” he puesto
Principal (La primera letra mayúscula),
me generará un archivo llamado
“Principal.java” que contendrá el código
en java del controlador de la app. Nota:
He borrado el nombre predeterminado
que era “MainActivity”.
Donde dice “Layout Name” he puesto
principal (todo en minúsculas), que me
generará un archivo “principal.xml”, que
representa la vista o parte gráfica de
nuestra pantalla o activity de inicio.
Nota: He cambiado el nombre
predeterminado que era“activity_main”.
Programación básica con android
Aurelio López Ovando 4
2. Pantalla de trabajo
Una vez creado el proyecto veremos la pantalla principal de trabajo, similar a la siguiente:
Todas estas secciones deben ser identificadas de manera adecuada, al fin de cuentas se trata de un ambiente de desarrollo
integrado (IDE) donde una sección trabaja con otra.
Package explorer: Muestra las carpetas de los proyectos
existentes en nuestro wokspace, incluye el proyecto actual
en el que estamos trabajando, hay que tener cuidado de
no perderse, lo recomendable es replegar las carpetas
todas las carpetas y dejar desplegada la de nuestro
proyecto.
Palette: Tiene todas las herramientas o
controles gráficos que podremos utilizar
para diseñar nuestra app, organizadas en
categorias
Activity inicial, en este ejemplo es el archivo llamado
“principal.xml”, el cual representa la vista de nuestro
proyecto, podemos verlo también como un lienzo en
blanco donde iremos colocando los controles de la sección
“Palette” hasta dar forma a nuestra aplicación. No tiene
que ser el único, a medida que necesitemos podremos ir
creando más activitys.
Outline: Muestra los detalles de los controles
que se han ido colocando sobre el activity.
Programación básica con android
Aurelio López Ovando 5
3. Estructura de directorio del proyecto en el package explorer
Al crear el proyecto se genera una serie de carpetas, cada una con sus respectivos usos, veamos las más importantes:
Estas son las secciones que por el momento es importante sean bien identificadas, para concluir:
src es la abreviación de “source” y contiene todo el código que se utilice en la aplicación, es decir es la parte
correspondiente al controlador, recordemos que el controlador es el código que hace funcionar a la vista.
res es abreviación de “resource” y aquí siempre encontraremos diferentes recursos de nuestro proyecto como por
ejemplo: íconos, imágenes, sonidos, textos, menús, etc.
gen es la abreviación de “Generated” y en esta sección encontraremos archivos de configuración con código que se
genera automáticamente por eclipse.
Con esta ideología ya podemos avanzar y ver cada uno de manera detallada.
Principal.java contiene el código(controlador) que mueve a toda la app,
a medida que avancemos el proyecto seguramente iremos creando otros
archivos de código, pero particularmente este es que contiene el código
inicial de la aplicación.
R.java es un archivo de definición, podemos verlo como una bitácora
donde se van registrando todos los controles que vayamos colocando
sobre los activitis, tiene una sección llamada “id” donde podremos ver
las definiciones de dichos controles antes mencionados.
principal.xml es el archivo que contiene la parte gráfica de nuestra
aplicación(vista).
strings.xml todos los textos que se utilicen en la vista deben estar
definidos en esta sección.
Programación básica con android
Aurelio López Ovando 6
4. Activity y Palette
Ahora que ya conocemos la estructura del directorio del proyecto (si no le entendiste a medida que avancemos podrás
entenderlo de mejor manera), veamos cómo darle forma a nuestro activity.
Vamos a la carpeta res –> layout -> principal.xml y abrimos el archivo, nos aparecerá algo como esto:
Este es el código XML cuando damos clic en “principal.xml”, para regresar a la parte gráfica damos click en “Graphical Layout”.
Es importante conocer el código porque hay cosas que de manera gráfica no podremos configurar, sin embargo para este curso
trataremos de meternos los menos posible en esta sección, todo lo que hagamos será de manera gráfica.
Hagamos una aplicación básica, pediremos el nombre de una persona y más abajo aparecerá una leyenda saludando a esa
persona… (Algo así como el “Hola mundo recargado”).
Debajo del activity podemos ver dos pestañas:
Graphical Layout que es la que vemos en la
imagen, nos muestra el activyti de manera
gráfica.
principal.xml nos muestra el código en XML
del activity, podemos dar clic en ambos y ver
que pasa.
Programación básica con android
Aurelio López Ovando 7
Antes de comenzar, es bueno tener identificados los controles básicos, en la sección “Palette”
encontramos una serie de controles organizados en pestañas desplegables, en la sección “Form
Widgets” encontramos los botones (Button) y las etiquetas (TextView), los botones no necesitan
explicación de para que sirven, los TextView son etiquetas o textos que colocaremos en nuestros
activitys.
En la sección “Text Fields” encontramos los que en Windows conocemos como “textbox” para los
que vienen de .net o “editbox” para los que vienen de Visual Basic, pero que en android
llamaremos “EditText” que no son otra cosas que los cuadros de diálogos en donde los usuarios
pueden introducir información. Como podemos ver se nos ofrece una serie de EditText
preconfigurados dependiendo del tipo de dato que se va a introducir, por ejemplo si queremos un
campo de contraseña, escogeríamos “Password”, donde sabemos que los caracteres no se
mostrarán, solo aparecerán unos puntitos. (Si has iniciado sesión en algún teléfono sabrás de lo
que te hablo), y así sucesivamente, es cuestión de meterse a la documentación y ver cómo
funciona cada uno de ellos.
Algo asi como se muestra en la figura:
Colocar controles en el activity. Una vez aclarado el punto, prosigamos con el ejemplo, cuando creamos el activity en blanco,
en realidad no bien en blanco, podemos ver que trae un encabezado y un TextView que dice “Hello world!”… lo primero que
haremos será eliminar el TextView, demos un click sobre el y pulsemos la tecla “Supr” y listo, se ha eliminado
Una vez teniendo nuestro activity en blanco, vamos a darle forma a nuestra
aplicación, necesitamos colocar sobre el activity Un nuevo TextView, un Editext, un botón y al final otro TextView.
Nota: Para colocarlo solo debes ir a la paleta, escoger el control que necesitas y arrastrarlo al activity.
Programación básica con android
Aurelio López Ovando 8
Como decía anteriormente, ahora debemos darle la siguiente forma al activity principal:
Una vez colocado los controles, podemos ver el
la ventana del outline y veremos que nos
muestra los controles que hemos colocado
sobre el activity.
Nombrar los controles. Es importante
colocar un nombre(id) a cada elemento
colocado en el activity, sin embargo no a todos,
es decir, se debe hacer un análisis de que
elementos son lo que realmente necesitan ser
nombrados, esto es fácil, si el elemento servirá
para entrada de datos o para mostrar la salida
de algún proceso, es importante que lo
nombremos, por ejemplo en este ejemplo, solo es indispensable nombrar el EditText, al Button y al segundo TextView… el
primero porque ahí el usuario tecleará su nombre, el botón porque es debemos capturar cuando sea pulsado y el último porque
mostrará el saludo… el primer TextView no lo nombraremos, porque solo será un simple texto, aunque podría hacerse sin ningún
problema.
Para nombrar un control damos click derecho y escogemos la opción: “Edit ID” y en el cuadro de diálogo que aparece colocamos
el nombre deseado, en este ejemplo cambiaremos “editText1” a “txNombre”.
Hacemos lo mismo para cada elemento de manera que los nombre sque utilizaremos serán: txNombre, btnSaludar, txSaludo, de
tal manera que si checamos el OutLine debemos tener algo similar a lo siguiente:
Programación básica con android
Aurelio López Ovando 9
Cuando asignamos los nombres a cada control, estos se van bitacorizando o registrando en el archivo R.Java, podemos
encontrarlo en la carpeta gen:
En este archivo encontraremos una sección llamada “id” en la cual se van agregando las direcciones de memoria donde se han
guardado estos elementos, es importante tener en cuenta esto, ya que más adelante invocaremos a dichos controles mediante
la invocación a “R.id.nombreControl” donde nombreControl podría ser cualquiera de los nombres ahí registrado, más adelante
veremos este código que aquí menciono.
Cambiando los textos. Una vez que hemos colocado los nombres correspondientes a cada control, ahora debemos darle una
mejor apariencia, para ello debemos colocarle el texto correspondiente a los controles que así lo requieran, de tal manera que
en nuestro ejemplo el primer TextView diga: “Teclea tu nombre”, el botón diga: “Saludar” y el segundo TextView diga: “Hola”.
Para ello debemos crear esas tres cadenas(strings) por separado y luego asignárselas a los controles correspondientes, vamos a
res –> values -> strings.xml y abrimos el archivo, nos aparece una ventana como la siguiente:
Tenemos dos formas de agregar nuestras cadenas, una de ellas es
de manera gráfica pulsando el botón “Add” y agregando las
cadenas y los textos y la otra, que es la que usaremos en este caso,
es haciéndolo por código.
En la parte de abajo hay dos pestañas, una dice Resources y la otra
dice strings.xml, justo ahí daremos click y se nos mostrará un
código en xml de las cadenas, podemos dar click en esta pestaña y
veremos un código como el de la imagen que se muestra más
abajo.
Programación básica con android
Aurelio López Ovando 10
Procedemos a agregar nuestras tres cadenas, de manera que nos quede como se muestra a continuación :
Al agregar un string debemos considerar dos
partes:
La primera es el nombre(name) del string,
por ejemplo en la primera cadena el
nombre es: “textoEntradaNombre”.
La segunda es el contenido del texto, en la
primera cadena es “Teclea tu nombre” .
La diferencia entre uno y otro es que el
nombre del string es con el que la invocaremos para asignárselo a algún control y el contenido es el texto que será visible en los
controles.
Ahora si procedemos a utilizar estos textos en los controles correspondientes, para ellos regresamos al activity Principal.Xml y
muy similiar a cuando cambiamos el ID, damos click derecho sobre el control deseado y escogemos la opción “Edit Text”:
Se nos mostrará un cuadro que contiene una lista con todos los strings existentes, aquí es
cuestión de ser congruentes y asignarle al control el string que le corresponda y pulsar el
botón “OK”, lo cual se reflejará
inmediatamente en el texto de
dicho control.
Podemos observar dos cosas, una de ellas es que el texto ha cambiado, y
la otra es que el ícono del warning ha desaparecido, esto es
porque cuando se agrega un control al activity, el compilador detecta que
el texto que utiliza sigue siendo el
que trae por default y lo correcto es
crear un string para cada texto
como ya había mencionado
anteriormente.
Asignamos los textos a cada control
que asi lo requiera hasta tener algo
como esto:
Ahora nuestra pantalla va agarrando mas forma, con esto hemos terminado la parte del
diseño(vista), podríamos correr nuestra app y ver cómo va quedando, pero antes de eso
mejor trabajemos con la parte del controlador.
Programación básica con android
Aurelio López Ovando 11
Vamos a la carpeta src y buscamos el archivo “Principal.java”, como mencionamos anteriormente, aquí se encuentra el código
que hace funcionar a la vista.
Una vez habiendo conocido las partes principal del código comencemos a programar nuestra app, lo primero que vamos a hacer
es conectar nuestro código con la vista, mediante código definiremos un EditText y dos TextView, el botón lo manejaremos de
manera diferente, así que no es necesario definirlo.
Seguramente al definir un control, en este caso EditText, marcará un error debido a que la librería del EditText no está definida.
Podemos solucionarlo mediante la combinación de teclas ctrl + shift + O(recomendada), otra manera de solucionarlo es dar clic
sobre el ícono del error y escoger algo como se muestra en la figura:
Cualquiera de las dos opciones agregará la librería correspondiente y dejará de marcar dicho error.
Esto mismo haremos con los otros controles, los definimos y agregamos las librerías correspondientes.
Despliega todas las librerías
utilizadas en el código.
Es la función principal del proyecto,
es decir cuando la app es ejecutada,
es este método el que se ejecuta
primero, por lo tanto aquí debe
comenzar nuestra programación.
Menú prederminado que tiene
nuestra pp al pulsar el botón menú
del teléfono, podemos modificarlo
o crear otros.
Error al definir el EditText El error es debido a que no se
encuentra definida la librería para la
clase EditText.
Programación básica con android
Aurelio López Ovando 12
Los nombres utilizados para los controles podrían ser los mismos nombre que
usamos en la vista sin ningún problema, pero para efectos de explicar el código le
cambiamos tantito poniendo una C al final.
Ahora lo que debemos hacer es conectar estos a los definidos en la vista, si
recordamos, anteriormente dijimos que los nombre utilizados en la vista se graban
en un archivo llamado R.Java en una sección llamada “id”, pues bien, aquí haremos
uso de ello, mediante la instrucción findViewById().
Podemos fijarnos que hemos conectado a cada
control de la vista con su respectivo control del
controlador, el botón lo hemos dejado fuera, porque
la conexión la haremos de manera diferente.
Ahora lo que procede es hacer un método que se
ejecute al pulsar sobre el botón, de manera que
tome el texto tecleado en txNombreC y se lo mande a
tvSaludo para que aparezca como saludo.
Sería de mucha ayuda que el estudiante conozca el funcionamiento de eclipse, ya que cuenta con algunas herramientas para
agilizar la captura de código, como por ejemplo crtl + space que autocompleta algunas palabras, pero bueno ya regresando al
punto, el código que vamos a emplear es el siguiente:
Aún no hemos terminado, debemos hacer funcionar el botón, existen tres maneras de detectar el pulsado del botón, dos de ellas
es por código, la que usaremos en este ejemplo desde mi punto de vista es la manera más sencilla, ya que definimos un método
(que en este caso ya lo hicimos y se llama saludar), y de manera gráfica nos vamos a las propiedades del botón y ahí escribimos
el nombre de dicho método, asi como se muestra a continuación.
Abrimos el activity “principal.xml”.
Damos click derecho sobre el botón y escogemos: Other Properties -> Inherited from View -> Onclick
Creamos un método, que en este
caso lo llamaremos “saludar” en
donde crearemos la rutina que se
ejecutará el pulsar el botón.
getText() obtiene el texto
contenido en un control, en este
caso el control EditText llamado
txNombre.
setText() estable o asigna el texto a
un control, en este caso al control
tvSaludo.
Programación básica con android
Aurelio López Ovando 13
En la ventana que aparece escribimos el nombre del método que queremos que se ejecute.
Listo, hemos terminado nuestro programa, guardamos todo lo que hemos hecho y ahora ya
podemos correrlo y ver que funcione.
5. Corriendo nuestra app
Para ver cómo funciona nuestra app, podemos hacerlo mediante un emulador o directamente en
el teléfono, para hacerlo mediante el emulador debemos crear uno, para ellos damos clic en el la
pestaña Windows -> Android Virtual Device Manager.
De la ventana que aparece damos clic en el botón “New”.
Programación básica con android
Aurelio López Ovando 14
Y configuramos nuestro emulador.
Ya que configuramos nuestro emulador damos clic en el botón “OK” y
ahora nos aparece en el listado de emuladores el que hemos creado,
podemos cerrar la ventana, el emulador queda guardado para ser utilizado
cuando necesitemos.
Ahora vamos a hacer uso de el, vamos al menú Run -> Run Configurations
Nombre con el que identificaremos al emulador, podemos tener
varios emuladores si queremos.
Modelo del teléfono que queremos emular, existe una serie de
marcas y modelos, algunos requieren mas memoria que otros.
Versión de android que queremos emular
1.- Seleccionamos la opción “Android Application”
2.- Damos click en el botón “New launch
configuration”
3.- Pulsamos el botón “Browse” y de la ventana que
aparece elegimos nuestro proyecto.
Programación básica con android
Aurelio López Ovando 15
En la pertaña “Target” marcamos el emulador que tenemos disponible, damos click en el botón “Apply” y luego en el botón
“Run”
Tenemos cono resultado lo siguiente:
Para correrlo en el teléfono, primero debemos considerar que el teléfono tenga “Android” como sistema operativo y
que no sea una versión tan antigua.
Debemos conectar el teléfono a la PC y asegurarnos que el controlador del teléfono se instale correctamente,
normalmente la instalación es automática, de no ser así habría que buscar los controladores manualmente en internet.
Entre las cosas que cambian son las siguientes al momento de correr la aplicación es la siguiente:
1.- Seleccionamos menú Run -> Configuration manager.
2.- Debemos seleccionar la opción “Always prompt to pick divice”, pulsar el botón “Apply” y luego el botón “Run”.
Programación básica con android
Aurelio López Ovando 16
Se nos muestra en una nueva ventana un listado con el teléfono que se encuentra conectado a la PC, en este caso lo estoy
corriendo desde un HTC.
Lo seleccionamos y damos clic en el botón “OK”, esto hará que la app se ejecute en nuestro teléfono directamente, a
continuación se muestra una captura de la app corriendo en el teléfono.
Está por demás decir que en cualquiera de los dos casos anteriores, si existieran errores, la aplicación no correría, es más
recomendable correrla directamente en el teléfono ya que el emulador no cuenta con todos los servicios que se necesitan en
muchas aplicaciones.
Espero este primer material haya sido de mucha ayuda, los siguientes no serán tan detallados, partiremos de la idea que el lector
ya sabe como crear un proyecto y veremos nuevas cosas, saludos.