Bienvenidos sean a este post, hoy haremos unas modificaciones mas sobre la vista creada en nuestro post anterior, si observaron nuestra vista solamente nos trae el primer lugar ignorando el resto, hoy le agregaremos una opcion para poder informar cual posicion elegir y unas acciones mas pero basta de preambulos y empecemos con las modificaciones.
Abramos nuevamente nuestra app Mis Lugares, en este caso vamos a acceder a la clase MainActivity y modificaremos el metodo lanzarVistaLugar(), veamos el codigo actual:
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);
}
}Ahora les muestro el codigo con el metodo modificado:
package org.example.mislugares;
import android.content.DialogInterface;
import android.content.Intent;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.EditText;
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){
final EditText entrada = new EditText(this);
entrada.setText("0");
new AlertDialog.Builder(this)
.setTitle("Seleccion del Lugar")
.setMessage("Indica su id")
.setView(entrada)
.setPositiveButton("Ok", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int whichButton){
long id = Long.parseLong(entrada.getText().toString());
Intent i = new Intent(MainActivity.this,VistaLugar.class);
i.putExtra("id",id);
startActivity(i);
}})
.setNegativeButton("Cancelar",null)
.show();
}
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);
}
}Ahora vamos a analizar nuestro nuevo metodo, primero vamos a crear un elemento para ingresar texto con esta linea:
final EditText entrada = new EditText(this);
Luego le asignaremos un texto inicial, en este caso va a ser cero, luego crearemos un ventana emergente del tipo alerta donde le setearemos el titulo, luego el mensaje y por ultimo vamos a setear la vista con el elemento antes creado (entrada). Luego crearemos nuestro primer boton, en este caso el afirmativo donde setearemos el mensaje de Ok y luego le crearemos un escuchador del evento click, cuando lo elijan creara el metodo siguiente automaticamente unicamente deberan modificar los atributos por los mostrados en este codigo, aca se encargara de crear una variable llamada id para setear el valor ingresado por nosotros en entrada, creamos la actividad y con el metodo putExtra() enviamos el valor almacenado en id e iniciamos la actividad. El resultado debera ser algo similar a como se ve en el siguiente video
Si lograron lo visto en el video, ya dimos un paso mas a mejorar nuestra app para nuestra siguiente modificacion crearemos una barra de acciones y una actividad para borrar el lugar. Primero vamos a crear nuestra barra, para eso vamos al recurso menu (res/menu) y hacemos click con el boton derecho seleccionamos New -> Menu resource file como se ve en la siguiente imagen
Una vez seleccionado nos aparecera el siguiente cuadro
Aca unicamente modificaremos el campo File Name por menu_vista_lugar, dejan todo como se ve en la imagen y pulsen Ok. Esto comenzara a generar nuestro nuevo archivo llamado menu_vista_lugar.xml, si todo salio bien debera quedar como la siguiente imagen
Antes de modificar nuestro nuevo archivo vamos a modificar el archivo strings.xml para agregar unas nuevas lineas, el codigo actual es:
<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>Y lo vamos a modificar por este otro:
<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>
<string name="menvst_compartir">Compartir</string>
<string name="menvst_llegar">Como llegar</string>
<string name="menvst_editar">Editar</string>
<string name="menvst_borrar">Borrar</string>
</resources>Aca solo agregaremos cuatro titulos a nuestra nueva barra de acciones, ahora procedamos a modificar nuestro nuevo archivo del menu, este es codigo fuente actual:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
</menu>Y lo modificaremos por este:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/accion_compartir"
android:title="@string/menvst_compartir"
android:icon="@android:drawable/ic_menu_share"
android:orderInCategory="10"
app:showAsAction="ifRoom" />
<item android:id="@+id/accion_llegar"
android:title="@string/menvst_llegar"
android:icon="@android:drawable/ic_menu_directions"
android:orderInCategory="20"
app:showAsAction="ifRoom" />
<item android:id="@+id/accion_editar"
android:title="@string/menvst_editar"
android:icon="@android:drawable/ic_menu_edit"
android:orderInCategory="30"
app:showAsAction="ifRoom" />
<item android:id="@+id/accion_borrar"
android:title="@string/menvst_borrar"
android:icon="@android:drawable/ic_menu_delete"
android:orderInCategory="40"
app:showAsAction="ifRoom" />
</menu>Este codigo se encargara de agregar nuestros cuatro items en la barra de acciones, los datos mas destacados son el android:title donde utilizaremos nuestros titulos de strings.xml, el otro es el ordenInCategory para ubicar los elementos y por ultimo el showAsAction donde decimos que lo ubique en la barra si hay un lugar disponible y en caso de no disponer el lugar creara un boton de menu para mostrarlo como opciones, ahora procedemos a modificar la clase VistaLugar para poder mostrar nuestra nueva barra, para eso abrimos la clase VistaLugar donde tendremos el siguiente codigo fuente:
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);
}
}
);
}
}Ahora agregaremos dos metodos para controlar nuestra barra, quedandonos el codigo de la siguiente forma:
package org.example.mislugares;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
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);
}
}
);
}
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_vista_lugar, menu);
return true;
}
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.accion_compartir:
return true;
case R.id.accion_llegar:
return true;
case R.id.accion_borrar:
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}Vamos a hablar sobre los dos metodos nuevos, veamos el primero:
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_vista_lugar, menu);
return true;
}Este se encarga unicamente de cargar la barra de acciones en nuestra vista no tiene ninguna otra funcion adicional, pasemos al siguiente:
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.accion_compartir:
return true;
case R.id.accion_llegar:
return true;
case R.id.accion_borrar:
return true;
default:
return super.onOptionsItemSelected(item);
}
}Este metodo se encargara de evaluar cual menu fue seleccionado de la barra de acciones y ejecutar la accion correspondiente por medio de un comando switch(), este comando para los que no lo conocen se encarga de recibir por medio de un metodo, objeto o variable un valor, y luego por intermedio de los cases evalua si coincide, en caso de ser afirmativo procede a ejecutar el o los metodos relacionadas o ejecutar las operaciones asignadas en caso de ser negativo pasara a compararlas con los otros cases hasta que coincida, si hay asignado un default y no coincidio con ningun case procedera a ejecutar ese pero como no tenemos ningun metodo asignado por ahora no hara nada. Ahora vamos a crear un metodo para borrar un elemento y tambien vamos a crear un cuadro de dialogo para no borrarlo por accidente, vamos a ver el codigo fuente modificado de la clase VistaLugar:
package org.example.mislugares;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
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);
}
}
);
}
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_vista_lugar, menu);
return true;
}
public void lanzarBorrar(){
new AlertDialog.Builder(this)
.setTitle("Borrado de lugar")
.setMessage("Estas seguro de querer eliminar este lugar?")
.setPositiveButton("Ok", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int cualBoton) {
Lugares.borrar((int) id);
finish();
}
})
.setNegativeButton("Cancelar", null)
.show();
}
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.accion_compartir:
return true;
case R.id.accion_llegar:
return true;
case R.id.accion_borrar:
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}Ahora hablaremos del nuevo metodo, veamoslo por separado:
public void lanzarBorrar(){
new AlertDialog.Builder(this)
.setTitle("Borrado de lugar")
.setMessage("Estas seguro de querer eliminar este lugar?")
.setPositiveButton("Ok", new DialogInterface.OnClickListener(){
@Override
public void onClick(DialogInterface dialog, int cualBoton){
Lugares.borrar((int) id);
finish();
}
})
.setNegativeButton("Cancelar", null)
.show();
}En este metodo vamos a crear un cuadro de alerta para avisarnos antes de borrar el elemento, con esta linea lo crearemos:
new AlertDialog.Builder(this)
Y despues configuraremos el titulo, luego el mensaje, luego el boton para dar el Ok donde por medio del siguiente metodo de la clase Lugares borraremos el elemento que estamos viendo:
Lugares.borrar((int) id);
Y luego por medio del metodo finish() cerraremos la vista de busqueda y volveremos a la original, pero tambien luego de todo este metodo configuraremos un boton para cancelar y el ultimo metodo, show(), para mostrarlo en pantalla. Ahora solo nos resta agregarlo dentro del switch() para que se ejecute cuando apretemos el boton, veamos el codigo modificado:
package org.example.mislugares;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
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);
}
}
);
}
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_vista_lugar, menu);
return true;
}
public void lanzarBorrar(){
new AlertDialog.Builder(this)
.setTitle("Borrado de lugar")
.setMessage("Estas seguro de querer eliminar este lugar?")
.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int cualBoton) {
Lugares.borrar((int) id);
finish();
}
})
.setNegativeButton("Cancelar", null)
.show();
}
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case R.id.accion_compartir:
return true;
case R.id.accion_llegar:
return true;
case R.id.accion_borrar:
lanzarBorrar();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
}En este caso pueden ver como solo modificamos el case relacionado a la accion de borrar:
case R.id.accion_borrar:
lanzarBorrar();
return true;Como pueden solamente agregamos el llamado a la nueva funcion, ahora veamos el siguiente video para observar su funcionamiento
Como pueden ver en el video, ahora aparecio el cuadro para solicitarnos el id del lugar y podamos mostrar el resto de los lugares almacenados en la clase Lugares, luego vemos la estetica de la barra y si elegimos la opcion de borrar, podemos ver como nos pregunta si deseamos hacerlo y si le damos Ok lo elimina y al volver a buscarlo nos devuelve el lugar siguiente al eliminado. Si lograron lo mismo que en el video, Felicitaciones!!! ya hemos logrado una mejor interactividad con nuestras posibles opciones en la app.
En resumen, hoy hemos aprendido como lograr una ventana para poder ingresar un valor para una mejor busqueda, tambien hemos agregado una barra de acciones para una vista adicional creada, como crear una opcion para borrar un lugar con un alerta para evitar un posible error. 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 