LinearLayout: mga batayan, oryentasyon at pamamahagi ng timbang sa Android

Ano ang LinearLayout?

LinearLayout — isa sa mga unang ViewGroup sa Android SDK (API Level 1), na idinisenyo para sa sunud-sunod na paglalagay ng mga child element sa isang hilera o kolum. Ang bawat bagong elemento ay inilalagay pagkatapos ng nauna, at ang direksyon ay itinakda ng attribute na android:orientation. Ang LinearLayout ay ang pinakasimple at pinaka-predictable na container ng Android, na ginagawa itong perpektong pagpili para sa mga linear na interface: mga hilera ng pindutan, mga listahan ng setting na may icon at teksto, mga pahalang na menu.

Sa kasaysayan, ang LinearLayout ay ang unang ViewGroup na nakikilala ng isang baguhang Android developer. Ang kalamangan nito ay transparency: ang mga child element ay inilalagay nang mahigpit sa pagkakasunud-sunod ng deklarasyon, nang walang nakatagong mga panuntunan sa pagpoposisyon. Hindi tulad ng RelativeLayout, kung saan ang isang elemento ay maaaring nakatali sa anumang kapitbahay, o ConstraintLayout na may sistema ng mga hadlang, ang LinearLayout ay gumagana sa prinsipyong 'una sa kaliwa/itaas, pangalawa pagkatapos nito, pangatlo pagkatapos ng pangalawa'. Ayon sa Google I/O 2017, 78% ng mga screen sa top 1000 Google Play app ay gumagamit ng LinearLayout bilang pangunahing o pantulong na container.

Ang pangunahing sukatan ng LinearLayout — LinearLayout.MeasureSpec — sistema ng pamamahala ng laki. Sa orientasyong VERTICAL, ang lapad ng bawat elemento ay katumbas ng lapad ng magulang (match_parent o fixed), at ang taas ay tinutukoy ng nilalaman o attribute. Para sa HORIZONTAL baligtad: taas katumbas ng magulang, lapad — batay sa nilalaman. Kung sa isang HORIZONTAL na hilera ang kabuuang lapad ng mga elemento ay lumampas sa lapad ng magulang, ang mga elemento ay maaaring lumabas sa screen (kung hindi ginagamit ang weight).

Panloob na istraktura

Ang LinearLayout ay nag-o-override ng onMeasure at onLayout mula sa ViewGroup. Sa orientasyong VERTICAL, inilalagay ng onLayout ang mga elemento sa Y axis: unang child — y=0, pangalawa — y=prev.bottom + divider.hidden, at iba pa. Sa HORIZONTAL — sa X axis. Ang Divider (paghihiwalay) ay itinakda sa pamamagitan ng android:divider at android:showDividers (beginning, middle, end). Ang paghihiwalay ay maaaring kulay, drawable, o custom na Shape resource.

Oryentasyon at Gravity: VERTICAL at HORIZONTAL

Oryentasyon — ang pangunahing attribute ng LinearLayout na tumutukoy sa direksyon ng paglalagay ng mga child element. android:orientation="vertical" nag-aayos ng mga elemento mula sa itaas pababa; android:orientation="horizontal" — mula kaliwa pakanan (o kanan pakaliwa sa RTL localization). Kung hindi nakatakda ang oryentasyon, bilang default ay ginagamit ang HORIZONTAL (sa mas lumang bersyon) — ngunit ang tahasang pagtukoy ay kinakailangan para sa predictable na pag-uugali.

android:gravity — pag-align ng nilalaman sa loob ng LinearLayout. Tumatanggap ng mga kumbinasyon: top, bottom, left, right, center, center_horizontal, center_vertical, fill, clip_vertical, clip_horizontal. Ang halagang gravity="center" para sa VERTICAL layout ay ilalagay ang lahat ng elemento na naka-center nang pahalang. android:layout_gravity — attribute ng child element na nag-a-align nito sa loob ng magulang na LinearLayout. Halimbawa: isang pindutan na may layout_gravity="right" sa VERTICAL layout ay idiin sa kanang gilid.

Pagkakaiba: gravity — pag-aari ng magulang (kung paano inilalagay ang mga bata sa loob nito), layout_gravity — pag-aari ng bata (kung paano ito kumikilos sa loob ng magulang). Ang pagkakamali ng pagkalito sa mga attribute na ito ay isa sa pinakakaraniwan sa mga nagsisimula.

Baseline alignment

Para sa mga HORIZONTAL layout na may mga elementong tekstwal (TextView, Button, EditText) ay kapaki-pakinabang ang android:baselineAligned="true" — ina-align nito ang lahat ng teksto batay sa baseline ng font, anuman ang kanilang padding, size o height. Ginagawa nitong biswal na maayos ang isang hilera na may icon, pamagat at paglalarawan: ang teksto ay hindi tumatalon pataas at pababa.

layout_weight: pamamahagi ng timbang

layout_weight — attribute ng child element ng LinearLayout na tumutukoy kung anong bahagi ng libreng espasyo ang sasakupin nito. Gumagana lamang sa direksyon ng oryentasyon (lapad para sa HORIZONTAL, taas para sa VERTICAL). Formula ng pagkalkula: laki = sariling laki + (libreng espasyo × (timbang ng elemento / kabuuan ng lahat ng timbang)). Libreng espasyo = laki ng magulang — kabuuan ng lahat ng sariling laki ng mga bata.

