Layouts va widgets ierarxiyasi sifatida qurilgan. Layoutlar

4-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. 
   Creating authentification user interface (Refistratsiya forma yaratish)
   
3. 
   Baby foods app
   
4. 
   Happy Ramadan app
   
5. 
   Shoir ijodiga bagishlangan ilova
   
6. 
   Dasturlashni o’rgatuvchi ilova
   
7. 
   Cooking app
   
8. 
   Ingliz tili notog’ri fellar jadvali
   
9. 
   Mashxur shaxs faoliyatiga bag’ishlangan ilova
   
10. 
    Trigonometrik formulalarni o’rgatuvchi ilova
    
11. 
    Harakatlar strategiyasi
    
12. 
    Kredit modul tizimi haqida
    
13. 
    Kompyuter modellari haqida ma’lumot beruvchi ilova
    
14. 
    Telefon modellari haqida ma’lumot beruvchi ilova
    
15. 
    Ums tarif-rejalari
    
16. 
    Books
    
17. 
    Bolalar uchun hikoyalar
    
18. 
    Online shop
    
19. 
    Medical app
    
20. 
    Dars jadvali
    
21. 
    Calendar
    
22. 
    Shopping app