Que necesitamos para comenzar a trabajar?

Transcripción

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. Aurelio López Ovanbdo 1

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 Aurelio López Ovanbdo 2

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: Aurelio López Ovanbdo 3

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. Buscador de palabras Botón para traducir Logotipo Botón para ir al listado Aurelio López Ovanbdo 4

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í: Modificamos sus ID: Click derecho -> Assing ID 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. Aurelio López Ovanbdo 5

6 Ahora ya podemos arrastrar los controles que necesitamos, en Header pondremos: un TextView, un TextField (AutoComplete) y un ImageButton. 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) 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 : Aurelio López Ovanbdo 6

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. Aurelio López Ovanbdo 7