View Hierarchy: nədir, iş prinsipləri və interfeysi necə yoxlamaq olar

View Hierarchy nədir?

View Hierarchy — Android tətbiqinin istifadəçi interfeysini təşkil edən bütün View komponentlərinin ierarxik strukturudur. İnterfeysin hər bir elementi, istər düymə, mətn sahəsi, şəkil və ya konteyner olsun, bu iyerarxiyada ağacın düyünü kimi təmsil olunur və valideyn-övlad əlaqəsi layout komponentlərinin iç-içəliyini əks etdirir.

Tərif və məqsəd

Android-də hər bir ekran ViewGroup (konteynerlər) və View (vidjetlər) dən qurulur. ViewGroup övlad View-ləri ehtiva edir və onların yerləşməsini idarə edir. Məsələn, LinearLayout elementləri xətt üzrə düzər, ConstraintLayout isə məhdudiyyətlər əsasında. View Hierarchy bu strukturu ağac şəklində vizuallaşdırır: kök — əsas ViewGroup (məsələn, content), yarpaqlar — TextView və ya ImageView kimi son vidjetlər.

View ağacının qurulma prinsipi

Android ekranı çəkərkən View ağacını yuxarıdan aşağı keçir: valideyn ViewGroup övlad elementlərini ölçür və yerləşdirir, sonra hər bir övlad özünü Canvas-da çəkir. Keçid sırası çəkmə Z sırasını müəyyən edir — sonra əlavə edilən elementlər əvvəlkilərin üstündə çəkilir. Bu prinsipi başa düşmək üst-üstə düşən elementlərin və səhv yerləşdirmənin debug edilməsi üçün vacibdir.

<!-- Layout-da View iyerarxiyasının nümunəsi -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/titleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World" />

    <Button
        android:id="@+id/submitBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

</androidx.constraintlayout.widget.ConstraintLayout>

Layout Inspector necə işləyir

Layout Inspector — View Hierarchy ilə iş üçün Android Studio-nun əsas vasitəsidir. İşləyən tətbiqin UI-nin cari vəziyyətinin şəklini çəkir və interaktiv baxış imkanı ilə tam View ağacını göstərir. İstifadə üçün API Level 14 və daha yükək olan cihaz və ya emulator tələb olunur.

UI vəziyyətinin şəkli

İşə salındıqda Layout Inspector tətbiqin prosesinə qoşulur və WindowManager-in cari vəziyyətinin dump-ını tələb edir. Nəticə təkcə View ağacını deyil, həm də elementlərin sərhədləri üst-üstə qoyulmuş ekran görüntüsünü əhatə edir. Bu, hansı View-lərin çəkildiyini və onların harada yerləsdiyini görməyə, vizual təsviri layout kodu ilə müqayisə etməyə imkan verir.

Real vaxt rejimində yenilənmə

Layout Inspector Live Update rejimini dəstəkləyir, burada şəkillər UI vəziyyəti dəyişdikdə avtomatik yenilənir — məsələn, düyməyə basıldıqdan və ya başqa ekrana keçid edildikdən sonra. Bu, xüsusilə animasiyaların və interfeysin dinamik dəyişikliklərinin debug edilməsi zamanı, istifadəçinin hərəkətlərinə cavab olaraq View ağacının necə dəyişdiyini izləmək lazım olduqda faydalıdır.

// View-in runtime-da dinamik əlavə edilməsi nümunəsi
val dynamicView = TextView(this).apply {
    id = View.generateViewId()
    layoutParams = ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT
    )
    text = "Dynamic View"
}
binding.root.addView(dynamicView)

View Hierarchy-in əsas imkanları

Android Studio-da View Hierarchy istifadəçi interfeysinin dərin təhlili üçün funksiyalar dəsti təqdim edir. Vasitə sadəcə ağaca baxmaqdan kənara çıxır və xassələrin yoxlanılması, 3D analiz və komponentlərin filtrasiyası vasitələrini əhatə edir.

Komponent xassələrinə baxış

Ağacda istənilən View seçildikdə Properties paneli açılır: layout_width, layout_height, padding, margin, visibility, elevation, background və tətbiqin temindən bütün fərdi atributlar. Dəyərlər həm piksel, həm də dp ilə göstərilir ki, bu da layout kodu ilə müqayisəni asanlaşdırır.

Təbəqələrin 3D vizuallaşdırılması

Layout Inspector View iyerarxiyasının üölçülü təsvirini təklif edir, burada hər bir komponent müəyyən hündürlükdə (elevation) təbəqə kimi göstərilir. Bu, hansı elementlərin bir-birinin üstünə düşdüyünü və çəkmə zamanı hansı Z sırasının istifadə edildiyini görməyə imkan verir. Rejim xüsusilə CardView, FloatingActionButton və elevation olan digər komponentlərlə işləyərkən faydalıdır.

Komponentlərin filtrasiyası və axtarışı

