LinearLayout: asoslar, orientatsiya va vazn taqsimoti Androidda

LinearLayout nima?

LinearLayout — Android SDK-dagi (API Level 1) birinchi ViewGroup-lardan biri, bolalar elementlarini ketma-ket bir qator yoki ustunga joylashtirish uchun mo'ljallangan. Har bir yangi element avvalgisidan keyin joylashadi va yo'nalish android:orientation atributi orqali o'rnatiladi. LinearLayout Android-ning eng sodda va bashorat qilinadigan konteyneri bo'lib, uni chiziqli interfeyslar uchun ideal tanlovga aylantiradi: tugmalar qatori, belgi va matn bilan sozlamalar ro'yxati, gorizontal menyular.

Tarixiy jihatdan, LinearLayout yangi boshlovchi Android dasturchisi tanishadigan birinchi ViewGroup hisoblanadi. Uning afzalligi — shaffoflik: bolalar elementlari yashirin joylashtirish qoidalarisiz, e'lon qilish tartibida qat'iy joylashtiriladi. RelativeLayout-dan farqli o'laroq, element istalgan qo'shniga bog'lanishi mumkin yoki ConstraintLayout-ning cheklash tizimi bilan, LinearLayout «birinchisi chapda/yuqorida, ikkinchisi undan keyin, uchinchisi ikkinchisidan keyin» prinsipi bo'yicha ishlaydi. Google I/O 2017 ma'lumotlariga ko'ra, Google Play'dagi top 1000 ilovasining 78% ekrani LinearLayout-dan asosiy yoki yordamchi konteyner sifatida foydalanadi.

LinearLayout-ning asosiy metriki — LinearLayout.MeasureSpec — o'lcham boshqaruv tizimi. VERTICAL orientatsiyasida har bir elementning kengligi ota-onaning kengligiga teng (match_parent yoki sobit), balandligi esa tarkib yoki atribut bilan belgilanadi. HORIZONTAL uchun aksincha: balandlik ota-onaga teng, kenglik — tarkibga qarab. HORIZONTAL qatordagi elementlarning umumiy kengligi ota-onaning kengligidan oshib ketsa, elementlar ekrandan chiqib ketishi mumkin (weight ishlatilmasa).

Ichki tuzilma

LinearLayout ViewGroup-dan onMeasure va onLayout-ni override qiladi. VERTICAL orientatsiyasida onLayout elementlarni Y o'qi bo'ylab joylashtiradi: birinchi child — y=0, ikkinchi — y=prev.bottom + divider.hidden va hokazo. HORIZONTAL da — X o'qi bo'ylab. Divider (ajratgich) android:divider va android:showDividers (beginning, middle, end) orqali o'rnatiladi. Ajratgich rang, drawable yoki maxsus Shape resursi bo'lishi mumkin.

Orientatsiya va Gravity: VERTICAL va HORIZONTAL

