Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Fragmentos dinamicos y eventos de usuario

Fragmentos dinamicos y eventos de usuario

Autor jc mouse martes, mayo 2, 2017

Continuando con los tutoriales sobre fragmentos en android, en esta oportunidad veremos como añadir Fragments dinámicamente a una aplicación android y también como implementar eventos en cada fragmento.

Si te perdiste el primer tutorial sobre fragmentos, te invito a visitar [Introducción a Fragments] .

El ejemplo que desarrollaremos a continuación, contara con 2 fragments fijos y uno que agregaremos dinamicamente que ademas contara con botones para realizar X o Y acción. Sin más, comencemos el proyecto en Android Studio.

Paso 1: El Proyecto

Creamos un proyecto android que llamamos “Ejemplo Fragmento 2“.

A continuación agregamos:

  • 3 clases “FragmentoA”, “FragmentoB” y “FragmentoC”.
  • 3 layout “fragment_fragmentoa.xml”, “fragment_fragmentob.xml” y “fragment_fragmentoc.xml”.
  • 3 drawables “bgblue.xml” , “bgred.xml” y “bggreen.xml”.

Debemos tener algo como esto:

fragments android

Paso 2: Drawables

Estos archivos nos permitirán colocar borde y fondo a cada uno de los fragmentos.  Su código es el siguiente:

bgblue.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#1900ff" />
    <stroke android:width="3dp" android:color="#FFFFFF" />
</shape>

bggreen.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#00c234" />
    <stroke android:width="3dp" android:color="#FFFFFF" />
</shape>

bgred.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ff0d05" />
    <stroke android:width="3dp" android:color="#FFFFFF" />
</shape>

Paso 3: Fragments XML

Como vimos en la primera parte de este tutorial, Android Studio nos da la posibilidad de agregar Fragments directamente tanto el archivo XML como su clase java, pero para entender mejor su funcionamiento lo haremos escribiendo por separado el código XML y java.

Los Fragments B y C son sencillos y su código se reduce a un fondo y un textview para poder identificarlos en la interfaz.

fragment_fragmentob.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:background="@drawable/bggreen"
    tools:context="net.jc_mouse.ejemplofragmento2.FragmentoB">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#FFFFFF"
        android:text="Hola. Soy el Fragment B" />

</FrameLayout>

fragment_fragmentoc.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:background="@drawable/bgblue"
    tools:context="net.jc_mouse.ejemplofragmento2.FragmentoC">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#FFFFFF"
        android:text="Hola. Soy el Fragment C" />

</FrameLayout>

El fragmento A, contara ademas de un textview, con dos botones (Button) a los cuales les agregaremos eventos más adelante:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:background="@drawable/bgred"
    tools:context="net.jc_mouse.ejemplofragmento2.FragmentoA">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:layout_gravity="center_horizontal|top"
        android:text="Hola. Soy el Fragment A" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="presioname"
        android:layout_gravity="center|center_horizontal"
        android:id="@+id/button1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="presioname"
        android:layout_gravity="bottom|center_horizontal"
        android:id="@+id/button2"/>
</FrameLayout>

Importante:

Podemos notar que a cada Fragment le agregamos un drawable que creamos en el paso 2 en la propiedad android:background

Debemos relacionar también cada Fragment XML con un archivo java, esto se hace  indicando los paquetes correspondientes en la propiedad context, en mi caso tenemos:

tools:context=”net.jc_mouse.ejemplofragmento2.FragmentoA”

Si usas paquetes o clases con nombres distintos, debes usar esos paquetes o clases, no esta por demás advertirlo 🙂

Paso 4. Fragments Java

Al igual que sus pares en XML, los fragmentos B y C tienen el código mínimo para funcionar, estos son:

FragmentoB.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentoB extends Fragment{

    public static FragmentoB newInstance() {
        return new FragmentoB();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_fragmentob, container, false);
    }

}

FragmentoC.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentoC extends Fragment{

    public static FragmentoC newInstance() {
        return new FragmentoC();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_fragmentoc, container, false);
    }

}

FragmentoA.java

El fragmento A interactuara directamente con el usuario, por lo que implementaremos un listener el cual asignaremos a cada uno de los botones de la interfaz. Cuando se presionen los botones, el fragment cambiara de color y aparecerá un mensaje notificando que botón se presiono.

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class FragmentoA extends Fragment implements View.OnClickListener{

    private Button button1;
    private Button button2;
    private View view;

    public static FragmentoA newInstance() {
        return new FragmentoA();
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_fragmentoa, container, false);
        //botones
        button1 = (Button) view.findViewById(R.id.button1);
        button1.setOnClickListener(this);
        button2 = (Button) view.findViewById(R.id.button2);
        button2.setOnClickListener(this);
        //retorna view
        return view;
    }

    @Override
    public void onClick(View v){
        switch (v.getId()) {
            case R.id.button1:
                Toast.makeText(getActivity(), "Presionaste el boton del centro", Toast.LENGTH_SHORT).show();
                view.setBackgroundColor(Color.parseColor("#FFC622BB"));//violeta
                break;
            case R.id.button2:
                Toast.makeText(getActivity(), "Presionaste el boton inferior", Toast.LENGTH_SHORT).show();
                view.setBackgroundColor(Color.parseColor("#FFDDE238"));//amarillo oscuro
                break;
        }
    }

}

