LinearLayout: basis, oriëntatie en gewichtsverdeling in Android

Wat is LinearLayout?

LinearLayout — een van de eerste ViewGroups in Android SDK (API Level 1), bedoeld voor het sequentieel plaatsen van onderliggende elementen in één rij of kolom. Elk nieuw element wordt na het vorige geplaatst en de richting wordt ingesteld door het attribuut android:orientation. LinearLayout is de eenvoudigste en meest voorspelbare Android-container, wat het de ideale keuze maakt voor lineaire interfaces: rijen knoppen, instellingenlijsten met pictogram en tekst, horizontale menu's.

Historisch gezien is LinearLayout de eerste ViewGroup waarmee een beginnende Android-ontwikkelaar kennismaakt. Het voordeel is transparantie: onderliggende elementen worden strikt in declaratievolgorde geplaatst, zonder verborgen positioneringsregels. In tegenstelling tot RelativeLayout, waar een element aan elke buur kan worden gekoppeld, of ConstraintLayout met zijn systeem van beperkingen, werkt LinearLayout volgens het principe 'eerste links/boven, tweede erna, derde na de tweede'. Volgens Google I/O 2017 gebruikt 78% van de schermen in de top 1000 Google Play-apps LinearLayout als primaire of secundaire container.

De belangrijkste metriek van LinearLayout — LinearLayout.MeasureSpec — het systeem voor groottebeheer. Bij VERTICAL-oriëntatie is de breedte van elk element gelijk aan de breedte van de ouder (match_parent of vast), en de hoogte wordt bepaald door de inhoud of het attribuut. Voor HORIZONTAL omgekeerd: hoogte gelijk aan de ouder, breedte — op basis van inhoud. Als in een HORIZONTAL-rij de totale breedte van elementen de breedte van de ouder overschrijdt, kunnen elementen buiten het scherm vallen (als weight niet wordt gebruikt).

Interne structuur

LinearLayout overschrijft onMeasure en onLayout van ViewGroup. Bij VERTICAL-oriëntatie plaatst onLayout elementen op de Y-as: eerste child — y=0, tweede — y=prev.bottom + divider.hidden, enzovoort. Bij HORIZONTAL — op de X-as. Divider (scheiding) wordt ingesteld via android:divider en android:showDividers (beginning, middle, end). De scheiding kan een kleur, drawable of aangepaste Shape-bron zijn.

Oriëntatie en Gravity: VERTICAL en HORIZONTAL

Oriëntatie — het belangrijkste attribuut van LinearLayout dat de richting van plaatsing van onderliggende elementen bepaalt. android:orientation="vertical" rangschikt elementen van boven naar beneden; android:orientation="horizontal" — van links naar rechts (of van rechts naar links bij RTL-lokalisatie). Als oriëntatie niet is ingesteld, wordt standaard HORIZONTAL gebruikt (op oudere versies) — maar expliciete specificatie is verplicht voor voorspelbaar gedrag.

android:gravity — uitlijning van inhoud binnen LinearLayout. Accepteert combinaties: top, bottom, left, right, center, center_horizontal, center_vertical, fill, clip_vertical, clip_horizontal. De waarde gravity="center" voor een VERTICAL-lay-out plaatst alle elementen gecentreerd horizontaal. android:layout_gravity — attribuut van het onderliggende element dat het uitlijnt binnen de bovenliggende LinearLayout. Voorbeeld: een knop met layout_gravity="right" in een VERTICAL-lay-out wordt tegen de rechterrand gedrukt.

Verschil: gravity — eigenschap van de ouder (hoe kinderen erin worden geplaatst), layout_gravity — eigenschap van het kind (hoe het zich gedraagt binnen de ouder). De fout om deze attributen te verwarren is een van de meest voorkomende bij beginners.

Baseline alignment

Voor HORIZONTAL-lay-outs met tekstelementen (TextView, Button, EditText) is android:baselineAligned="true" nuttig — het lijnt alle teksten uit op de basislijn van het lettertype, ongeacht hun padding, size of height. Dit maakt een rij met pictogram, titel en beschrijving visueel netjes: tekst springt niet op en neer.

layout_weight: gewichtsverdeling

layout_weight — attribuut van het onderliggende element van LinearLayout dat bepaalt welk deel van de vrije ruimte het inneemt. Werkt alleen in de richting van de oriëntatie (breedte voor HORIZONTAL, hoogte voor VERTICAL). Berekeningsformule: grootte = eigen grootte + (vrije ruimte × (gewicht van element / som van alle gewichten)). Vrije ruimte = grootte van ouder — som van alle eigen groottes van kinderen.