Orientatsiya — bolalar elementlarini joylashtirish yo'nalishini belgilaydigan LinearLayout-ning asosiy atributi. android:orientation="vertical" elementlarni yuqoridan pastga joylashtiradi; android:orientation="horizontal" — chapdan o'ngga (RTL lokalizatsiyasida o'ngdan chapga). Orientatsiya o'rnatilmagan bo'lsa, sukut bo'yicha HORIZONTAL ishlatiladi (eski versiyalarda) — lekin bashorat qilinadigan xatti-harakat uchun aniq ko'rsatish majburiydir.

android:gravity — LinearLayout ichidagi tarkibni tekislash. Kombinatsiyalarni qabul qiladi: top, bottom, left, right, center, center_horizontal, center_vertical, fill, clip_vertical, clip_horizontal. VERTICAL maket uchun gravity="center" qiymati barcha elementlarni gorizontal markazga joylashtiradi. android:layout_gravity — bola elementining ota-ona LinearLayout ichida o'zini tekislaydigan atributi. Misol: VERTICAL maketda layout_gravity="right" bo'lgan tugma o'ng chetga yopishtiriladi.

Farq: gravity — ota-onaning xususiyati (bolalarning uning ichida qanday joylashishi), layout_gravity — bolaning xususiyati (ota-ona ichida o'zini qanday tutishi). Bu atributlarni chalkashtirish xatosi yangi boshlovchilar orasida eng keng tarqalganlardan biridir.

Baseline alignment

Matn elementlari bo'lgan HORIZONTAL maketlar uchun (TextView, Button, EditText) android:baselineAligned="true" foydalidir — u barcha matnlarni shriftning asosiy chizig'i bo'ylab tekislaydi, padding, size yoki height-dan qat'i nazar. Bu belgi, sarlavha va tavsifga ega qatorni vizual jihatdan tartibli qiladi: matn yuqori-pastga sakramaydi.

layout_weight: vazn taqsimoti

layout_weight — LinearLayout-ning bola elementining atributi, bo'sh joyning qaysi qismini egallashini belgilaydi. Faqat orientatsiya yo'nalishida ishlaydi (HORIZONTAL uchun kenglik, VERTICAL uchun balandlik). Hisoblash formulasi: o'lcham = o'z o'lchami + (bo'sh joy × (elementning vazni / barcha vaznlar yig'indisi)). Bo'sh joy = ota-onaning o'lchami — barcha bolalarning o'z o'lchamlari yig'indisi.

layout_weight adaptiv interfeyslar uchun sobit o'lchamlardan ko'ra samaraliroqdir. Masalan, chap panel ekranning 30% ini, o'ng panel esa 70% ini egallashi kerak bo'lsa, weight=3 va weight=7 o'rnating. To'g'ri ishlashi uchun odatda yo'nalish bo'yicha o'lcham 0dp qo'yiladi (android:layout_width="0dp" HORIZONTAL uchun), unda elementning o'z o'lchami nol deb hisoblanadi va butun o'lcham faqat weight bilan belgilanadi. Bu Google-ning standart tavsiyasidir (Android Developers Guide, 2024).

Muhim: vaznlar LinearLayout-dagi barcha elementlar uchun yig'iladi, shu jumladan weight o'rnatilmaganlar (ularning vazni 0 deb hisoblanadi). Agar bir element weight=1 ga, ikkinchisi weight=2 ga ega bo'lsa, birinchisi bo'sh joyning 1/3 qismini, ikkinchisi — 2/3 qismini egallaydi. weightSum (ota-onaning atributi) maksimal vazn yig'indisini o'rnatishga imkon beradi — agar bolalarning vaznlari yig'indisi weightSum dan kam bo'lsa, farq bo'sh joy sifatida qoladi.

Kod misollari: XML maketlar

Misol 1: Weight bilan vertikal forma

Kirish formasi uch elementdan iborat: email maydoni (2/4 egallaydi), parol maydoni (1/4) va tugma (1/4) ekran balandligi bo'yicha. Weight bilan uchala element faqat VERTICAL orientatsiyasida balandlik bo'yicha ishlaydi.

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

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

</LinearLayout>

Har bir elementning balandligi = (parent_height — padding) × (weight / sumWeights). email balandlikning 2/4 qismini, parol va tugma — har biri 1/4 qismini oladi. Barcha height=0dp, shuning uchun o'z o'lchami hisobga olinmaydi — faqat weight ishlaydi.

Misol 2: Gorizontal asboblar paneli

Uch tugmali panel: orqaga belgisi (wrap_content), sarlavha (qolganini to'ldiradi) va menyu belgisi (wrap_content). Sarlavha uchun weight = 1, tugmalar weightsiz.

<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="Sarlavha"
        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>

Orqaga va menyu tugmalari belgi uchun kerakli miqdorda joy egallaydi. Sarlavha (TextView) width=0dp va weight=1 bilan ular orasidagi barcha qolgan bo'shliqqa yoyiladi. gravity="center_vertical" barcha elementlarni vertikal markazga tekislaydi.

Misol 3: Murakkab karta uchun ichma-ich LinearLayout

Mahsulot kartasi: gorizontal qator (rasm + vertikal matn bloki). Tashqi LinearLayout HORIZONTAL, ichki — sarlavha, tavsif va narx uchun VERTICAL.

<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="Mahsulot nomi"
            android:textStyle="bold"
            android:textSize="16sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mahsulotning qisqa tavsifi ikki qatorda"
            android:textSize="14sp"
            android:textColor="@color/gray" />

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

    </LinearLayout>

</LinearLayout>

Rasm chapda (80×80dp), o'ngda — uch qator matndan iborat vertikal blok. Ichki LinearLayout weight=1 ga ega, shuning uchun rasm keyin qolgan barcha joyni egallaydi. Bu minglab ilovalarda uchraydigan klassik ro'yxat kartasi namunasidir.

Ichma-ichlik muammosi va alternativlar

LinearLayout-ning asosiy kamchiligi — murakkab maketlar uchun ichma-ich konteynerlar zaruriyati. Elementlarni 2×2 tarmog'ida joylashtirish yoki ikki chetiga tekislash bilan qator yaratish uchun kamida 2–3 daraja ichma-ichlik talab qilinadi. Har bir LinearLayout darajasi 2 ta onMeasure o'tishini qo'shadi, bu zaif qurilmalarda chizishda sezilarli qotib qolishlarga olib keladi.

Android Performance Blog (Google, 2017) ma'lumotlariga ko'ra, har bir qo'shimcha ichma-ichlik darajasi layout vaqtini 30–50 μs ga oshiradi. 3 ichma-ichlik darajasiga ega 20 elementli ro'yxat uchun kechikish element boshiga 3 ms ga yetishi mumkin — bu aylantirishda sezilarli jank hisoblanadi. ConstraintLayout bu muammoni tekis ierarxiya orqali hal qiladi, 3–4 ichma-ich LinearLayout-ni cheklovlarga ega bitta konteyner bilan almashtiradi.

Tavsiya: oddiy chiziqli maketlar uchun LinearLayout dan foydalaning (10 elementgacha, bir daraja ichma-ichlik). Ro'yxat kartalari, turli tekislashli formalar va jadval tuzilishidagi ekranlar uchun ConstraintLayout ni tanlang. RecyclerView-dagi takrorlanuvchi elementlar uchun element layout faylida ConstraintLayout dan foydalaning — bu aylantirish unumdorligi uchun juda muhimdir.