Layout Editor: bu nədir, Android Studio və layoutların yaradılması

Layout Editor nədir?

Layout Editor — Android Studio-ya daxil edilmiş, Android tətbiqlərinin istifadəçi interfeyslərini vizual layihələndirmək üçün alətdir. O, res/layout/ qovluğunda XML layout faylını iki dəfə kliklədikdə açılır və Code, Design və Split vərəqləri arasında keçid üçün aşağı panel vasitəsilə əlçatandır. Tərtibatçı komponentləri palitradan tuvale sürükləyə bilər, onların xüsusiyyətlərini konfiqurasiya edə və dəyişiklikləri real vaxtda müşahidə edə bilər.

Alət iki rejimi dəstəkləyir: Design (vidjetlərin real göstərilməsi ilə vizual tuval) və Blueprint (constraintlər və sərhədlərlə sxematik təsvir). Split rejimi eyni vaxtda XML kodu və vizual tuvall göstərir. Onlar arasında keçid redaktorun yuxarı sol küncündəki düymələrlə həyata keçirilir.

Layout Editor hər bir istifadəçi hərəkəti üçün avtomatik olaraq XML kodu yaradır: elementin əlavə edilməsi, marginlərin konfiqurasiyası, constraintin yaradılması. Bu, tərtibatçıya onlarla XML atributunu yadda saxlamamağa və vizual nəticəyə diqqət yetirməyə imkan verir. Yaradılan kodu həmişə Code vərəqində əl ilə redaktə etmək olar.

Layout Editor-in əsas zonaları

Layout Editor interfeysi dörd zonaya bölünür: Palette (komponent palitrası), Component Tree (komponent ağacı), Design Surface (layihələndirmə tuvall) və Properties Panel (xüsusiyyətlər paneli). Palette kateqoriyalar üzrə qruplaşdırılmış bütün mövcud Android SDK vidjetlərini ehtiva edir: Widgets, Text, Buttons, Containers və s. Component Tree layout iyerarxiyasını ağac şəklində göstərir, elementləri konteynerlər arasında sürükləməyə imkan verir.

Design Surface — layoutun göstərildiyi redaktorun mərkəzi hissəsidir. Tuvallə elementləri seçmək, onları hərəkət etdirmək, ölçülərini dəyişmək və constraintlər yaratmaq olar. Tuvallin aşağı hissəsində layoutu müxtəlif ekranlarda ön izləmək üçün cihaz və oriyentasiya keçidi mövcuddur. Layout Editor çoxsaylı virtual Nexus, Pixel və Samsung cihazlarında ön izləməni dəstəkləyir.

Properties Panel seçilmiş elementin atributlarını göstərir: layout_width, layout_height, marginlər, padding, qravitasiya və TextView üçün textSize kimi bütün spesifik atributlar. Properties Panel-də hər dəyişiklik dərhal tuvallə əks olunur və müvafiq XML kodu yaradır.

Redaktorun yuxarı sol küncündə idarəetmə düymələri yerləşir: göstərmə rejiminin seçimi, constraintlərin avtomatik qoşulması (Autoconnect), constraintlərin xətlər şəklində göstərilməsi və virtual cihazlar arasında keçid. «Device for Preview» düyməsi adaptivliyi yoxlamaq üçün smartfon, planşet və ya Android TV modelini seçməyə imkan verir.

ConstraintLayout: çevik yerləşdirmə

ConstraintLayout — Google tərəfindən bütün yeni Android layihələri üçün tövsiyə olunan əsas layoutdur. İç-içə LinearLayout-lardan fərqli olaraq, ConstraintLayout hər bir elementin valideynə, digər elementlərə və ya istiqamətləndirici xətlərə (guidelines) bağlandığı düz iyerarxiya yaradır. Bu, iç-içəlik dərinliyini azaldır və renderləmə performansını artırır.

ConstraintLayout-da hər bir elementin yan constraintləri var: app:layout_constraintStart_toStartOf, app:layout_constraintEnd_toEndOf, app:layout_constraintTop_toTopOf, app:layout_constraintBottom_toBottomOf. Constraintlər valideynə (parent) və ya başqa elementin ID-sinə bağlana bilər. Əsas XML şablonu belə görünür:

Bu nümunədə TextView valideynin bütün dörd tərəfinə nisbətən mərkəzləşdirilmişdir. 0dp (match_constraint) ölçüsü enin sol constraintdən sağ constraintə qədər uzandığını bildirir. Bu yanaşma sabit ölçülər olmadan adaptiv layoutlar yaratmağa imkan verir.

ConstraintLayout həmçinin Bias — elementin mərkəzinin yerdəyişməsini dəstəkləyir. layout_constraintHorizontal_bias və layout_constraintVertical_bias atributları 0-dan 1-ə qədər dəyərlər qəbul edir, burada 0.5 mərkəz, 0 başlanğıca sıxışdırma, 1 sona sıxışdırmadır. Bias iki constraint arasında elementi dəqiq yerləşdirməyə imkan verir.

