Rozvržení uživatelského rozhraní v Androidu: Přehled layoutů

V systému Android je každá obrazovka tvořena hierarchií vizuálních prvků. Jednotlivé komponenty (tlačítka, texty, obrázky – souhrnně označované jako View) jsou vkládány do neviditelných kontejnerů zvaných ViewGroup neboli Layouty.

Layout určuje polohu, velikost a vzájemné uspořádání vložených prvků na různých typech a velikostech displejů.

---

1. Základní principy práce s layouty

Všechny prvky vložené do layoutu musí mít definovány dva základní atributy určující jejich rozměry:

• android:layout_width (šířka prvku),
• android:layout_height (výška prvku).

Pro tyto atributy se používají následující hodnoty:

• wrap_content: Prvek se roztáhne pouze tak, aby se do něj vešel jeho vnitřní obsah (např. text v tlačítku).
• match_parent: Prvek se roztáhne na celou dostupnou šířku nebo výšku svého rodičovského kontejneru.
• Pevná hodnota v jednotkách dp (např. 100dp): Používá se převážně u obrázků či specifických oddělovačů, nikoli u textů (hrozí oříznutí při změně velikosti písma v systému).

---

2. Přehled hlavních typů layoutů

---

A. LinearLayout (Lineární řazení)

LinearLayout skládá všechny své vnořené prvky do jedné řady – buď svisle pod sebe, nebo vodorovně vedle sebe.

• Klíčový atribut:
  android:orientation="vertical" (svislé řazení) nebo android:orientation="horizontal" (vodorovné řazení).
• Váhové rozložení (layout_weight):
  Umožňuje rozdělit zbývající volné místo v kontejneru v přesném poměru mezi prvky (např. dvě tlačítka vedle sebe, každé zabírá přesně 50 % šířky).

Ukázka svislého řazení:

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="První prvek nahoře" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Druhý prvek pod ním" />

</LinearLayout>

• Využití: Jednoduché formuláře, řady tlačítek, svislé seznamy ovládacích prvků.

---

B. ConstraintLayout (Moderní standard pro komplexní obrazovky)

ConstraintLayout je v současnosti výchozím a doporučeným kontejnerem v Android Studiu. Pozice každého prvku je určena pomocí vazeb (constraints) k okrajům obrazovky nebo k ostatním prvkům.

• Základní pravidlo: Každý vložený prvek musí mít definovanou alespoň jednu vodorovnou a jednu svislou vazbu, jinak je při překladu umístěn do levého horního rohu [0,0].
• Plochá hierarchie (Flat view hierarchy): Umožňuje vytvářet složitá rozhraní bez nutnosti vnořovat do sebe desítky dílčích layoutů, což výrazně zrychluje vykreslování obrazovky.

Příklad vazby mezi prvky:

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nadpis obrazovky"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnAction"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Akční tlačítko"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

• Využití: Většina běžných obrazovek moderních aplikací s komplexním rozložením.

---

C. FrameLayout (Překrývání vrstev)

FrameLayout je navržen tak, aby držel zpravidla pouze jeden prvek, případně skládal prvky přes sebe v pořadí, v jakém jsou zapsány v XML kódu (vrstva nad vrstvou – jako ve Photoshopu).

Příklad: Obrázek s ikonou zámku uprostřed:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/img_bike_oiz_m10"
        android:scaleType="centerCrop" />

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_lock" />

</FrameLayout>

• Využití: Dynamické kontejnery pro fragmenty (FragmentContainerView), odznaky notifikací (badge) přes ikony, načítací kolečka překrývající obsah.

---

D. ScrollView (Posouvání přetékajícího obsahu)

Pokud výška obsahu obrazovky přesáhne výšku fyzického displeje (např. na menších telefonech), obsah se ve standardním LinearLayoutu ořízne a nelze jej posunout. Pro zajištění posouvání slouží ScrollView.

• Zásadní pravidlo: ScrollView smí obsahovat pouze jeden přímý potomkovský element (zpravidla svislý LinearLayout), do kterého se vkládají ostatní prvky.

Ukázka struktury:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">

        <!-- Zde jsou vloženy libovolné prvky formuláře -->

    </LinearLayout>
</ScrollView>

---

E. RelativeLayout (Zastaralý předchůdce)

Starší typ rozvržení, kde se prvky zarovnávaly relativně k rodiči nebo k sobě navzájem pomocí atributů jako android:layout_below="@id/...".

Doporučení pro praxi:
V moderním Androidu je RelativeLayout považován za zastaralý a byl plně nahrazen výkonnějším a flexibilnějším ConstraintLayoutem.

---

3. Srovnávací přehled použití

Název layoutu	Směr / Princip řazení	Kdy jej zvolit
LinearLayout	Jeden směr (horizontálně / vertikálně)	Jednoduché sekvence prvků, přepínače v řadě, formuláře pod sebou.
ConstraintLayout	Síť relativních vazeb (nahoře, dole, vlevo, vpravo)	Výchozí volba pro kompletní obrazovky; eliminuje vnořené layouty.
FrameLayout	Vrstvení prvků na sebe na ose Z	Plovoucí tlačítka, překryvné stavy (loading), držáky pro fragmenty.
ScrollView	Rolování obsahu na ose Y	Dlouhé formuláře a obrazovky, které se nevejdou na displej.