El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els fragments són components modulars que permeten dividir la interfície d'usuari d'una aplicació en parts més petites i reutilitzables. Són especialment útils per a aplicacions que necessiten adaptar-se a diferents mides de pantalla, com ara telèfons i tauletes. En aquest tema, aprendrem què són els fragments, com crear-los, com gestionar-los i com comunicar-los entre ells.

Què és un Fragment?

Un fragment és una part de la interfície d'usuari d'una activitat que es pot reutilitzar en diverses activitats. Els fragments tenen el seu propi cicle de vida, que està estretament lligat al cicle de vida de l'activitat que els conté.

Característiques dels Fragments:

Modularitat: Permeten dividir la interfície d'usuari en components més petits.
Reutilitzabilitat: Es poden reutilitzar en diferents activitats.
Gestió del cicle de vida: Tenen el seu propi cicle de vida, però estan lligats al cicle de vida de l'activitat.

Creació d'un Fragment

Pas 1: Crear una Classe de Fragment

Primer, crearem una classe que hereti de Fragment. Aquesta classe definirà el comportament del nostre fragment.

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ExampleFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_example, container, false);
    }
}

Pas 2: Crear un Layout per al Fragment

Després, crearem un fitxer XML per definir la interfície d'usuari del fragment.

<!-- res/layout/fragment_example.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, this is a fragment!" />

</LinearLayout>

Pas 3: Afegir el Fragment a una Activitat

Podem afegir el fragment a una activitat mitjançant el fitxer XML de l'activitat o programàticament.

Mitjançant XML

<!-- res/layout/activity_main.xml -->
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Programàticament

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

        // Check if the fragment container is present
        if (findViewById(R.id.fragment_container) != null) {
            // If we're being restored from a previous state, then we don't need to do anything
            if (savedInstanceState != null) {
                return;
            }

            // Create a new Fragment to be placed in the activity layout
            ExampleFragment firstFragment = new ExampleFragment();

            // Add the fragment to the 'fragment_container' FrameLayout
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.fragment_container, firstFragment).commit();
        }
    }
}

Comunicació entre Fragments

Els fragments poden comunicar-se entre ells a través de l'activitat que els conté. Una manera comuna de fer-ho és utilitzar una interfície.

Pas 1: Definir una Interfície

public interface OnFragmentInteractionListener {
    void onFragmentInteraction(String data);
}

Pas 2: Implementar la Interfície a l'Activitat

public class MainActivity extends AppCompatActivity implements OnFragmentInteractionListener {

    @Override
    public void onFragmentInteraction(String data) {
        // Handle the interaction
    }
}

Pas 3: Utilitzar la Interfície al Fragment

public class ExampleFragment extends Fragment {

    private OnFragmentInteractionListener mListener;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
            mListener = (OnFragmentInteractionListener) context;
        } else {
            throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;
    }

    // Call this method to send data to the activity
    public void sendDataToActivity(String data) {
        if (mListener != null) {
            mListener.onFragmentInteraction(data);
        }
    }
}

Exercici Pràctic

Objectiu

Crear una aplicació que tingui dos fragments. El primer fragment contindrà un botó que, quan es premi, enviarà un missatge al segon fragment per mostrar-lo en un TextView.

Passos

Crear dos fragments: FirstFragment i SecondFragment.
Definir una interfície per a la comunicació entre fragments.
Implementar la interfície a l'activitat.
Enviar dades des del primer fragment al segon fragment.

Solució

FirstFragment.java

public class FirstFragment extends Fragment {

    private OnFragmentInteractionListener mListener;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_first, container, false);

        Button button = view.findViewById(R.id.button_send);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    mListener.onFragmentInteraction("Hello from FirstFragment!");
                }
            }
        });

        return view;
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
            mListener = (OnFragmentInteractionListener) context;
        } else {
            throw new RuntimeException(context.toString()
                    + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;
    }
}

SecondFragment.java

public class SecondFragment extends Fragment {

    private TextView textView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_second, container, false);
        textView = view.findViewById(R.id.text_view);
        return view;
    }

    public void updateTextView(String message) {
        if (textView != null) {
            textView.setText(message);
        }
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity implements OnFragmentInteractionListener {

    private SecondFragment secondFragment;

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

        if (findViewById(R.id.fragment_container) != null) {
            if (savedInstanceState != null) {
                return;
            }

            FirstFragment firstFragment = new FirstFragment();
            secondFragment = new SecondFragment();

            getSupportFragmentManager().beginTransaction()
                    .add(R.id.fragment_container, firstFragment)
                    .add(R.id.fragment_container, secondFragment)
                    .commit();
        }
    }

    @Override
    public void onFragmentInteraction(String data) {
        if (secondFragment != null) {
            secondFragment.updateTextView(data);
        }
    }
}

fragment_first.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send Message" />
</LinearLayout>

fragment_second.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Waiting for message..." />
</LinearLayout>

Conclusió

En aquest tema, hem après què són els fragments, com crear-los, com afegir-los a una activitat i com comunicar-los entre ells. Els fragments són una eina poderosa per crear aplicacions modulars i adaptables a diferents mides de pantalla. Amb la pràctica, podràs utilitzar fragments per millorar la flexibilitat i la reutilització del codi en les teves aplicacions Android.

Treballar amb Fragments