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

JCheckBox dentro JTable con Netbeans

JCheckBox dentro JTable con Netbeans

Para colocar un JCheckBox dentro una celda de un JTable debemos sobre escribir algunas clases para que el componente pue...

Filtros con JMF y una webcam [Proyecto]

Filtros con JMF y una webcam [Proyecto]

En esta oportunidad dejo a consideracion un proyecto para la captura de video desde una webcam, utilizando filtros como...

Capturar foto desde una webcam con Java Media Framework

Capturar foto desde una webcam con Java Media Framework

Como se vio en un post anterior (Capturar video de una webcam con JMF) la captura de un video desde una webcam utilizand...

Informes Access con JasperReport/iReport

Informes Access con JasperReport/iReport

En este post vemos la forma de conectar una base de datos Access con JasperReport para diseñar y ejecutar reportes. Para...

Dibujar figuras geométricas con java

Dibujar figuras geométricas con java

Problema: Escriba un programa en java que permita dibujar con el mouse cuadrados, círculos y triángulos. El usuario debe...

Como crear un Grid en Pygame

Como crear un Grid en Pygame

Utilizando pygame para hacer gráficos en python, se muestra a continuación un sencillo ejemplo de cómo utilizar esta lib...

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

Existen varias aplicaciones (free y de pago) que emulan una impresora virtual para generar archivos en PDF  (Portable Do...

En este post construiremos paso a paso un SharedPreferences más conocido en español como “Preferencias de Usuario...

La Inteligencia Artificial (AI – Artificial Intelligence) estará presente en casi cada aspecto de nuestra vida en...

Una Interface Funcional es una interface que contiene uno y solo un método abstracto aunque puede contener métodos por d...

Android Bolivia

Bandera en Alto