2. diel - Android fragmenty - Vytvorenie prvého fragmentu

V minulej lekcii, Android fragmenty - Úvod , sme si povedali čo je to fragment. Tiež sme založili nový projekt, kde sme vytvorili náš prvý fragment.

V dnešnom Android tutoriále vytvoríme aktivitu ActivityFirstFragment, v ktorej budeme zobrazovať náš prvý fragment FirstFragment.

Aktivita ActivityFirstFragment

V štruktúre projektu klikneme pravým tlačidlom myši na zložku java/cz/itnetwork/fragments/ av zobrazenom menu cez položky New a Activity zvolíme položku Empty Activity:

V otvorenom okne zadáme do políčka Activity Name názov aktivity ActivityFirstFragment. Ďalej zaškrtneme políčko Generate a Layout File. Potom skontrolujeme, že v políčku Layout Name je zadané activity_first_fragment. Tlačidlom Finish všetko potvrdíme:

Android Studio vygeneruje súbory ActivityFirstFragment.java a activity_first_fragment.xml, ktoré budeme ďalej upravovať.

Vzhľad aktivity ActivityFirstFragment bude nasledovný:

XML kód aktivity ActivityFirstFragment

Do vygenerovaného súboru activity_first_fragment.xml doplníme nasledujúci 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čidlo a jeden veľmi dôležitý element - <FrameLayout>. Jedná sa o layout, ktorému, v súvislosti s fragmentmi, hovoríme kontajner. Tento kontajner bude po otvorení aktivity prázdny. Až po stlačení tlačidla Zobraziť prvý fragment bude v kontajneri zobrazený FirstFragment.

Z uvedeného XML kódu je zrejmé, že kontajner bude roztiahnutý cez celú aktivitu. Našim cieľom totiž je zobrazeným fragmentom prekryť obsah celej aktivity. Aby sa tak stalo, je nutné splniť tri podmienky:

• V XML kóde musí byť element <FrameLayout> umiestnený až za elementom <Button>.
• <FrameLayout> musí mať atribút: android:elevation nastavený na hodnotu 2dp alebo viac. A to preto, že komponent Button má tento atribút vnútorne nastavený práve na hodnotu 2dp.
• Zobrazovaný fragment musí mať nastavené nejaké pozadie. Defaultne je bez pozadia, preto je "priehľadný".

Java kód aktivity ActivityFirstFragment

Teraz otvoríme súbor ActivityFirstFragment.java, do ktorého si doplníme premenou btnShowFirstFragment typu Button:

public class ActivityFirstFragment extends AppCompatActivity {

    Button btnShowFirstFragment;
}

Metóda onCreate()

V triede ActivityFirstFragment, v prepísanej metóde onCreate(), nastavíme vzhľad aktivity a získame prístup ku komponentom deklarovaným v XML návrhu, s ktorými v Java kóde neskôr pracujeme. V tejto aktivite sa jedná o jedno tlačidlo, ktorému následne nastavujeme obsluhu udalosti kliknutia. Kliknutím na toto tlačidlo bude zobrazený náš prvý 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();
            }
        });
    }

Metóda showFirstFragment()

V tejto metóde zaistíme vytvorenie a zobrazenie fragmentu:

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

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

V prvom riadku metódy deklarujeme premennú fragmentManager, ktorú inicializujeme inštanciou triedy FragmentManager.

Trieda FragmentManager umožňuje správu fragmentov v aktivite.

Pri pridávaní fragmentov vykonávame, za pomoci triedy FragmentTransaction Transaction, tzv. transakcie. Preto v druhom riadku vytvárame inštanciu tejto triedy nazvanú fragmentTransaction. Získame ju práve prostredníctvom inštancie fragmentManager. Nasleduje tretí riadok s vytvorením novej inštancie nášho fragmentu FirstFragment.

Vo štvrtom riadku tento fragment pridávame do kontajnera volaním metódy add(), volanej na inštancii fragmentTransaction. V prvom parametri tejto metódy uvádzame ID kontajnera z XML návrhu aktivity, v ktorom má byť fragment zobrazený. Do druhého parametra dosadíme konkrétnu inštanciu zobrazovaného fragmentu.

Aby bola transakcia skutočne vykonaná, musíme vykonať potvrdenie volaním metódy commit().

Máme hotovú prvú podaktivitu s prvou ukážkou.

Aktivita MainActivity

Teraz sa vrátime k dvom súborom hlavnej aktivity aplikácie, vygenerovaným pri vytvorení nášho projektu. Ide o súbory MainActivity.java a activity_main.xml. Upravíme ich tak, aby bolo možné z hlavnej aktivity aktivitu ActivityFirstFragment otvoriť.

XML kód aktivity activity_main

Súbor 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 zatiaľ obsahovať iba jedno tlačidlo, ktorým otvoríme aktivitu ActivityFirstFragment. Aktuálny vzhľad hlavnej aktivity máme tu:

Java kód aktivity MainActivity

Otvoríme súbor MainActivity.java, do ktorého si doplníme premenou btnInsertFragment typu Button:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button btnInsertFragment;

}

Metóda onCreate()

V triede hlavnej aktivity MainActivity máme metódu onCreate() s inicializáciou grafického používateľského rozhrania:

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

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

Metóda onClick()

Ďalej v triede hlavnej aktivity MainActivity máme prepísanú metódu onClick() z rozhrania View.OnClickListener pre ošetrenie udalosti kliknutí na tlačidlo:

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

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

Konštrukciu switch tu použijeme preto, že počítame s väčším počtom tlačidiel, ktoré neskôr budeme postupne pridávať.

Týmto sme dokončili prvú funkčnosť našej ukážkovej aplikácie. Kód hlavnej aktivity budeme neskôr ďalej postupne dopĺňať o novo pridané tlačidlá s ďalšími ukážkami.

V budúcej časti, Android fragmenty - XML návrh pre obojsmernú komunikáciu , vytvoríme XML návrh vzhľadu nového fragmentu a novej aktivity na ukážku komunikácie medzi fragmentom a aktivitou.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.