Çoxlu View olan böyük ekranlar üçün id və mətn üzrə axtarış mövcuddur. Ağacı View növünə görə filtrləmək (məsələn, yalnız TextView göstərmək) və ya konteynerləri gizlədib yalnız son elementləri buraxmaq olar. Filtrləmə çoxqat iç-içəliyi olan mürəkkəb layout fayllarında naviqasiyanı sürətləndirir. RecyclerView ilə işlərkən filtrasiya layout parametrlərinin və vəziyyətinin ətraflı təhlili üçün siyahının konkret elementini təcrid etməyə imkan verir.

Resursların və drawable-ların təhlili

View Hierarchy təkcə layout xassələrini deyil, həm də əlaqəli resursları göstərir: background drawable, şəkil mənbəyi, temdən rənglər. View VectorDrawable istifadə edirsə, resursa dəqiq yolu görmək olar. Bu, drawable-ın səhv göstərilməsi ilə bağlı problemləri tapmağa kömək edir — məsələn, qaranlıq tem açıq rəngli ikon istifadə etdikdə və ya resurs istinadı mövcud olmayan fayla yönəldikdə.

Interfeyslərin debug edilməsi üçün necə istifadə etməli

View Hierarchy ilə UI debug etmək konkret praktiki tapşırıqları həll edir ki, hər bir Android proqramçısı onlarla qarşılaşır. Vasitə təkcə ağacı görməyə deyil, həm də performans və göstərmə problemlərini tapmağa və aradan qaldırmağa imkan verir.

Yerləşdirmə problemlərinin axtarılması

Ekrandakı element gözlənilən yerdə olmadıqda, Layout Inspector açıb onun mLeft və mTop koordinatlarına baxmaq kifayətdir. Çox vaxt problem səhv margin və ya constraint-lərdə olur. Məsələn, TextView mənfi margin və ya ConstraintLayout-da səhv konfiqurasiya edilmiş məhdudiyyətlər səbəbindən ekrandan kənarda qala bilər. View Hierarchy dəqiq mövqeyi və faktiki ölçüləri göstərəcək.

İç-içəlik dərinliyinin optimallaşdırılması

Dərin iç-içə yerləşdirilmiş layout konteynerləri render performansına mənfi təsir göstərir, çünki Android ölçmə və yerləşdirmə mərhələlərinə daha çox vaxt sərf edir. View Hierarchy hər bir elementin iç-içəlik səviyyəsini göstərir. Tövsiyə olunan dərinlik 10 səviyyədən çox olmamalıdır, 15 səviyyədən yuxarı isə ConstraintLayout və ya Merge istifadə edərək yenidən qurulması tələb olunan ciddi problem hesab olunur.

Həddindən artıq təkrar çəkmələrin aşkarlanması

Xassələr panelində hər bir View üçün faktiki ölçmə və yerləşdirmə keçid sayını görmək olar. Həddindən artıq təkrar çəkmələr layoutun səmərəsiz strukturunu göstərir. GPU Overdraw debug vasitələri View Hierarchy ilə birlikdə tam mənzərəni verir: hansı View-lərin ehtiyacsız yerə digərlərinin üstündə çəkildiyini. GPU Overdraw analizi Layout Inspector məlumatları ilə birlikdə bütün ekranda səmərəsiz çəkmənin tam mənzərəsini verir.

// Merge ilə dərinliyin optimallaşdırılması
// İç-içə LinearLayout-lar əvəzinə Merge istifadə edin
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Optimallaşdırılmış məzmun" />
</merge>

Android Studio-da View Hierarchy: addım-addım iş

View Hierarchy-dən səmərəli istifadə etmək üçün vasitəni necə işə salmağı, ağacda naviqasiyanı və əldə edilmiş məlumatları təhlil və ya hesabat üçün necə ixrac edəcəyini bilmək lazımdır.

Yoxlamanın başladılması

Layout Inspector Android Studio-da Tools → Layout Inspector menyusundan işə salınır. Başlatmadan əvvəl tətbiq qoşulmuş cihazda və ya emulatorda işləməlidir. Proses seçildikdən sonra üç paneli olan pəncərə açılır: ekran görüntüsü, View ağacı və seçilmiş komponentin xassələr paneli. API 29 və daha yükək olan emulator üçün Live Update rejimi mövcuddur.

Ağacda naviqasiya

View ağacı sol paneldə iyerarxik siyahı şəklində göstərilir. Konteynerləri genişləndirmək və yığmaq, həmçinin birbaşa ekran görüntüsünə klik etmək olar — müvafiq komponent avtomatik olaraq ağacda seçilir. Bu iki istiqamətli sinxronizasiyadır: ağacda seçim ekran görüntüsündə elementi vurğulayır və əksinə. Sürətli axtarış üçün Filter sahəsindən istifadə edin.

Məlumatların ixracı

Yoxlama nəticələri sonrakı baxış və ya həmkarlara ötürmək üçün .li formatında (Layout Inspector faylı) saxlanıla bilər. Faylda View ağacı, ekran görüntüsü və bütün komponent xassələri haqqında tam məlumat var. İxrac üçün Layout Inspector alətlər panelində Export düyməsini istifadə edin. İxrac edilmiş məlumatları UI problemlərinin birgə təhlili üçün Android Studio olan başqa kompüterdə açmaq olar.