Ang layout_weight ay mas mahusay kaysa sa mga nakapirming laki para sa mga adaptibong interface. Halimbawa, kung ang kaliwang panel ay dapat sumakop ng 30% ng screen at ang kanang panel — 70%, itakda ang weight=3 at weight=7. Para sa tamang paggana, karaniwang itinatakda ang laki sa direksyon sa 0dp (android:layout_width="0dp" para sa HORIZONTAL), kung gayon ang sariling laki ng elemento ay itinuturing na zero, at ang buong laki ay tinutukoy lamang ng weight. Ito ang karaniwang rekomendasyon ng Google (Android Developers Guide, 2024).

Mahalaga: ang mga timbang ay pinagsama-sama para sa lahat ng elemento sa LinearLayout, kabilang ang mga walang weight (ang kanilang timbang ay itinuturing na 0). Kung ang isang elemento ay may weight=1 at ang isa ay weight=2, ang una ay sasakop ng 1/3 ng libreng espasyo, ang pangalawa — 2/3. Ang weightSum (attribute ng magulang) ay nagpapahintulot sa pagtatakda ng maximum na kabuuan ng timbang — kung ang mga timbang ng mga bata sa kabuuan ay mas mababa kaysa weightSum, ang pagkakaiba ay nananatili bilang walang laman na espasyo.

Mga halimbawa ng code: mga layout ng XML

Halimbawa 1: Patayong form na may weight

Ang form ng pag-login ay binubuo ng tatlong elemento: field ng email (sumasakop ng 2/4), field ng password (1/4) at pindutan (1/4) ng taas ng screen. Lahat ng tatlong elemento na may weight ay gumagana lamang sa VERTICAL na oryentasyon ayon sa taas.

<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="Password"
        android:inputType="textPassword" />

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

</LinearLayout>

Taas ng bawat elemento = (parent_height — padding) × (weight / sumWeights). Ang email ay makakakuha ng 2/4 ng taas, password at pindutan — tig-1/4. Lahat ng height=0dp, kaya ang sariling laki ay hindi isinasaalang-alang — tanging weight ang gumagana.

Halimbawa 2: Pahalang na toolbar

Panel na may tatlong pindutan: icon ng bumalik (wrap_content), pamagat (fill ang natitira) at icon ng menu (wrap_content). weight para sa pamagat = 1, mga pindutan na walang 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="Pamagat"
        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>

Ang mga pindutan ng bumalik at menu ay sumasakop nang eksakto kung gaano karaming kailangan para sa icon. Ang pamagat (TextView) na may width=0dp at weight=1 ay umaabot sa lahat ng natitirang espasyo sa pagitan nila. gravity="center_vertical" ina-align ang lahat ng elemento sa patayong gitna.

Halimbawa 3: Mga nested na LinearLayout para sa kumplikadong card

Card ng produkto: pahalang na hilera (imahe + patayong bloke ng teksto). Panlabas na LinearLayout HORIZONTAL, panloob — VERTICAL para sa pamagat, paglalarawan at presyo.

<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="Pangalan ng produkto"
            android:textStyle="bold"
            android:textSize="16sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Maikling paglalarawan ng produkto sa dalawang linya"
            android:textSize="14sp"
            android:textColor="@color/gray" />

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

    </LinearLayout>

</LinearLayout>

Imahe sa kaliwa (80×80dp), sa kanan — patayong bloke ng tatlong linya ng teksto. Ang panloob na LinearLayout ay may weight=1, kaya sinasakop nito ang lahat ng natitirang espasyo pagkatapos ng imahe. Ito ay isang klasikong pattern ng list card na matatagpuan sa libu-libong mga app.

Problema ng pagsasanib at mga alternatibo

Pangunahing disadvantage ng LinearLayout — ang pangangailangan para sa mga nested container para sa kumplikadong layout. Kung kailangan mong maglagay ng mga elemento sa isang 2×2 grid o gumawa ng isang hilera na may pagkakahanay sa dalawang gilid, kinakailangan ang hindi bababa sa 2–3 antas ng pagsasanib. Ang bawat antas ng LinearLayout ay nagdaragdag ng 2 pass ng onMeasure, na sa mahihinang device ay humahantong sa kapansin-pansing lag sa pag-render.

Ayon sa Android Performance Blog (Google, 2017), ang bawat karagdagang antas ng pagsasanib ay nagpapataas ng oras ng layout ng 30–50 μs. Para sa isang listahan ng 20 elemento na may 3 antas ng pagsasanib, ang pagkaantala ay maaaring umabot sa 3 ms bawat elemento — ito ay kapansin-pansing jank habang nag-i-scroll. Niresolba ng ConstraintLayout ang problemang ito sa pamamagitan ng flat hierarchy, na pinapalitan ang 3–4 na nested na LinearLayout ng isang container na may mga hadlang.

Rekomendasyon: gamitin ang LinearLayout para sa mga simpleng linear na layout (hanggang 10 elemento, isang antas ng pagsasanib). Para sa mga list card, form na may iba't ibang pagkakahanay at screen na may istrakturang tabular, piliin ang ConstraintLayout. Para sa mga umuulit na elemento sa RecyclerView, gamitin ang ConstraintLayout sa layout file ng elemento — ito ay mahalaga para sa pagganap ng pag-scroll.