Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 1
Aspectos iniciales y creación del proyecto
Objetivo: Realizar un diccionario que pueda traducir palabras escritas en español al lenguaje maya utilizando un dispositivo
android.
De inicio necesitamos una base de datos a la que llamaremos: ”Traductor.db” en esta pequeña base de datos tendremos una
tabla, es importante hacer mención que tanto las imágenes como los audios serán referenciables, es decir, no estarán
almacenados propiamente en la base de datos, sino que estarán en la carpeta de recursos y simplemente serán invocados
desde la aplicación cuando sea necesarios.
La tabla que necesitamos la llamaremos “palabras” que contendrá los siguientes campos y datos de inicio.
_id espanol maya archivo
1 Abeja Kaab abeja
2 Abrazar Meek abrazar
3 Abuela Chiich abuela
4 Abuelo Nool abuelo
5 Adivinar Na’a adivinar
6 Agua Ha agua
7 Aguacate Oon aguacate
8 Aire Iik aire
9 Alacrán Siina alacrán
10 albañil Meen Pack albañil
¿Que necesitamos para comenzar a trabajar?
Antes de comenzar a darle forma al proyecto es necesario que contemos con los archivos que vamos a utilizar, esto con el fin
de que cuando comencemos con el desarrollo optimicemos el tiempo lo más que se pueda y las actividades mayormente sean
de desarrollo, para ello es importante que contemos con la siguiente lista:
1 Un banco de palabras en español las cuáles serán las que contendrá el diccionario, por cuestión de tiempo en este
ejemplo utilizaremos solamente 10 palabras.
2 Las correspondientes traducciones de las palabras anteriores en maya.
3 Audio en mp3 de las pronunciaciones en maya.
4 Imágenes correspondientes a las palabras del diccionario.
5 Iconos a utilizar.
Para este ejemplo utilizaré los siguientes archivos, las imágenes están en formato PNG y los sonidos en mp3.
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 2
1.- Creamos un proyecto al que llamaremos MakTool
Creamos el proyecto y como ícono escogemos el archivo “ceroIcon.png”, el nombre del proyecto es una palabra en maya que
significa “Hombre diciendo”, personalizamos el ícono de la aplicación.
2.- Agregar los archivos a la carpeta de recursos
Buscamos la carpeta “res” esta carpeta, contiene los recursos externos a utilizar en el proyecto, al decir
recursos externos, nos referimos a: imágenes, audios, videos, íconos, etc…, pues bien, en esa carpeta
debemos colocar los archivos de los recursos a utilizar.
En este caso específico, vamos a comenzar con las imágenes que queremos mostrar, si desplegamos la
estructura de carpetas veremos que tiene: drawable-hdpi, darwable-ldpi, layout, etc… cada una con
una función específica, para no generar confusiones lo más adecuado será crear nuestra propia carpeta
y de ahí colocar nuestras imágenes, a esta nueva carpeta le llamaremos “drawable”.
Para ellos damos clic derecho sobre la carpeta “res” y “New -> folder”.
En la ventana que aparece, escribimos el nombre de la carpeta que para este
caso la llamaremos “drawable” y pulsamos en el botón finish, como se
muestra en la figura.
Ahora debemos tener una nueva subcarpeta
dentro de la carpeta res, lo que ocupa ahora es
agregar los archivos que necesitamos a dicha
subcarpeta.
Una manera sencilla de hacerlo es arrastrando las imágenes deseadas desde una carpeta de
explorador de Windows hasta esta carpeta “drawable” en eclipse, cuestión de acomodar las ambas ventanas para poder
hacerlo sin complicaciones. (Nota: El archivo “ceroIcon.PNG” no es necesario arrastrarlo a los recursos porque
automáticamente se agregó cuando seleccionemos el ícono al crear el proyecto. )
Se arrastran los archivos
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 3
Si lo hacemos de manera correcta nos aparece un cuadro de diálogo preguntándonos si queremos copiar el archivo a lo cual
diremos que “sí” marcando la opción “Copy files”, podríamos arrastrar más de un archivo a
la vez si así lo quisiéramos.
Ahora toca el turno a los archivos de audio, el proceso es similar, solo que ahora crearemos una
carpeta llamada “raw” y ahí arrastraremos los mp3 que ocuparemos, no se explicará porque el
proceso es idéntico al utilizado para las imágenes.
Hasta este punto ya tenemos los recursos que necesitamos para nuestro proyecto, ahora
3.- Diseño de la pantalla principal
Primero quitaremos el mensaje que “Hello Wordl!!” que aparece de manera prederminada, y
seguidamente de ello cambiaremos el nombre de la aplicación, para lograrlo abriremos el archivo
“strings.xml” y dejémoslo como se muestra a continuación
No olvidemos que para que los cambios se reflejen se debe guardar constantemente.
La etiqueta que dice “app_name” corresponde al texto del nombre de la aplicación, las otras etiquetas las utilizaremos más
adelante.
En conclusión, debemos tener una pantalla limpia como la que se muestra en la figura:
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 4
Ahora uno de los retos a los que nos enfrentamos es diseñar las interfaces de usuario (de ahora en adelante “UI”) de nuestra
aplicación, la gran cantidad de tamaños y resoluciones de pantalla que nos esperan allí hacen que esta tarea pueda resultar
complicada. Para lograr esto trabajaremos con los “Layouts” que nos proporciona controles para manejar nuestras pantallas, primeramente
centrémonos en la ventana del “Outline” cambiemos el tipo de Layout que tenemos, para ello clic derecho donde dice
“RelativeLayout” y escogemos la opción: “Change Layout” del cuadro de diálogo que aparece escogemos la que dice
“LinearLayout(Vertical)”.
A este layout le podemos modificar su ID, en este caso lo modifiqué y le puse como nombre “CPrincipal” (Click derecho sobre
“LinearLayout1 ” -> Edit ID).
El LinearLayout, dependiendo si escogemos la orientación vertical u horizontal, divide el activity en renglones o filas, en donde
para cada fila o renglón podremos utilizar solo un control.
Lo que debemos hacer ahora es jugar con los diferentes tipos de activity y darle la forma que necesitemos, para este ejercicio
queremos una forma mas o menos como esta.
Botón para traducir Buscador de palabras
Botón para ir al listado
Logotipo
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 5
Entonces juguemos un rato con estos activity y combinémoslos, primero arrastremos los siguientes layouts a CPrincipal en este
orden:
LinearLayout(Horizontal)
FrameLayout
LinearLayout(Vertical)
Obtenemos algo así:
Si nos marca algún error, seguramente es porque no se ha definido la orientación, para ellos tendremos que irnos al código
XML.
Y modificamos el código asignándole al atributo “Orientation”
De esta manera tenemos 3 layouts embebidos al layout CPrincipal,
nuestro activity Principal aún continúa en blanco.
Modificamos sus ID: Click
derecho -> Assing ID
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 6
Ahora ya podemos arrastrar los controles que necesitamos, en Header pondremos: un TextView, un TextField (AutoComplete) y
un ImageButton.
Debemos tener algo como esto:
Ahora lo que corresponde es editar los ID de los controles para que quede de esta manera:
Por ahora nos marca algunos warnings, para corregirlos
debemos irnos nuevamente al código .XML y modificar los
siguientes parámetros como se muestran en la figura :
Arrastramos el TextView, lo mismo que un
TextField(AutoComplete) y lo soltamos sobre
Header
Cuando arrastremos el ImageView nos va a pedir una imagen, la que seleccionaremos
será de la lupa (que subimos previamente y se encuentra en la carpeta drawable)
Introducción a las DB en android
Aurelio López Ovanbdo – http://aureliux.wordpress.com 7
Evidentemente debemos agregar el String “textoDescImage”
Después de esto tenemos un encabezado mas decente, asi también los warning del Outline han desaparecido:
En el layout que corresponde a Body lo utilizaremos para mostrar el logotipo de nuestra app, para ello arrastremos un
ImageView y la seleccionemos la imagen “logo.PNG”, ahora cambiemos el ID y le ponemos como
nombre “imgLogo”.
Ahora trabajemos en el Footer, y coloquemos un TextView y in ImageButton, la imagen que utilizaremos para el botón será
diccionario.PNG que ya subimos previamente, necesitaremos agregar un string que diga “Ir al diccionario”.
Configuramos los ID de estos controles y les llamaremos: txBotonDiccionario y btnDiccionario.
Con esto hemos terminado el diseño inicial de la pantalla principal, aún quedan algunas cosas por corregir, pero las iremos
trabajando a lo largo que dure el proyecto.