Layouts va widgets ierarxiyasi sifatida qurilgan. Layoutlar

7-Tajriba ishi
Android studioda komponentalar va layoutlar bilan ishlash
Ushbu darsda Android Studio Layout Editor-dan layout yaratish uchun qanday foydalanishni o'rganamiz.
Android ilovasi uchun foydalanuvchi interfeysi (UI) layouts va widgets ierarxiyasi sifatida qurilgan. 
Layoutlar - bu ViewGroup obyektlari, ularning bola(child) views-i ekranda qanday joylashishini boshqaruvchi konteynerlar. Vidjetlar(Widgets) - bu View ob'ektlari, tugma va matn kabi foydalanuvchi interfeysi komponentlari.
LinearLayout-View elementlarini bitta satr (Agar u Horizontal bo'lsa) yoki bitta ustun (Agar u vertikal bo'lsa) sifatida namoyish etadi.
TableLayout-elementlarni jadval shaklida, qatorlar va ustunlar bo'yicha ko'rsatadi.
RelativeLayout - har bir element uchun uning pozitsiyasi boshqa elementlarga nisbatan o'rnatiladi.
FrameLayout-har bir element uchun tortishish kuchini ko'rsatish kerak.
Android ViewGroup va View sinflari uchun XML - ni taqdim etadi, shuning uchun sizning interfeysingizning ko'p qismi XML fayllarida aniqlanadi. Ammo, sizga XML yozishni o'rgatish o'rniga, ushbu va keyingi darslarda sizga Android Studio-ning Layout Editor-dan foydalanib maket(layout) yaratishni ko'rsataman. O'zingizning maket(layout)ingizni yaratish uchun ko'rinishlarni sudrab tashlaganingizda Layout Editor tahrirlovchisi sizga XML kodini o'zi o'zgartiradi.

Layout Editor-ni ochish.

Quyidagilarni ketma-ket bajaring:
1) Project oynasida app > res > layout > activity_main.xml - ni oching.

2) Layout Editor-ga joy ajratish uchun Project oynasini yashiring. Buning uchun View > Tool Windows > Project -ni tanlang yoki shunchaki Android Studio ekranining chap qismidagi Project tugmasini bosing.

Project-ni bosing

3) Design yorlig'ini bosing.


4) Select Design Surface - ni bosing va Blueprint - ni tanlang.


Select Design Surface - ni bosing va Blueprint - ni tanlang.

5) Layout Editor-ning asboblar panelidagi Show - ni bosing va Show All Constraints belgilanganligiga ishonch hosil qiling.

6) Autoconnect o'chirilganligiga ishonch hosil qiling. Autoconnect o'chirilgan bo'lsa, quyidagicha bo'ladi:

Autoconnect o'chirilgan. Uni yoqib qo'ymang

7) Asboblar panelidagi Default Margins tugmachasini bosing va 16-ni tanlang. Agar kerak bo'lsa, keyinchalik har bir ko'rinish uchun chegaralarni sozlashingiz mumkin.

16-ni yozib Enter-ni bosing
8) Asboblar panelidagi Device for Preview - ni bosing va 5.5, 1440 × 2560, 560 dpi (Pixel XL) - ni tanlang.


Agar xohlasangiz boshqa qurilmani tanlang
Sizning Layout Editor-ingiz endi quyidagidek ko'rinadi:

Pastki chap tomondagi Component Tree paneli ko'rinishlarning ierarxiyasini ko'rsatadi. Bizni holatda, ildiz ko'rinishi ConstraintLayout bo'lib, u faqat bitta TextView ob'ektini o'z ichiga oladi.

Component Tree-ni bosing



Topshiriqlar:
Har bir talaba oziga biriktirilgan mavzu bo’yicha komponentalardan foydalanib, dastur dizaynini yasaydi.

1. 
   Advertising app (reklama joylashtirish uchun dastur)
   
2. 
   Baby foods app
   
3. 
   Shoir ijodiga bagishlangan ilova
   
4. 
   Dasturlashni o’rgatuvchi ilova
   
5. 
   Ingliz tili notog’ri fellar jadvali
   
6. 
   Trigonometrik formulalarni o’rgatuvchi ilova
   
7. 
   Kredit modul tizimi haqida
   
8. 
   Kompyuter modellari haqida ma’lumot beruvchi ilova
   
9. 
   Telefon modellari haqida ma’lumot beruvchi ilova
   
10. 
    Books
    
11. 
    Online shop
    
12. 
    Dars jadvali
    
13. 
    Calendar