Layouts va widgets ierarxiyasi sifatida qurilgan. Layoutlar


Download 0.94 Mb.
Sana25.04.2023
Hajmi0.94 Mb.
#1398762
Bog'liq
4-Tajriba ishi


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

Download 0.94 Mb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling