Android / Siguiendo con los fragments en Mis Lugares

Bienvenidos sean a este post, hoy continuaremos con dos temas iniciados en los posts anteriores como es fragment en Mis Lugares, y hoy nos centraremos en como introducir un escuchador manual para nuestros fragments y como solo mostrar los dos fragments en pantallas grandes, comencemos primero con la introduccion del escuchador.

Para ello debemos ir al layout vista_lugar.xml, buscar el bloque del LinearLayout:

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:onClick="paginaWeb">

Donde haremos la siguiente modificacion:

        <LinearLayout
            android:id="@+id/p_url"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

En este caso solamente eliminamos la linea relacionada al evento onClick y agregamos una linea donde le daremos un id, nuestra siguiente modificacion sera en la clase VistaLugarFragment donde modificaremos el metodo onCreateView() agregando el siguiente bloque:

        LinearLayout pUrl = (LinearLayout) vista.findViewById(R.id.p_url);
        pUrl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                paginaWeb(null);
            }
        });

Primero crearemos un objeto que servira como enlace entre el codigo y el elemento que identificamos antes, eso hara la primera linea, el siguiente bloque se encargara de «escuchar» si hace click sobre dicho elemento y en caso de ser cierto procedera a llamar a paginaWeb(), esto que hicimos recien deberiamos repetirlo con todos y cada uno de los elementos que poseen un onClick, las tareas seran:

• Agregarle un id
• Eliminar la linea con el onClick
• Y agregar el codigo para poder «escuchar» al evento.

No se preocupen el codigo final del archivo vista_lugar.xml queda de la siguiente manera:

<?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:id="@+id/v_mapa"
            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:id="@+id/ll_telef"
            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:id="@+id/p_url"
            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:id="@+id/icono_hora"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:contentDescription="Logo Hora"
                android:src="@android:drawable/ic_menu_recent_history" />
            <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/borrar_foto"
                    android:src="@android:drawable/ic_menu_close_clear_cancel"
                    android:onClick="eliminarFoto" />
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:contentDescription="@string/vista_camara"
                    android:src="@android:drawable/ic_menu_camera"
                    android:onClick="tomarFoto" />
                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:contentDescription="@string/vista_galeria"
                    android:src="@android:drawable/ic_menu_gallery"
                    android:onClick="galeria" />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</ScrollView>

Y este sera el formato final de nuestro metodo onCreateView():

    @Override
    public View onCreateView(LayoutInflater inflador, ViewGroup contenedor,
                              Bundle savedInstanceState){
        View vista = inflador.inflate(R.layout.vista_lugar, contenedor,
                false);
        setHasOptionsMenu(true);
        LinearLayout pUrl = (LinearLayout) vista.findViewById(R.id.p_url);
        pUrl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                paginaWeb(null);
            }
        });
        LinearLayout vMapa = (LinearLayout) vista.findViewById(R.id.v_mapa);
        vMapa.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                verMapa(null);
            }
        });
        LinearLayout telef = (LinearLayout) vista.findViewById(R.id.ll_telef);
        telef.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                llamadaTelefono(null);
            }
        });
        return vista;
    }

Si probamos nuestra aplicacion no veremos ninguna diferencia salvo que ahora en lugar de usar un escuchador de eventos en el layout lo tenemos en el codigo permitiendonos agregar mas instrucciones en caso de ser necesario, nuestra siguiente modificacion es mas bien de tipo estetica.

Hasta ahora no importa el tamaño de la pantalla siempre tendremos los dos fragmentos en pantalla, si trabajamos con el dispositivo de forma apaisada (landscape) no tendremos grandes inconvenientes pero en formato retrato (portrait) nos queda una imagen muy desagradable, para solucionar esto aprovecharemos los recursos alternativos que nos provee Android, les recomiendo este post para estudiarlo mas a fondo, para ello debemos hacer los siguientes pasos:

Primero vamos a crear un directorio llamado layout-sw600dp dentro de la carpeta de recursos res, para ello deben hacer click con el boton derecho y seleccionar New->Android resource directory, en el cuadro que aparece deben completar el campo Directory Name con layout-sw600dp, en Resource Type seleccion layout y en Source set seleccionen el valor main, pulsen Ok para generar el nuevo directorio aunque por el momento no aparecera.

Nuestro siguiente paso sera copiar el archivo activity_main.xml dentro del nuevo recurso, para ello seleccionan el archivo presionan Ctrl+C y luego presionan Ctrl+V donde nos aparecera el siguiente cuadro

Presionen el boton resaltado en la imagen y nos aparecera el siguiente cuadro

En este cuadro deben seleccionar el nuevo directorio y pulsen Ok para volver al cuadro anterior, en ese cuadro deben pulsar Ok para copiar finalmente el archivo, una vez hecho todo esto nos quedara de la siguiente manera

Como pueden ver resalte nuestro nuevo archivo y como nos muestra la aclaracion de sw600dp, esto indicara que utilizara este recurso cuando la pantalla sea de 7″ o mayor y en caso contrario usara el otro archivo.

Nuestra siguiente modificacion sera sobre el archivo res/layout/activity_main.xml, el archivo original no la copia que hicimos ahora, donde deberemos eliminar el segundo fragmento quedando de la siguiente forma

<?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" />
</LinearLayout>

Con esta modificacion realizada veamos primero como funciona con un dispositivo de pantalla menor a 7″

Como pueden observar en el video tenemos la aplicacion funcionando como antes y mejor en el aspecto estetico, pasemos a probar la aplicacion en una Tablet de 7″ como se ve en el siguiente video

Como pueden ver en el video todavia tenemos la conducta de los fragmentos pero en este caso solo se aplicara cuando tengamos una pantalla decente de lo contrario se ajustara a la forma de trabajar anterior, esto es una gran posibilidad que nos brindan los recursos alternativos.

En resumen, hoy hemos visto como agregar un escuchador para los eventos de tipo click sobre los elementos donde lo usamos, tambien hemos visto como mejorar la estetica de nuestra aplicacion por medio de recursos alternativos, hemos visto como podemos tener varias actividades en una sola, 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.