Lekce 2 - Android fragmenty - Vytvoření prvního fragmentu

V minulé lekci, Android fragmenty - Úvod, jsme si řekli, co je to fragment. Také jsme založili nový projekt, kde jsme vytvořili náš první fragment.

V dnešním Android tutoriálu vytvoříme aktivitu ActivityFirstFragment, ve které budeme zobrazovat náš první fragment FirstFragment.

Aktivita ActivityFirstFragment

Ve struktuře projektu klikneme pravým tlačítkem myši na složku java/cz/itnetwork/fragments/ a v zobrazeném menu přes položky New a Activity zvolíme položku Empty Activity:

V otevřeném okně zadáme do políčka Activity Name název aktivity ActivityFirstFragment. Dále zaškrtneme políčko Generate a Layout File. Poté zkontrolujeme, že v políčku Layout Name je zadáno activity_first_fragment. Tlačítkem Finish vše potvrdíme:

Android Studio vygeneruje soubory ActivityFirstFragment.java a activity_first_fragment.xml, které budeme dále upravovat.

Vzhled aktivity ActivityFirstFragment bude následující:

XML kód aktivity ActivityFirstFragment

Do vygenerovaného souboru activity_first_fragment.xml doplníme následující XML kód:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E1E1E1"
    tools:context=".ActivityFirstFragment">

    <Button
        android:id="@+id/btnShowFirstFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="false"
        android:text="Zobrazit první fragment"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <FrameLayout
        android:id="@+id/containerForFirstFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Uvedený XML kód obsahuje jedno tlačítko a jeden velice důležitý element - <FrameLayout>. Jedná se o layout, kterému, v souvislosti s fragmenty, říkáme kontejner. Tento kontejner bude po otevření aktivity prázdný. Teprve až po stisknutí tlačítka Zobrazit první fragment bude v kontejneru zobrazen FirstFragment.

Z uvedeného XML kódu je patrné, že kontejner bude roztažený přes celou aktivitu. Naším cílem totiž je zobrazeným fragmentem překrýt obsah celé aktivity. Aby se tak stalo, je nutné splnit tři podmínky:

• V XML kódu musí být element <FrameLayout> umístěn až za elementem <Button>.
• <FrameLayout> musí mít atribut: android:elevation nastaven na hodnotu 2dp nebo více. A to proto, že komponenta Button má tento atribut vnitřně nastaven právě na hodnotu 2dp.
• Zobrazovaný fragment musí mít nastaveno nějaké pozadí. Defaultně je bez pozadí, proto je "průhledný".

Java kód aktivity ActivityFirstFragment

Nyní otevřeme soubor ActivityFirstFragment.java, do kterého si doplníme proměnou btnShowFirstFragment typu Button:

public class ActivityFirstFragment extends AppCompatActivity {

    Button btnShowFirstFragment;
}

Metoda onCreate()

Ve třídě ActivityFirstFragment, v přepsané metodě onCreate(), nastavíme vzhled aktivity a získáme přístup ke komponentám deklarovaným v XML návrhu, se kterými v Java kódu později pracujeme. V této aktivitě se jedná o jedno tlačítko, kterému následně nastavujeme obsluhu události kliknutí. Kliknutím na toto tlačítko bude zobrazen náš první fragment:

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

        btnShowFirstFragment = findViewById(R.id.btnShowFirstFragment);

        btnShowFirstFragment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showFirstFragment();
            }
        });
    }

Metoda showFirstFragment()

V této metodě zajistíme vytvoření a zobrazení fragmentu:

private void showFirstFragment() {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

        FirstFragment firstFragment = new FirstFragment();
        fragmentTransaction.add(R.id.containerForFirstFragment, firstFragment);
        fragmentTransaction.commit();
    }

V prvním řádku metody deklarujeme proměnnou fragmentManager, kterou inicializujeme instancí třídy FragmentManager.

Třída FragmentManager umožňuje správu fragmentů v aktivitě.

Při přidávání fragmentů provádíme, za pomoci třídy FragmentTransaction, tzv. transakce. Proto v druhém řádku vytváříme instanci této třídy nazvanou fragmentTransaction. Získáme jí právě prostřednictvím instance fragmentManager. Následuje třetí řádek s vytvořením nové instance našeho fragmentu FirstFragment.

Ve čtvrtém řádku tento fragment přidáváme do kontejneru voláním metody add(), volané na instanci fragmentTransaction. V prvním parametru této metody uvádíme ID kontejneru z XML návrhu aktivity, ve kterém má být fragment zobrazen. Do druhého parametru dosadíme konkrétní instanci zobrazovaného fragmentu.

Aby byla transakce skutečně provedena, musíme provést potvrzení voláním metody commit().

Máme hotovou první podaktivitu s první ukázkou.

Aktivita MainActivity

Nyní se vrátíme ke dvěma souborům hlavní aktivity aplikace, vygenerovaným při vytvoření našeho projektu. Jde o soubory MainActivity.java a activity_main.xml. Upravíme je tak, aby bylo možné z hlavní aktivity aktivitu ActivityFirstFragment otevřít.

XML kód aktivity activity_main

Soubor activity_main.xml upravíme takto:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E1E1E1"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:padding="15dp">

    <Button
        android:id="@+id/btnInsertFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Zobrazení fragmentu" />

</LinearLayout>

Hlavní aktivita bude zatím obsahovat pouze jedno tlačítko, kterým otevřeme aktivitu ActivityFirstFragment. Aktuální vzhled hlavní aktivity máme zde:

Java kód aktivity MainActivity

Otevřeme soubor MainActivity.java, do kterého si doplníme proměnou btnInsertFragment typu Button:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button btnInsertFragment;

}

Metoda onCreate()

Ve třídě hlavní aktivity MainActivity máme metodu onCreate() s inicializací grafického uživatelského rozhraní:

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

        btnInsertFragment = findViewById(R.id.btnInsertFragment);
        btnInsertFragment.setOnClickListener(this);
    }

Metoda onClick()

Dále ve třídě hlavní aktivity MainActivity máme přepsanou metodu onClick() z rozhraní View.OnClickListener pro ošetření události kliknutí na tlačítko:

@Override
    public void onClick(View v) {
        Intent intent;

        switch (v.getId()) {
            case R.id.btnInsertFragment:
                intent = new Intent(this, ActivityFirstFragment.class);
                startActivity(intent);
                break;
        }
    }

Konstrukci switch zde použijeme proto, že počítáme s větším počtem tlačítek, která později budeme postupně přidávat.

Tímto jsme dokončili první funkčnost naší ukázkové aplikace. Kód hlavní aktivity budeme později dále postupně doplňovat o nově přidaná tlačítka s dalšími ukázkami.

V příští lekci, Android fragmenty - Předání dat fragmentu, začneme s výkladem o komunikaci mezi fragmentem a aktivitou. Začneme tím, jak fragmentu v aktivitě předat data a jak je zpracovat v Java kódu fragmentu.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.