ConstraintLayout-un əlavə imkanları: Guidelines (faiz və ya dp ilə istiqamətləndirici xətlər), Barriers (bir neçə elementi birləşdirən maneələr) və Chains (yer bölgüsü ilə element zəncirləri). Bütün bu elementlar birbaşa Layout Editor-də tuvallə kontekst menyusu vasitəsilə yaradılır.

LinearLayout: xətti yerləşdirmə

LinearLayout — uşaq elementlərini ardıcıl olaraq üfüqi (android:orientation="horizontal") və ya şaquli (android:orientation="vertical") yerləşdirən konteynerdir. Bu, başa düşmək üçün ən sadə layoutdur, lakin mürəkkəb layoutlarda iç-içə iyerarxiya yaradır ki, bu da performansı aşağı sala bilər.

LinearLayout-un əsas atributu weight (android:layout_weight)-dir. O, boş yeri elementlər arasında göstərilən dəyərlərə proporsional olaraq bölüşdürməyə imkan verir. İki düyməyə weight="1" təyin etsəniz, onlar bərabər eni tutacaq. weight="2" olan element weight="1" olan elementdən iki dəfə çox yer alacaq. LinearLayout ilə XML nümunəsi:

Bu nümunədə EditText layout_weight="1" alır və labelName ilə btnSubmit arasında bütün boş yeri tutur. layout_width="0dp" EditText-in eninin tamamilə weight ilə təyin olunduğunu göstərir. Weight olmadan sabit en təyin etməli olardıq, bu da müxtəlif ekranlara uyğunlaşmır.

LinearLayout-un vacib xüsusiyyətləri: android:gravity konteynerin daxilində məzmunun düzləşdirilməsini idarə edir, android:layout_gravity isə konteynerin özünün valideyn daxilində düzləşdirilməsini idarə edir. İç-içə LinearLayout-lar dərin iç-içəliyin ümumi səbəbidir, buna görə Google bu cür konstruksiyaları ConstraintLayout ilə əvəz etməyi tövsiyə edir.

XML kodu: layoutun daxili strukturu

Hər bir Android layoutu res/layout/ qovluğunda XML faylıdır. Layout Editor bu faylı avtomatik yaradır, lakin onun strukturunu başa düşmək əl ilə optimallaşdırma üçün vacibdir. Kök element konteynerin növünü təyin edir (ConstraintLayout, LinearLayout, FrameLayout), onun daxilində uşaq vidjetlər yerləşir.

ConstraintLayout ilə əsas XML şablonu xmlns:android və xmlns:app ad fəzalarının bəyannaməsini ehtiva edir. App ad fəzası ConstraintLayout kitabxanasının atributları üçün istifadə olunur, məsələn layout_constraintStart_toStartOf. Hər bir elementə digər elementlərdən və Activity və ya Fragment kodundan istinadlar üçün android:id təyin etmək tövsiyə olunur.

Bir neçə element və constraint ilə layout fraqmentinin nümunəsi:

Bu layoutda ImageView valideynin yuxarısına bağlanmış və üfüqi olaraq mərkəzləşdirilmişdir. TextView ImageView-in aşağı sərhədinə bağlanmışdır (Top_toBottomOf). Button TextView-in altında yerləşir. Bu constraint zənciri iç-içə LinearLayout-lar olmadan ardıcıl struktur yaradır.

Layout Editor Design / Code / Split vərəqləri vasitəsilə vizual və mətn təsviri arasında keçid etməyə imkan verir. Split rejimində XML-də dəyişikliklər dərhal tuvallə əks olunur və əksinə. Bu, xüsusilə tuvallə vizual nəzarəti olmayan atributların incə tənzimlənməsi zamanı əlverişlidir.

Komponent palitrası və Properties Panel

Palette — Layout Editor-in sol paneli olub, bütün mövcud UI komponentlərini ehtiva edir: TextView, Button, ImageView, EditText, ProgressBar, RecyclerView və s. Komponentlər kateqoriyalar üzrə qruplaşdırılıb: Widgets, Text, Buttons, Containers, Transitions, Advanced. Komponenti tuvallə əlavə etmək üçün onu palitradan Design Surface-ə sürükləmək kifayətdir.

Properties Panel (sağ panel) seçilmiş elementin bütün atributlarını göstərir. Panel bölmələrə bölünüb: Id (identifikator), Layout (ölçülər və marginlər), Transform (fırlanma və miqyas), Text (TextView məzmunu), Padding and Margin. Hər bir atribut üçün variantları olan açılan menyu mövcuddur: wrap_content, match_parent, match_constraint (0dp).

Properties Panel-in xüsusiyyəti — vizual boşluq redaktoru (padding və margin) qrafik göstərilmə ilə. Müvafiq oxun yanındakı rəqəmi klikləməklə, sürgü vasitəsilə boşluğu dəyişmək olar. Layout Editor boşluqları avtomatik normallaşdırır: bütün dörd boşluq eynidirsə, android:layout_margin atributu istifadə olunur, əks halda — fərdi android:layout_marginStart, android:layout_marginTop və s.

