Bienvenidos sean a este post, hoy agregaremos una nueva vista para poder visualizar los lugares que carguemos para ello vamos a utilizar la app Mis Lugares, sino lo crearon les recomiendo este post para hacerlo y hacer la modificacion realizada en este post, si ya lo tienen todo creado prosigamos con este caso.
Primero vamos a descargar este archivo mislugares, en este archivo tendremos todos nuestros iconos, una vez descargado lo descomprimiremos en alguna carpeta de nuestro equipo, puede ser cualquiera pero recuerden cual es, ahora procederemos a agregarlos dentro del recurso res/drawable, primero veamos como esta nuestra app hasta ahora
Ahora iremos a la carpeta donde descomprimimos nuestros archivos
Los seleccionamos a todos y los copiamos, bien por el menu del boton derecho o con Ctrl+C, luego vamos al editor y sobre el recurso drawable pulsamos Ctrl+V o con el boton derecho elegimos Paste como se ve en la siguiente imagen
En cualquiera de los casos nos aparecera el siguiente cuadro
Aca debemos seleccionar drawable y pulsar Ok para que aparezce el siguiente cuadro
Aca debemos dejarlo como aparece por defecto y pulsar Ok, esto agregara todos los archivos dentro del recurso drawable quedandonos de la siguiente forma
Con esto ya concretamos un pequeño porcentaje de nuestra app, ahora procederemos a crear nuestro nuevo recurso para la nueva vista, hacemos click con el boton derecho sobre el recurso layout y elegiremos New -> Layout resource file como se ve en la siguiente imagen
Una vez hecho esto aparecera el siguiente cuadro
Aca deben completar el campo File Name con el valor vista_lugar, luego en Root element deben completar con el valor ScrollView, a medida que la van tipeando se las va a sugerir, dejando el resto como se ve, pulsan Ok se cerrara el cuadro y se generara nuestro nuevo archivo quedando de la siguiente forma
Antes de comenzar con nuestro nuevo archivo haremos una modificacion en strings.xml donde tenemos el siguiente codigo:
<resources>
<string name="app_name">Mis Lugares</string>
<string name="menu_conf">Configuracion</string>
<string name="menu_about">Acerca De...</string>
<string name="menu_buscar">Buscar</string>
</resources>Ahora agregaremos las siguientes lineas:
<resources>
<string name="app_name">Mis Lugares</string>
<string name="menu_conf">Configuracion</string>
<string name="menu_about">Acerca De...</string>
<string name="menu_buscar">Buscar</string>
<string name="vista_nombre">Nombre del Lugar</string>
<string name="vista_lugar">Tipo del Lugar</string>
<string name="vista_logo">Logo del tipo</string>
<string name="vista_foto">Fotografia</string>
<string name="vista_camara">Logo camara</string>
<string name="vista_galeria">Logo galeria</string>
</resources>Como pueden ver agregamos varios titulos mas para nuestra futura vista ahora pasaremos a seleccionar este nuevo archivo, vista_lugar.xml, y pasemos a ver su codigo actual sera de la siguiente forma:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ScrollView>Y lo modificaremos por este:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/scrollView1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/nombre"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="@string/vista_nombre"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/logo_tipo"
android:contentDescription="@string/vista_logo"
android:src="@drawable/otros" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tipo"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="@string/vista_lugar" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@android:drawable/ic_menu_myplaces"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/direccion"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@android:drawable/ic_menu_call"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/telefono"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@android:drawable/ic_menu_mapmode"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/url"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@android:drawable/ic_menu_info_details"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/comentario"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@android:drawable/ic_menu_my_calendar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/fecha"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:src="@android:drawable/ic_menu_recent_history"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/hora"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/valoracion"
android:layout_gravity="center_horizontal"
android:layout_toRightOf="@+id/foto"
android:rating="3" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/foto"
android:adjustViewBounds="true"
android:contentDescription="@string/vista_foto"
android:src="@drawable/fondo_cerro"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:contentDescription="@string/vista_camara"
android:src="@android:drawable/ic_menu_camera"/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:contentDescription="@string/vista_galeria"
android:src="@android:drawable/ic_menu_gallery"/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</ScrollView>Este codigo solamente establece el parametro para nuestra vista, aca estableceremos los layouts para formatearla la vista general y algunos elementos para mostrar fotos y otros mas y observen como hemos usado entre los recursos subidos por nosotros y los recursos propios del sistema, los recursos nuestros en general van a estar identificados por medio del @drawable y los propios del sistema por medio de @android:drawable, si bien esto podriamos haberlo hecho por medio del editor, va a ser mucho mas rapido por medio de copiar y pegar el texto aunque si prefieren tipearlo no es mala opcion para practicar dactilografia. Ahora para probar nuestra vista vamos a hacer un par de modificaciones, primero vamos a crear un nuevo archivo de tipo clase de java para eso haremos click con el boton derecho sobre el contenedor de nuestras clases javas
Una vez seleccionado nos aparecera al siguiente cuadro
Donde modificaremos el campo Name por VistaLugar dejandolo como se ve en el resto de la pantalla y pulsamos Ok, esto creara el archivo VistaLugar.java, lo abriremos y tendremos el siguiente codigo:
package org.example.mislugares;
public class VistaLugar {
}Y procederemos a reemplazarlo con el siguiente codigo:
package org.example.mislugares;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.RatingBar;
import android.widget.TextView;
import org.w3c.dom.Text;
import java.text.DateFormat;
import java.util.Date;
public class VistaLugar extends AppCompatActivity {
private long id;
private Lugar lugar;
@Override
protected void onCreate(Bundle savedInstancestate){
super.onCreate(savedInstancestate);
setContentView(R.layout.vista_lugar);
Bundle extras = getIntent().getExtras();
id = extras.getLong("id", -1);
lugar = Lugares.elemento((int) id);
TextView nombre = (TextView) findViewById(R.id.nombre);
nombre.setText(lugar.getNombre());
ImageView logo_tipo = (ImageView) findViewById(R.id.logo_tipo);
logo_tipo.setImageResource(lugar.getTipo().getRecurso());
TextView tipo = (TextView) findViewById(R.id.tipo);
tipo.setText(lugar.getTipo().getTexto());
TextView direccion = (TextView) findViewById(R.id.direccion);
direccion.setText(lugar.getDireccion());
TextView telefono = (TextView) findViewById(R.id.telefono);
telefono.setText(Integer.toString(lugar.getTelefono()));
TextView url = (TextView) findViewById(R.id.url);
url.setText(lugar.getUrl());
TextView comentario = (TextView) findViewById(R.id.comentario);
comentario.setText(lugar.getComentario());
TextView fecha = (TextView) findViewById(R.id.fecha);
fecha.setText(DateFormat.getDateInstance().format(
new Date(lugar.getFecha())));
TextView hora = (TextView) findViewById(R.id.hora);
hora.setText(DateFormat.getTimeInstance().format(
new Date(lugar.getFecha())));
RatingBar valoracion=(RatingBar) findViewById(R.id.valoracion);
valoracion.setRating(lugar.getValoracion());
valoracion.setOnRatingBarChangeListener(
new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar,
float valor, boolean fromUser) {
lugar.setValoracion(valor);
}
}
);
}
}Este codigo parece complejo pero no lo es tanto, aca simplemente primero haremos una variable de tipo long llamada id, luego crearemos un objeto de la clase Lugar llamado lugar, si aparece un error no se preocupen porque mas adelante lo solucionaremos, luego crearemos la funcion para mostrar el contenido de nuestro archivo vista_lugar.xml, luego generaremos un objeto para poder recibir la informacion enviada por medio de otra actividad, esta explicado en este post, y luego basicamente lo que hacemos es crear un link o vinculacion entre un elemento de la vista y el codigo java para poder ingresarle informacion por medio del metodo setText(), veamos un ejemplo:
TextView tipo = (TextView) findViewById(R.id.tipo);
Donde primero setearemos el tipo (TextView) luego pondremos el nombre, en este caso tipo, luego volvemos a decir que tipo es y por ultimo utilizamos el metodo findViewById() para decirle la ubitacion del valor del ID del elemento, en este caso R.id.tipo. Esto es exactamente para todas las lineas, una vez hecho esto procederemos a la siguiente linea:
tipo.setText(lugar.getTipo().getTexto());
Aca le definiremos el valor del campo text del elemento por medio de setText() y luego le diremos que extraiga el valor por medio de dos metodos por ahora no definidos llamados getTipo() y getTexto(), basicamente todas las lineas trabajan similares en algunas sacaran el valor directamente otras por medio de metodos y otras deberan transformarla por medio de varios metodos, como son las fecha y hora, y por ultimo vamos a tener este bloque:
valoracion.setOnRatingBarChangeListener(
new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar,
float valor, boolean fromUser) {
lugar.setValoracion(valor);
}
}
);Este bloque se encargara de modificar el valor del RatingBar por medio de valor, y la cantidad asignada, en la primer linea lo seteamos al link llamado valoracion, luego crearemos un nuevo evento encargado de «escuchar» al RatingBar y luego tendra un metodo donde ante el cambio de la RatingBar seteara el nuevo valor, tan simple como eso. Y esto es basicamente el nuevo codigo agregado ahora procederemos a corregir los errores antes mencionados, para eso deberemos abrir el proyecto MisLugaresJava creado en este post y modificado en este otro, en caso de no tener el mismo generenlo con los posts antes citados ahora prosigamos con este ejemplo.
Primero vamos a abrir el proyecto
Una vez seleccionado nos aparecera el siguiente cuadro
Aca debemos buscar el proyecto, en este caso fue llamado MisLugaresJava, una vez seleccionado pulsen Ok, luego de pulsado aparecera el siguiente cuadro
Aca les sugiero utilizar New Windows porque deberemos pasar algunos archivos de un proyecto a otro, una vez seleccionado comenzara a abrir en una nueva ventana el proyecto seleccionado, una vez terminado deberan ir al contenedor de las clases java
Como se ve en la imagen anterior deberia aparecer todas esas clases y nosotros debemos seleccionar cuatro: GeoPunto, Lugar, Lugares y TipoLugar. Esto lo pueden hacer por medio de un click mientras tienen Ctrl pulsado, una vez seleccionado los cuatro pueden presionar Ctrl+C o click con el boton derecho y seleccionar Copy como se ve en la siguiente imagen
Con esto se copiaran los cuatro archivos seleccionados, luego iremos a nuestro proyecto, MisLugares, y buscaremos el contenedor de nuestras clases de Java para presionar Ctrl+V o click con el boton derecho y seleccionan Paste como se ve en la siguiente imagen
Una vez hecho esto nos aparecera el siguiente cuadro
Aca pulsan Ok y procedera a copiar todos los archivos en el contenedor seleccionado, una vez finalizado nos quedara como la siguiente imagen
Salvan por medio del Ctrl + S y con esto se solucionaran todos los conflictos de nuestro codigo anterior, ahora deberemos hacer un par de modificaciones en nuestras nuevas clases de Java para casi finalizar con esto. Vamos con el primero de nuestros cambios, abramos el archivo TipoLugar.java donde tendremos el siguiente codigo:
package org.example.mislugares;
public enum TipoLugar {
OTROS ("Otros", 5),
RESTAURANTE ("Restaurante", 2),
BAR ("Bar", 6),
COPAS ("Copas", 0),
ESPECTACULO ("Espectaculo", 0),
HOTEL ("Hotel", 0),
COMPRAS ("Compras", 0),
EDUCACION ("Educacion", 0),
DEPORTE ("Deporte", 0),
NATURALEZA ("Naturaleza", 0),
GASOLINERA ("Gasolinera", 0);
private final String texto;
private final int recurso;
TipoLugar (String texto, int recurso){
this.texto = texto;
this.recurso = recurso;
}
public String getTexto() { return texto; }
public int getRecurso() { return recurso; }
}
Ahora lo modificaremos por el siguiente:
package org.example.mislugares;
public enum TipoLugar {
OTROS ("Otros", R.drawable.otros),
RESTAURANTE ("Restaurante", R.drawable.restaurante),
BAR ("Bar", R.drawable.bar),
COPAS ("Copas", R.drawable.copas),
ESPECTACULO ("Espectaculo", R.drawable.espectaculos),
HOTEL ("Hotel", R.drawable.hotel),
COMPRAS ("Compras", R.drawable.compras),
EDUCACION ("Educacion", R.drawable.educacion),
DEPORTE ("Deporte", R.drawable.deporte),
NATURALEZA ("Naturaleza", R.drawable.naturaleza),
GASOLINERA ("Gasolinera", R.drawable.gasolinera);
private final String texto;
private final int recurso;
TipoLugar (String texto, int recurso){
this.texto = texto;
this.recurso = recurso;
}
public String getTexto() { return texto; }
public int getRecurso() { return recurso; }
}Como pueden ver la diferencia radica en el cambio del recurso dentro del tipo ENUM, es decir pasamos de un valor X a un valor R.drawable.X correspondiendo con lo que debe estar relacionado despues el resto no modificamos nada. Una vez finalizado esto procederemos a modificar la clase MainActivity para agregar un nuevo metodo, veamos el codigo actual de nuestra clase:
package org.example.mislugares;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.edicion_lugar);
}
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
public void lanzarAcercaDe(View view){
Intent i = new Intent(this,AcercaDe.class);
startActivity(i);
}
public boolean onOptionsItemSelected(MenuItem item){
int id = item.getItemId();
if (id == R.id.config){
return true;
}
if (id == R.id.buscar){
return true;
}
if (id == R.id.about){
lanzarAcercaDe(null);
}
return super.onOptionsItemSelected(item);
}
}Ahora le agregaremos el siguiente metodo y modificaremos uno de los condicionales:
package org.example.mislugares;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.edicion_lugar);
}
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
public void lanzarAcercaDe(View view){
Intent i = new Intent(this,AcercaDe.class);
startActivity(i);
}
public void lanzarVistaLugar(View view){
Intent i = new Intent(this,VistaLugar.class);
i.putExtra("id",(long) 0);
startActivity(i);
}
public boolean onOptionsItemSelected(MenuItem item){
int id = item.getItemId();
if (id == R.id.config){
return true;
}
if (id == R.id.buscar){
lanzarVistaLugar(null);
return true;
}
if (id == R.id.about){
lanzarAcercaDe(null);
}
return super.onOptionsItemSelected(item);
}
}En este caso, vamos a agregar un nuevo metodo para poder lanzar nuestra nueva vista y vamos a modificar uno de los condicionales para llamar al nuevo metodo, comencemos primero con el metodo nuevo:
public void lanzarVistaLugar(View view){
Intent i = new Intent(this,VistaLugar.class);
i.putExtra("id",(long) 0);
startActivity(i);
}En este metodo primero crearemos una actividad por medio de Intent luego por medio de putExtra() enviaremos un dato, en este caso el id del lugar, y por ultimo iniciaremos la actividad creada. Ahora vemos la modificacion realizada en el condicional:
if (id == R.id.buscar){
lanzarVistaLugar(null);
return true;
}Como pueden ver unicamente ejecuta el metodo antes creado, con todas estas modificaciones realizadas procederemos a hacer la ultima modificacion para probar nuestra app, primero debemos ir a AndroidManifest.xml y declarar nuestra nueva actividad, veamos el codigo actual de este archivo:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tinchicus.mislugares">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".AcercaDe"
android:label="Acerca De..."
android:theme="@android:style/Theme.Dialog" />
</application>
</manifest>Esta sera la modificacion realizada:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tinchicus.mislugares">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".AcercaDe"
android:label="Acerca De..."
android:theme="@android:style/Theme.Dialog" />
<activity android:name=".VistaLugar"
android:label="@string/menu_buscar" />
</application>
</manifest>Como pueden ver declaramos la nueva actividad para en el momento de ser utilizada el programa sepa de quien se trata, ahora procederemos a probar la app como se ve en el siguiente video
Si lograron lo mismo que el video estamos yendo por el buen camino, ahora si se estan preguntando de donde sale el dato, la respuesta es facil porque proviene de la clase Lugares donde almacenamos algunos en un Array (Arreglo) para luego sacarlos por la posicion del mismo, hasta aqui nada mas.
Hoy hemos visto como crear una nueva vista para visualizar nuestros lugares, hemos visto como ordenarlos de tal forma que los podamos presentar de una mejor forma, hemos agregado nuevos recursos a nuestro recursos drawable, hemos «importado» algunas clases de otro proyecto, y hemos utilizado algunas buenas practicas en Android, como es el usar el archivo strings.xml. Espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 