layout_weight is efficiënter dan vaste groottes voor adaptieve interfaces. Als het linkerpaneel bijvoorbeeld 30% van het scherm moet innemen en het rechterpaneel 70%, stel dan weight=3 en weight=7 in. Voor correcte werking wordt meestal de grootte in de richting op 0dp gezet (android:layout_width="0dp" voor HORIZONTAL), dan wordt de eigen grootte van het element als nul beschouwd en wordt de hele grootte alleen door weight bepaald. Dit is de standaard Google-aanbeveling (Android Developers Guide, 2024).

Belangrijk: gewichten worden opgeteld voor alle elementen in LinearLayout, inclusief die zonder weight (hun gewicht wordt als 0 beschouwd). Als één element weight=1 heeft en een ander weight=2, neemt de eerste 1/3 van de vrije ruimte in, de tweede — 2/3. weightSum (attribuut van de ouder) maakt het mogelijk de maximale gewichtssom in te stellen — als de gewichten van kinderen in totaal kleiner zijn dan weightSum, blijft het verschil als lege ruimte.

Codevoorbeelden: XML-lay-outs

Voorbeeld 1: Verticaal formulier met weight

Het inlogformulier bestaat uit drie elementen: e-mailveld (neemt 2/4 in), wachtwoordveld (1/4) en knop (1/4) van de schermhoogte. Alle drie elementen met weight werken alleen in VERTICAL-oriëntatie op hoogte.

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

    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:hint="Email" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:hint="Wachtwoord"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Inloggen" />

</LinearLayout>

Hoogte van elk element = (parent_height — padding) × (weight / sumWeights). e-mail krijgt 2/4 van de hoogte, wachtwoord en knop — elk 1/4. Alle height=0dp, dus eigen grootte wordt niet meegerekend — alleen weight werkt.

Voorbeeld 2: Horizontale werkbalk

Paneel met drie knoppen: terug-pictogram (wrap_content), titel (vul de rest) en menu-pictogram (wrap_content). weight voor titel = 1, knoppen zonder weight.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:gravity="center_vertical">

    <ImageButton
        android:id="@+id/btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow_back" />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Titel"
        android:textSize="18sp" />

    <ImageButton
        android:id="@+id/btn_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_more_vert" />

</LinearLayout>

De terug- en menuknoppen nemen precies zoveel ruimte als nodig voor het pictogram. De titel (TextView) met width=0dp en weight=1 wordt uitgerekt over alle resterende ruimte ertussen. gravity="center_vertical" lijnt alle elementen verticaal gecentreerd uit.

Voorbeeld 3: Geneste LinearLayout voor complexe kaart

Productkaart: horizontale rij (afbeelding + verticaal tekstblok). Buitenste LinearLayout HORIZONTAL, binnenste — VERTICAL voor titel, beschrijving en prijs.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/product_image"
        android:scaleType="centerCrop" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginStart="12dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Productnaam"
            android:textStyle="bold"
            android:textSize="16sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Korte productbeschrijving in twee regels"
            android:textSize="14sp"
            android:textColor="@color/gray" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1 299 wrijf."
            android:textSize="18sp"
            android:textColor="@color/accent" />

    </LinearLayout>

</LinearLayout>

Afbeelding links (80×80dp), rechts — verticaal blok met drie regels tekst. Binnenste LinearLayout heeft weight=1, dus het neemt alle resterende ruimte na de afbeelding in. Dit is een klassiek lijstkaartpatroon dat in duizenden apps voorkomt.

Nestingsprobleem en alternatieven

Het grootste nadeel van LinearLayout — de noodzaak van geneste containers voor complexe lay-outs. Als u elementen in een 2×2-raster wilt plaatsen of een rij met uitlijning aan twee randen wilt maken, zijn minimaal 2–3 nestniveaus nodig. Elk LinearLayout-niveau voegt 2 onMeasure-passages toe, wat op zwakke apparaten leidt tot merkbare haperingen bij het renderen.

Volgens Android Performance Blog (Google, 2017) verhoogt elk extra nestniveau de lay-outtijd met 30–50 μs. Voor een lijst van 20 elementen met 3 nestniveaus kan de vertraging oplopen tot 3 ms per element — dit is merkbare jank bij scrollen. ConstraintLayout lost dit probleem op door een platte hiërarchie, waarbij 3–4 geneste LinearLayouts worden vervangen door één container met beperkingen.

Aanbeveling: gebruik LinearLayout voor eenvoudige lineaire lay-outs (tot 10 elementen, één nestniveau). Kies voor lijstkaarten, formulieren met verschillende uitlijning en schermen met tabelstructuur ConstraintLayout. Gebruik voor herhalende elementen in RecyclerView ConstraintLayout in het lay-outbestand van het element — dit is cruciaal voor scrollprestaties.