Constraint atributlarını redaktə etmək üçün Properties Panel-də xüsusi Constraints bölməsi var. Burada elementin bütün bağlantıları göstərilir: hər bir kənarın valideynin və ya başqa elementin hansı tərəfinə bağlandığı. Bağlantı növünü dəyişmək, constraint əlavə etmək və ya silmək olar. Constrainti Blueprint rejimində tuvallə müvafiq xətti klikləməklə də silmək olar.

Adaptiv layoutların yaradılması

Adaptiv layout — müxtəlif ekran ölçülərində düzgün göstərilən layoutdur: yığcam telefonlardan (320dp) böyük planşetlərə (600dp+) və qatlanan cihazlara qədər. Layout Editor adaptiv interfeysləri yoxlamaq və yaratmaq üçün bir neçə alət təqdim edir.

Birinci alət — alətlər panelində Device for Preview. Açılan siyahı məşhur cihazları ehtiva edir: Pixel 6, Pixel 9, Samsung Galaxy S25, Nexus 7, Nexus 9, Pixel C və s. İxtiyari ekran ölçüləri və piksel sıxlığı (dpi) olan fərdi cihaz əlavə etmək olar. Cihazlar arasında keçid bir saniyə çəkir və layoutun hər ekranda necə göründüyünü göstərir.

İkinci alət — alternativ layoutlar yaratmaq üçün ölçü kvalifikatorları (qualifiers). Layout Editor-də eyni XML faylının müxtəlif ekran ölçüləri, oriyentasiya və ya sıxlıq üçün bir neçə versiyasını yaratmaq olar. Məsələn, telefon üçün activity_main.xml faylı və planşet üçün activity_main-sw600dp.xml. Layout Editor aktiv kvalifikator üçün avtomatik ön izləmə göstərir.

Üçüncü yanaşma — faizlə Guidelines ilə ConstraintLayout. app:layout_constraintGuide_percent atributu olan istiqamətləndirici xətlər elementləri faiz mövqelərinə bağlamağa imkan verir. Məsələn, 50% guideline cihaz ölçüsündən asılı olmayaraq ekranı yarıya bölür. Bu, XML fayllarını təkrarlamadan adaptiv layoutlar yaratmağın ən çevik üsuludur.

Layout Editor həmçinin adaptivlik problemləri haqqında xəbərdarlıqlar göstərir: sabit eni olan elementlərdə, çox böyük şəkillərdə və ya qeyri-optimal iç-içəlikdə sarı üçbucaqlar. Tərtibatçı xəbərdarlığı klikləyərək düzəliş tövsiyəsi ala bilər.

XML layoutlarının optimallaşdırılması

Layoutların optimallaşdırılması birbaşa renderləmə sürətinə və tətbiqin hamar işinə təsir edir. Layout Editor daxili Layout Inspector və Problems panelində xəbərdarlıqlar vasitəsilə problemləri aşkarlamağa kömək edir. Əsas optimallaşdırma qaydaları: iç-içəliyi minimuma endirmək, iç-içə LinearLayout-ların yerinə ConstraintLayout istifadə etmək, ölçü atributlarını düzgün seçmək.

İç-içəlik dərinliyi — performansın əsas düşmənidir. Hər bir iç-içə konteyner ölçmə və çəkmə vaxtını artırır. Android Studio-da Hierarchy View aləti layout ağacını göstərir. Dərinlik 5–6 səviyyəni keçərsə, layout yenidən qurulmalıdır. ConstraintLayout bu problemi 3–4 iç-içəlik səviyyəsini bir düz konteynerlə əvəz edərək həll edir.

Layout Editor-də XML layoutlarının optimallaşdırılması üçün tövsiyələr:

• ConstraintLayout-dan iç-içə LinearLayout-ların yerinə kök konteyner kimi istifadə edin — bu iyerarxiya dərinliyini azaldır və renderləməni sürətləndirir
• Böyük siyahılarda LinearLayout-da layout_weight-dən çəkinin — weight ikiqat ölçmə keçidi (two-pass layout) tələb edir
• İstifadə olunmayan constraintləri silin Layout Editor-də Clear Constraints of Selection kontekst menyusu vasitəsilə
• Nadir göstərilən bloklar üçün ViewStub istifadə edin — ViewStub inflyasiyanı görünmə anına qədər təxirə salır
• Təkrar istifadə olunan komponentlər üçün Merge — merge teqi include vasitəsilə əlavə edərkən artıq konteyneri aradan qaldırır
• Şəkillərin ölçüsünü azaldın və ikonlar üçün PNG əvəzinə VectorDrawable istifadə edin

Layout Inspector — tətbiqin icrası zamanı layoutları profilləşdirmək üçün Android Studio alətidir. O, real iyerarxiyanı, hər bir komponentin ölçmə və çəkmə vaxtını göstərir. Layout Editor Layout Inspector ilə inteqrasiya olunub: xəbərdarlığın üzərinə iki dəfə klikləmək müvafiq problemi ətraflı hesabatda açır.