Paso 5. Layout principal

Abrimos el archivo activity_main.xml y reemplazamos por el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="net.jc_mouse.ejemplofragmento2.MainActivity">

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Fragment A"
            android:id="@+id/buttonA" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Fragment B"
            android:id="@+id/buttonB" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Fragment C"
            android:id="@+id/buttonC" />
    </LinearLayout>


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:name="net.jc_mouse.ejemplofragmento2.FragmentoA"
            android:id="@+id/fragment"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <fragment
                android:name="net.jc_mouse.ejemplofragmento2.FragmentoB"
                android:id="@+id/fragment2"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <FrameLayout
                android:id="@+id/framelayout"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></FrameLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Importante modificar el tools:context con tu propia estructura de paquetes.

Podemos observar como en los 2 fragments indicamos las clases java de los fragmentos que se cargaran en la interfaz en la propiedad android:name, pero el fragment dinámico se cargara en un FrameLayout. Nuestro activity cargado desde la vista diseño se ve de la siguiente forma:

android studio fragmentos

Paso 6. MainActivity

Ya para terminar, abrimos el archivo MainActivity, en este archivo implementaremos los botones y eventos que estos realizan cuando son presionados.

import android.app.FragmentTransaction;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button buttonA;
    private Button buttonB;
    private Button buttonC;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        buttonA = (Button) findViewById(R.id.buttonA);
        buttonB = (Button) findViewById(R.id.buttonB);
        buttonC = (Button) findViewById(R.id.buttonC);

        //carga fragment dinamico
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.framelayout, new FragmentoA())
                .disallowAddToBackStack()
                .commit();

        //boton A
        buttonA.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        Fragment fragmentoA = new FragmentoA();
                        getSupportFragmentManager()
                                .beginTransaction()
                                .replace(R.id.framelayout, fragmentoA)
                                .disallowAddToBackStack()
                                .commit();
                    }
                });
        //boton B
        buttonB.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        Fragment fragmentoB = new FragmentoB();
                        getSupportFragmentManager()
                                .beginTransaction()
                                .replace(R.id.framelayout, fragmentoB)
                                .disallowAddToBackStack()
                                .commit();
                    }
                });
        //boton C
        buttonC.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        Fragment fragmentoC = new FragmentoC();
                        getSupportFragmentManager()
                                .beginTransaction()
                                .replace(R.id.framelayout, fragmentoC)
                                .disallowAddToBackStack()
                                .commit();
                    }
                });
    }
}

No utilizamos ningún permiso o librerías externa, si no tenemos ningún error hasta este punto, solo nos falta ejecutar la aplicación:

dinamic fragments

en el siguiente video podemos ver la aplicación en acción:

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Utiliza 2 bases de datos diferentes en una aplicación parte I

Utiliza 2 bases de datos diferentes en una aplicación parte I

Cuando se desarrolla una aplicación, puede ser un requisito que este tenga soporte para varias tipos de base de datos, s...

Cliente/Servidor en java y c#

Cliente/Servidor en java y c#

Como habíamos mencionado en un anterior post Ejemplo socket java Cliente/Servidor , el lenguaje de programación entre el...

Como paginar registros en Java/Access

Como paginar registros en Java/Access

En este post veremos una forma de realizar la paginación en una base de datos Access utilizando el lenguaje de programac...

JTree Recursivo

JTree Recursivo

En un post anterior se vio como llenar un JTree en donde se conocía de antemano que estructura iba a tener esta sin emba...

Búsqueda binaria (Binary Search)

Búsqueda binaria (Binary Search)

Un algoritmo de búsqueda binaria se emplea para buscar un valor en particular en un arreglo previamente ordenado. Para i...

WhatsApp: Aprende a usar la nueva función ‘Estado’

WhatsApp: Aprende a usar la nueva función ‘Estado’

A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp.  Primero que nada, a...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Las herramientas Online son cada vez más comunes y pueden encontrarse herramientas para casi todo tipo de tareas, en est...

Apache POI es la API de Java para el trabajo con archivos de Microsoft como son Word, Excel y Power Point. Apache POI se...

Gallery.io es una herramienta de colaboración gratuita desarrollada por Google para cargar trabajos de diseño, obtener c...

Android cuenta con una serie de herramientas en su API para el trabajo con gráficos, entre estos podemos mencionar: Bitm...

Android Bolivia

MAUS