ConstraintLayout — bu nima, constraintlar va Flat Hierarchy

ConstraintLayout nima?

ConstraintLayout — AndroidX ConstraintLayout kutubxonasidan olingan ViewGroup bo'lib, deklarativ cheklovlar (constraints) orqali moslashuvchan va samarali interfeyslar yaratish uchun mo'ljallangan. Elementlarni bir qatorga joylashtiruvchi LinearLayout yoki qo'shnilarga nisbatan joylashtiruvchi RelativeLayout-dan farqli o'laroq, ConstraintLayout har bir elementni bir vaqtning o'zida istalgan boshqa elementlarga va ota-onaga nisbatan bog'lash imkonini beradi.

Kutubxona Google I/O 2016 da murakkab ekranlarni ko'rsatishni tezlashtirish uchun yechim sifatida e'lon qilingan. ConstraintLayout hal qiladigan asosiy muammo — layoutlarning ichma-ich joylashishidir. Har bir ichma-ich ViewGroup kamida ikkita measure o'tishi va bitta layout o'tishini qo'shadi. 4 darajali ichma-ich ekran 8 ta measure o'tishini bajaradi; bir xil funksionallikka ega ConstraintLayout — atigi 2 ta o'tish. Google ma'lumotlariga ko'ra (Android Performance Blog, 2017), uchta ichma-ich LinearLayout-ni bitta ConstraintLayout bilan almashtirish onMeasure vaqtini 40% ga kamaytiradi.

Joriy versiya ConstraintLayout 2.1.4 Android 2.3+ (API 9) da AndroidX orqali barqaror ishlaydi. 2.0 versiyasida aylanma joylashtirish, Flow (elementlarning avtomatik ko'chirilishi) va MotionLayout qo'llab-quvvatlashi qo'shilgan. ConstraintLayout zamonaviy Android dasturlashni tushunish uchun majburiydir — u Jetpack Compose-da modifikatorlarning asosiy kontseptsiyasi sifatida, Android Studio-ning standart shablonlarida va Material Design 3-da ishlatiladi.

Tekis iyerarxiya qanday ishlaydi

ConstraintLayoutning tekis iyerarxiyasi barcha bola View-lar bir xil ichma-ich darajasida joylashganligini anglatadi. A elementini LinearLayout-ga, LinearLayout-ni esa RelativeLayout-ga joylashtirish o'rniga, barcha elementlar to'g'ridan-to'g'ri ota-ona ConstraintLayout-ga yoki bir-biriga atributlar orqali bog'lanadi. Bu quyidagilarni ta'minlaydi: kamroq xotira sarfi (har bir ViewGroup Java heap-da obyektdir), layout o'tishining tezlashishi (kamroq rekursiv chaqiruvlar), ekran o'lchami o'zgarishlarida oldindan bashorat qilinadigan xatti-harakat.

Constraint tizimi: bog'lanishlar, bias va margin

Constraint (cheklov) — bir Viewning chekkasi (yoki markazi) bilan boshqa View yoki ota-onaning chekkasi o'rtasidagi bog'lanishdir. Har bir View 8 tagacha constraintga ega bo'lishi mumkin: chap, yuqori, o'ng, pastki, start, end, baseline va markaz. Joylashtirish uchun kamida ikkita perpendikulyar constraint yetarli (masalan, yuqori + chap).

Atribut formati: app:layout_constraint[Manba]_to[Maqsad]Of="[id]" — bu yerda Manba bog'lanadigan chekka (Left, Right, Top, Bottom, Start, End, Baseline), Maqsad — maqsad chekkasi. Misol: app:layout_constraintTop_toBottomOf="@+id/header" «joriy elementning yuqori chegarasi header elementining pastki chegarasiga bog'langan» degan ma'noni anglatadi. Ota-onaga bog'lash uchun parent id-si ishlatiladi.

Bias (siljish) — qarama-qarshi constraintlar (left + right yoki top + bottom) mavjud bo'lganda ishlaydigan parametr. Qiymat 0 dan 1 gacha: 0 — chap/yuqori chekkaga bosilgan, 0.5 — markazda, 1 — o'ng/pastki chekkada. Atributlar: layout_constraintHorizontal_bias (0.0–1.0) va layout_constraintVertical_bias. Margin standart android:layout_margin* bilan belgilanadi, ammo constraint va margin mustaqil ishlaydi: margin — constraintdan masofa, qo'shni Viewdan emas.

Foizli joylashtirish

ConstraintLayout 1.1+ dan boshlab layout_constraintWidth_percent va layout_constraintHeight_percent orqali foizli o'lchamlar qo'llab-quvvatlanadi. 0.3 qiymati ota-onaning kengligi/balandligining 30% ini anglatadi. Bias bilan birgalikda bu dasturlashsiz adaptiv layoutlar yaratish imkonini beradi.

Chains va Guidelines: zanjirlar va yo'naltiruvchi chiziqlar

Chain (zanjir) — ikki tomonlama constraintlar bilan bog'langan ikki yoki undan ortiq View guruhi (A B ga, B A ga bog'langan). Zanjirlar elementlar orasidagi bo'shliqni quyidagi rejimlardan biriga muvofiq avtomatik taqsimlaydi: spread (marginlarni hisobga olgan holda teng), spread_inside (teng, chekka elementlar chekkalardan bo'shliqsiz), packed (elementlar umumiy bias bilan bir-biriga bosilgan). Rejim app:layout_constraintHorizontal_chainStyle yoki layout_constraintVertical_chainStyle atributi bilan belgilanadi.

