En esta actividad 3 vamos a programar una app dedicada a hacer turismo en una localidad.
Vamos a tener 3 pantallas y un visor de google maps.
Comenzamos configurando la primera pantalla de inicio, que presentará nuestra app. Colocaremos en ella un título "Zamora", y subiremos los medios necesarios: 4 imágenes de la ciudad de Zamora. Pondremos el color de fondo gris claro, y añadiremos una imagen y dos etiquetas.
Conviene destacar que las imágenes seleccionadas no son de dominio público, por lo que antes de publicar la app tendremos que referenciar correctamente la autoría de las imágenes.
En la imagen1 pondremos como foto el cimborrio de la Catedral de Zamora. El ancho, ajustado al contenedor, y escalado de la foto al tamaño máximo.
Etiqueta 1: título de la app "Conoce Zamora", con un tamaño algo más grande (20), ajustado el ancho del texto al contenedor y en negrita.
Etiqueta 2: referencia al autor de la imagen. Al ser tanto texto, para que no se corte tendremos que poner en el ancho "ajustar al contenedor".
La primera pantalla quedaría configurada. Solo faltaría colocar un reloj, que vamos a dejar para que al cabo de un segundo aparezca la pantalla del menú. Añadiremos ventana "menú".
El menú consta de una serie de botones que nos van a llevar después al mapa de localización de ciertos puntos de interés de la ciudad de Zamora.
Colocamos primero una etiqueta, con un tamaño de letra de 20, ajustar el ancho al contenedor para poder centrar el texto, que será "Pulsa sobre la imagen para verla en el mapa". Lo vamos a poner también en negrita.
Colocamos ahora una disposición vertical en la que colocaremos 3 botones y 3 etiquetas.
Botón1: imagen de la Catedral de Zamora. Es una imagen muy grande, por lo que debemos cambiar su tamaño: 100px de alto, 200 px de ancho. Eliminamos el texto del botón para que no aparezca sobre la imagen.
Etiqueta 2: cita sobre el autor de la imagen. Ancho ajustado al contenedor y alto 50px para que no pise el siguiente botón.
Botón 2: imagen del ayuntamiento de Zamora. Modificamos el alto y el ancho, y borramos el texto.
Etiqueta 3: cita del autor de la imagen.
Botón 3: cariátides.
Etiqueta 4: cita de las cariátides.
Vemos que tanta imagen hace que la pantalla sea pequeña. Para arreglar esto, nos vamos a las propiedades de esta ventana y le decimos que sea "enrollable". Así saldrá la barra lateral que nos permitirá subir y bajar la pantalla.
Ya tenemos configurada la pantalla con el menú de nuestra app.
A continuación vamos a crear la última pantalla, en la que aparecerá un mapa (de google maps) en el cual estará localizado el punto de interés sobre el que haya pulsado el usuario. Añadir ventana, con nombre "mapa".
Será una pantalla donde únicamente aparecerá el elemento "activitystarter" (en conectividad), elemento que permite abrir otra app del móvil.
Configurar sus propiedades:
- Acción: android.intent.action.view
- Clase: como vamos a llamar a la app google maps, pondremos com.google.android.maps.mapsactivity
- Paquete: el paquete de google maps: com.google.android.apps.maps
Ya tenemos configuradas las tres pantallas. Nos vamos ahora a la zona de bloques a configurar el comportamiento de las tres pantallas. Empezaremos con la primera pantalla, inicio. Cuando transcurre un segundo, se abre la segunda pantalla de menú (en control). Llamamos por tanto al reloj y, cuando se cumple su intervalo, abriremos la pantalla cuyo nombre es "menú". Quedaría así:
Pasamos ahora a programar la pantalla del menú. Al hacer click en cada uno de los botones, debemos abrir el mapa, pero debemos decirle a la pantalla mapa qué botón hemos pulsado. Tenemos que usar entonces el bloque "abrir pantalla con valor inicial". Cuando pulso el botón1, el nombre de la pantalla será "mapa" y el valor inicial será "catedral". Utilizamos la opción de duplicar para los demás botones, quedando al final una cosa parecida a esta:
Iremos ahora a la pantalla mapas, y le diremos qué botón hemos pulsado. En esta pantalla, lo primero que debemos hacer es ver con qué valor inicial llegamos de la pantalla anterior. Esto ocurrirá al inicializarse. Utilizaremos el bloque condicional para ver qué botón se ha pulsado, con tres entradas.
Utilizamos una comparación y decimos "si el valor inicial es catedral, tendremos que hacer una serie de cosas; si no, si el valor inicial es ayuntamiento, hará otras cosas, si no, solo queda la opcion inicial cariátides, or lo que hará otras cosas.
Ahora le diremos a google maps cuál es la dirección del elemento que queremos mostrar en el mapa. Para ello tenemos que decirle a google maps cuál es la uri del dato del activitystarter. Cada punto tiene una dirección, que pondremos como texto. En este texto pondremos la dirección de google maps de cada uno de los puntos de interés.
Abrimos google maps en nuestro navegador y buscamos los mapas. Catedral de zamora (en maps), compartir, copiamos la url y la ponemos en el texto de la app. Lo mismo con el ayuntamiento y las cariátides.
Por último, llamaremos al activity starter para que inicie la actividad. Solo nos quedaría conectar con el emulador y comprobar que funciona correctamente.
Partiendo de la actividad guiada 3, crea una app que sirva de guía turística en tu localidad, con al menos tres puntos de interés. Puedes añadir un visor Web para enlazar con alguna página de interés.
Vamos a tener 3 pantallas y un visor de google maps.
Comenzamos configurando la primera pantalla de inicio, que presentará nuestra app. Colocaremos en ella un título "Zamora", y subiremos los medios necesarios: 4 imágenes de la ciudad de Zamora. Pondremos el color de fondo gris claro, y añadiremos una imagen y dos etiquetas.
Conviene destacar que las imágenes seleccionadas no son de dominio público, por lo que antes de publicar la app tendremos que referenciar correctamente la autoría de las imágenes.
En la imagen1 pondremos como foto el cimborrio de la Catedral de Zamora. El ancho, ajustado al contenedor, y escalado de la foto al tamaño máximo.
Etiqueta 1: título de la app "Conoce Zamora", con un tamaño algo más grande (20), ajustado el ancho del texto al contenedor y en negrita.
Etiqueta 2: referencia al autor de la imagen. Al ser tanto texto, para que no se corte tendremos que poner en el ancho "ajustar al contenedor".
La primera pantalla quedaría configurada. Solo faltaría colocar un reloj, que vamos a dejar para que al cabo de un segundo aparezca la pantalla del menú. Añadiremos ventana "menú".
El menú consta de una serie de botones que nos van a llevar después al mapa de localización de ciertos puntos de interés de la ciudad de Zamora.
Colocamos primero una etiqueta, con un tamaño de letra de 20, ajustar el ancho al contenedor para poder centrar el texto, que será "Pulsa sobre la imagen para verla en el mapa". Lo vamos a poner también en negrita.
Colocamos ahora una disposición vertical en la que colocaremos 3 botones y 3 etiquetas.
Botón1: imagen de la Catedral de Zamora. Es una imagen muy grande, por lo que debemos cambiar su tamaño: 100px de alto, 200 px de ancho. Eliminamos el texto del botón para que no aparezca sobre la imagen.
Etiqueta 2: cita sobre el autor de la imagen. Ancho ajustado al contenedor y alto 50px para que no pise el siguiente botón.
Botón 2: imagen del ayuntamiento de Zamora. Modificamos el alto y el ancho, y borramos el texto.
Etiqueta 3: cita del autor de la imagen.
Botón 3: cariátides.
Etiqueta 4: cita de las cariátides.
Vemos que tanta imagen hace que la pantalla sea pequeña. Para arreglar esto, nos vamos a las propiedades de esta ventana y le decimos que sea "enrollable". Así saldrá la barra lateral que nos permitirá subir y bajar la pantalla.
Ya tenemos configurada la pantalla con el menú de nuestra app.
A continuación vamos a crear la última pantalla, en la que aparecerá un mapa (de google maps) en el cual estará localizado el punto de interés sobre el que haya pulsado el usuario. Añadir ventana, con nombre "mapa".
Será una pantalla donde únicamente aparecerá el elemento "activitystarter" (en conectividad), elemento que permite abrir otra app del móvil.
Configurar sus propiedades:
- Acción: android.intent.action.view
- Clase: como vamos a llamar a la app google maps, pondremos com.google.android.maps.mapsactivity
- Paquete: el paquete de google maps: com.google.android.apps.maps
Ya tenemos configuradas las tres pantallas. Nos vamos ahora a la zona de bloques a configurar el comportamiento de las tres pantallas. Empezaremos con la primera pantalla, inicio. Cuando transcurre un segundo, se abre la segunda pantalla de menú (en control). Llamamos por tanto al reloj y, cuando se cumple su intervalo, abriremos la pantalla cuyo nombre es "menú". Quedaría así:
Pasamos ahora a programar la pantalla del menú. Al hacer click en cada uno de los botones, debemos abrir el mapa, pero debemos decirle a la pantalla mapa qué botón hemos pulsado. Tenemos que usar entonces el bloque "abrir pantalla con valor inicial". Cuando pulso el botón1, el nombre de la pantalla será "mapa" y el valor inicial será "catedral". Utilizamos la opción de duplicar para los demás botones, quedando al final una cosa parecida a esta:
Iremos ahora a la pantalla mapas, y le diremos qué botón hemos pulsado. En esta pantalla, lo primero que debemos hacer es ver con qué valor inicial llegamos de la pantalla anterior. Esto ocurrirá al inicializarse. Utilizaremos el bloque condicional para ver qué botón se ha pulsado, con tres entradas.
Utilizamos una comparación y decimos "si el valor inicial es catedral, tendremos que hacer una serie de cosas; si no, si el valor inicial es ayuntamiento, hará otras cosas, si no, solo queda la opcion inicial cariátides, or lo que hará otras cosas.
Ahora le diremos a google maps cuál es la dirección del elemento que queremos mostrar en el mapa. Para ello tenemos que decirle a google maps cuál es la uri del dato del activitystarter. Cada punto tiene una dirección, que pondremos como texto. En este texto pondremos la dirección de google maps de cada uno de los puntos de interés.
Abrimos google maps en nuestro navegador y buscamos los mapas. Catedral de zamora (en maps), compartir, copiamos la url y la ponemos en el texto de la app. Lo mismo con el ayuntamiento y las cariátides.
Por último, llamaremos al activity starter para que inicie la actividad. Solo nos quedaría conectar con el emulador y comprobar que funciona correctamente.
Partiendo de la actividad guiada 3, crea una app que sirva de guía turística en tu localidad, con al menos tres puntos de interés. Puedes añadir un visor Web para enlazar con alguna página de interés.
Comentarios
Publicar un comentario