Bienvenidos sean a este post, hoy continuaremos con lo iniciado en el post anterior, en este caso agregaremos otro fragmento donde mostraremos los datos del lugar o lo que equivale a mostrar VistaLugar, para ello abramos a Mis Lugares por medio de Android Studio, una vez abierto iremos a nuestros contenedores de clases Java y seleccionaremos a VistaLugar donde podemos presionar Ctrl+C o click con el boton derecho y eligen Copy, una vez hecho presionen Ctrl+V o click con el boton derecho sobre el contenedor y seleccionen Paste, una vez realizado nos aparecera el siguiente cuadro
Cuando aparezca el cuadro deben modificar el campo New name por VistaLugarFragment, el resto debe quedar como aparece y pulsen Ok para realizar la copia, una vez hecha nos aparecera en el editor para modificarlo, nuestra siguiente modificacion sera en el codigo para ello debemos comentar el metodo onCreate() como se ve a continuacion:
/* @Override
protected void onCreate(Bundle savedInstancestate){
super.onCreate(savedInstancestate);
setContentView(R.layout.vista_lugar);
Bundle extras = getIntent().getExtras();
id = extras.getLong("id", -1);
imageview = (ImageView) findViewById(R.id.foto);
actualizarVistas();
} */Antes de continuar debemos modificar a quien hereda esta clase, debemos pasarlo de Actividad a Fragmento y para ello debemos cambiar el encabezado de la clase de la siguiente forma:
public class VistaLugarFragment extends Fragment {A continuacion agregaremos los siguientes metodos:
@Override
public View onCreateView(LayoutInflater inflador, ViewGroup contenedor,
Bundle savedInstanceState){
View vista = inflador.inflate(R.layout.vista_lugar, contenedor,
false);
setHasOptionsMenu(true);
return vista;
}
@Override
public void onActivityCreated(Bundle estado){
super.onActivityCreated(estado);
Bundle extras = getActivity().getIntent().getExtras();
if (extras!=null){
id = extras.getLong("id",-1);
if (id!=-1)
actualizarVistas(id);
}
}Nuestro primer metodo ser onCreateView(), el cual tendra tres argumentos: el primero de tipo LayoutInflater llamado inflador, luego uno de tipo ViewGroup llamado contenedor y por ultimo uno de tipo Bundle, nuestra siguiente linea sera crear un objeto de tipo View llamado vista a la cual le asignaremos (o inflaremos) el layout informado en el primer argumento, para el contenedor usaremos el informado en el argumento del metodo, nuestro siguiente accion ser usar a setHasOptionsMenu y con el valor true por ultimo devolveremos el valor de vista.
Nuestro siguiente metodo sera onActivityCreated(), en el cual primero crearemos este metodo por medio de super, despues crearemos un objeto de tipo Bundle llamado extras, en el cual le asignaremos los valores obtenidos para dicha actividad, este por medio de getActivity(), por medio de getIntent() conseguiremos la intencion y por medio de getExtras() obtendremos los extras y seran almacenadas en este objeto. Despues por medio de un condicional chequearemos si extras es distinto de null, en caso de ser cierto setearemos a id, esta variable esta creada al principio de la clase, con el valor de extras por medio de getLong(), en el primer caso enviaremos la notificacion para que sepa que valor obtener y el siguiente es el valor que usara en caso de no obtener nada, nuestro siguiente paso sera chequear que id sea distinto a ese valor por defecto y en caso de ser cierto procedera a llamar a actualizarVistas() pero en este caso enviara el valor de id, para nuestro siguiente paso deberemos modificar el metodo actualizarVistas() de la siguiente forma:
public void actualizarVistas(final long id){
// lugar = Lugares.elemento((int) id);
this.id = id;
lugar = Lugares.elemento((int) id);
if (lugar!=null) {
View v = getView();
TextView nombre = (TextView) v.findViewById(R.id.nombre);
nombre.setText(lugar.getNombre());
ImageView logo_tipo = (ImageView) v.findViewById(R.id.logo_tipo);
logo_tipo.setImageResource(lugar.getTipo().getRecurso());
TextView tipo = (TextView) v.findViewById(R.id.tipo);
tipo.setText(lugar.getTipo().getTexto());
TextView direccion = (TextView) v.findViewById(R.id.direccion);
direccion.setText(lugar.getDireccion());
TextView telefono = (TextView) v.findViewById(R.id.telefono);
telefono.setText(Integer.toString(lugar.getTelefono()));
TextView url = (TextView) v.findViewById(R.id.url);
url.setText(lugar.getUrl());
TextView comentario = (TextView) v.findViewById(R.id.comentario);
comentario.setText(lugar.getComentario());
TextView fecha = (TextView) v.findViewById(R.id.fecha);
fecha.setText(DateFormat.getDateInstance().format(
new Date(lugar.getFecha())));
TextView hora = (TextView) v.findViewById(R.id.hora);
hora.setText(DateFormat.getTimeInstance().format(
new Date(lugar.getFecha())));
RatingBar valoracion = (RatingBar) v.findViewById(R.id.valoracion);
valoracion.setOnRatingBarChangeListener(null);
valoracion.setRating(lugar.getValoracion());
valoracion.setOnRatingBarChangeListener(
new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar,
float valor, boolean fromUser) {
lugar.setValoracion(valor);
Lugares.actualizarLugar((int) id, lugar);
}
}
);
ponerFoto((ImageView) v.findViewById(R.id.foto), lugar.getFoto());
}
}En este caso primero le daremos la posibilidad de poder recibir un argumento, id, luego comentaremos a la linea donde setea a lugar para reemplazarla por las siguientes dos lineas:
this.id = id;
lugar = Lugares.elemento((int) id);El resto deberemos del metodo lo encerraremos por medio del siguiente condicional:
if (lugar!=null) {
....
}En la primera linea crearemos un objeto llamado v del tipo View y le asignaremos un valor por medio de getView(), todos los siguientes pasos seran la relacion entre los elementos del layout y el codigo Java pero a diferencia de como vinimos trabajando hasta ahora debemos notificarle cual es la vista que usara findViewById() por medio de v, es decir que ahora tendremos v.findViewById() y en cada caso informaremos el elemento correspondiente, la siguiente modificacion sera agregar esta linea:
valoracion.setOnRatingBarChangeListener(null);
En este caso cambiamos el metodo de obtencion de la informacion solamente para desactivar al escuchador del valor de RatingBar, asi evitaremos que se lance algun evento cuando modifiquemos su valor en la siguiente linea, nuestra siguiente modificacion sera en el metodo onActivityResult() donde cambiaremos a actualizarVistas() por actualizarVistas(id).
Nota: Puede suceder que este cambio se realice automaticamente pero en caso de no ser asi deben modificarlo manualmente.
Nuestro siguiente paso sera eliminar o comentar (como fue en mi caso) la siguiente linea:
// private ImageView imageview;Esto implicara que deberemos modificar todas las siguientes lineas del metodo actualizarVistas():
ponerFoto(imageview, lugar.getFoto());De las siguiente forma:
ponerFoto((ImageView) v.findViewById(R.id.foto), lugar.getFoto());La misma linea:
ponerFoto(imageview,lugar.getFoto());Debemos modificarla de la siguiente manera en el resto de la clase:
ponerFoto((ImageView) getView().findViewById(R.id.foto),lugar.getFoto());Nuestras siguiente modificacion sera en el siguiente metodo:
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.menu_vista_lugar, menu);
return true;
}Donde la modificaremos de la siguiente manera:
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflador){
inflador.inflate(R.menu.menu_vista_lugar,menu);
super.onCreateOptionsMenu(menu,inflador);
}En este caso agregaremos un MenuInflater, luego crearemos el menu por medio de inflate y por ultimo lo crearemos en la vista principal gracias a super, nuestra siguiente modificacion sera en optionsItemSelected() donde reemplazaremos la linea de creacion de la intencion:
Intent i = new Intent(VistaLugarFragment.this,
EdicionLugar.class);De la siguiente manera:
Intent i = new Intent(getActivity(),EdicionLugar.class);En lugar de usar this usaremos el metodo getActivity() porque esta actividad requiere un contexto y una actividad es descendiente de contexto pero un fragmento no, nuestra siguiente modificacion sera en el metodo onActivityResult() reemplazaremos la siguiente linea:
findViewById(R.id.scrollView1).invalidate();Por la siguiente:
getView().findViewById(R.id.scrollView1).invalidate();En este caso simplemente le informamos la vista que debe usar por medio de getView(), nuestra utilma modificacion sera en lanzarBorrar() donde modificaremos la siguiente linea:
finish();De la siguiente forma:
getActivity().finish();En lanzarBorrar() debemos modificar la siguiente linea:
new AlertDialog.Builder(this) De la siguiente forma:
new AlertDialog.Builder(getContext())Nuestra siguiente modificacion sera en ponerFoto donde reemplazaremos la siguiente linea:
imageview.setImageBitmap(reduceBitmap(this,uri,1024,1024));De esta manera:
imageview.setImageBitmap(reduceBitmap(getContext(),uri,1024,1024));Y por ultimo debemos reemplazar la siguiente linea:
new AlertDialog.Builder(this)Por esta otra:
new AlertDialog.Builder(getContext())En todos los casos solamente reemplazamos al apuntador this por getContext() para que los metodos pueden obtener el valor correcto del contexto dado que ahora pertenecen a un fragmento de la vista y no a toda la vista, por ultimo debemos modificar el archivo activity_main.xml donde agregaremos el siguiente elemento al LinearLayout:
<fragment
android:id="@+id/vista_lugar_fragment"
android:name="com.tinchicus.mislugares.VistaLugarFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />El codigo nos quedara de la siguiente manera:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/selector_fragment"
android:name="com.tinchicus.mislugares.SelectorFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<fragment
android:id="@+id/vista_lugar_fragment"
android:name="com.tinchicus.mislugares.VistaLugarFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>Con todo estas modificaciones podemos probar nuestra aplicacion, debera quedar como se ve en la siguiente imagen
En este caso ya tenemos dos fragmentos donde del lado izquierdo veremos el listado de nuestros lugares y del lado derecho veremos el contenido del mismo (aunque todavia no muestra nada), en la siguiente imagen lo veremos apaisado (landscape)
Como pueden ver quedo mas practico y simple a la vista pero veamos el siguiente video
En este video simplemente vemos como los dos fragmentos son independientes, y en el caso de la derecha tenemos un scroll porque tiene mas informacion de la que puede mostrar en pantalla.
En resumen, hoy hemos visto como se implementa un segundo fragmento, como implementarlo en nuestra aplicacion, las modificaciones necesarias para ubicar a nuestro fragmento dentro de un contexto y puede tener sus actividades y eventos, espero les haya sido util sigueme en Twitter o Facebook 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 