Guideline (yo'naltiruvchi chiziq) — ish vaqtida ko'rinmaydigan, ammo bog'lanish uchun chiziq belgilaydigan yordamchi View. Guideline gorizontal yoki vertikal bo'lishi mumkin, dp, foiz (app:layout_constraintGuide_percent) yoki chekkadan masofa bilan (app:layout_constraintGuide_begin/end) joylashtiriladi. Guidelines adaptiv layoutlar uchun ajralmasdir — masalan, qurilma o'lchamidan qat'iy nazar ekranni ikkita teng yarmiga bo'lish uchun.

Google I/O 2017 ma'lumotlariga ko'ra, spread_inside zanjirlari weight bilan ichma-ich LinearLayout-lardan 15–20% samaraliroq, chunki weight hisoblash uchun zarur bo'lgan ikki marta measure o'tishidan qochadi.

Barrier, Group va virtual yordamchilar

Barrier (to'siq) — dinamik ravishda o'z o'rnini elementlar guruhining o'lchamiga moslashtiradigan virtual View. Ruxsat etilgan pozitsiyali Guideline-dan farqli o'laroq, Barrier guruhning eng keng elementi tomonidan «itariladi». Masalan, noma'lum uzunlikdagi sarlavha va tavsifingiz bo'lsa, eng keng matnning o'ng chekkasiga bog'langan Barrier belgini darhol ularning yoniga joylashtirish imkonini beradi. Atributlar: app:barrierDirection (left, right, top, bottom, start, end) va app:constraint_referenced_ids (vergul bilan ajratilgan id ro'yxati).

Group — bir vaqtning o'zida bir nechta Viewning ko'rinishini boshqaradigan virtual konteyner. Har bir element uchun alohida setVisibility chaqirish o'rniga, bitta Group ning ko'rinishini o'zgartirish kifoya. Group joylashtirishga ta'sir qilmaydi — faqat ko'rinishga. Flow — «oquvchan» layoutlar yaratish uchun virtual yordamchi: joy yetishmasa, elementlar matndagi kabi avtomatik ravishda yangi qator/ustunga o'tadi. Flow wrapMode: none, chain va aligned rejimlarini qo'llab-quvvatlaydi.

Ushbu vositalar (Barrier, Group, Flow, Guideline) virtual yordamchilar deb ataladi, chunki ular klassik ma'noda View emas — iyerarxiyada joy egallamaydi va fokus yoki teginish hodisalarida qatnashmaydi. Ularning maqsadi ichma-ich konteynerlar qo'shmasdan murakkab layoutlarni saqlashni soddalashtirishdir.

Misollar: XML va Kotlin

1-misol: Constraintlar bilan asosiy forma

Elektron pochta maydoni, parol va tugma bilan oddiy kirish formasi. Tugmadan tashqari barcha elementlar parent-ga bog'langan — u parol maydoni ostida joylashgan. Tekis iyerarxiya ishlatilgan — uchala element ham bir darajada.

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

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginHorizontal="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/email_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="16dp" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/password_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginHorizontal="16dp"
        android:text="Kirish" />

</androidx.constraintlayout.widget.ConstraintLayout>

Barcha elementlarning kengligi 0dp (match_constraint), ya'ni gorizontal margin hisobga olingan holda start dan end gacha cho'ziladi. Bu margin bilan match_parent ning analogi, ammo ichma-ichliksiz.

2-misol: spread_inside bilan zanjir

Uchta tugma, chekkalardan bo'shliqlar bilan gorizontal ravishda teng taqsimlangan. spread_inside zanjiri chekka tugmalarni chekkalarga, o'rtadagini esa ular orasidagi markazga joylashtiradi.

<Button
    android:id="@+id/btn_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_center"
    android:text="Chap" />

<Button
    android:id="@+id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_left"
    app:layout_constraintRight_toLeftOf="@+id/btn_right"
    android:text="Markaz" />

<Button
    android:id="@+id/btn_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_center"
    app:layout_constraintRight_toRightOf="parent"
    android:text="O'ng" />

Zanjir elementlar ikki tomonlama constraintlarga ega bo'lganda avtomatik yaratiladi. spread_inside rejimi zanjirning istalgan elementida app:layout_constraintHorizontal_chainStyle="spread_inside" orqali belgilanadi. Bu weightSum va layout_weight bilan LinearLayout ishlatish zaruratini bartaraf qiladi.

3-misol: Simmetrik layout uchun Guideline

50% da vertikal Guideline orqali ikkita teng ustun yaratish. Chap element chap parent chekkasiga va o'ng chekkasi bilan guideline-ga bog'langan; o'ng element — chap chekkasi bilan guideline-ga va o'ng parent chekkasiga.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_midpoint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/left_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/gl_midpoint"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

<TextView
    android:id="@+id/right_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/gl_midpoint"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

0.5 foizli Guideline avtomatik ravishda ekran kengligiga moslashadi. Planshet va telefonda ustun nisbatlari 50/50 bo'lib qoladi. Chap/o'ng nomenklaturasi uchun RTL mosligi uchun start/end atributlaridan foydalaning.

Taqqoslash: ConstraintLayout vs LinearLayout vs RelativeLayout

Android dasturlash uchun uchta asosiy ViewGroup ning taqqoslash jadvali: ConstraintLayout, LinearLayout va RelativeLayout. Mezonlar: moslashuvchanlik, samaradorlik, kod murakkabligi va qo'llanish sohalari.

Android Vitals ma'lumotlariga ko'ra (Google, 2025), ConstraintLayout-ni asosiy konteyner sifatida ishlatadigan ilovalar, ichma-ich LinearLayout-lardagi ilovalarga nisbatan murakkab ekranlarni ko'rsatishda o'rtacha 18% kamroq jank-kadrlarni ko'rsatadi. IT Sectr da 2018 yilda barcha XML layoutlar uchun ConstraintLayout-ni standart sifatida qabul qildik — bu ekran iyerarxiyasining o'rtacha chuqurligini 4.2 dan 1.8 darajaga tushirdi va yangi formalarni ishlab chiqishni 25% tezlashtirdi.