|
Layouts va widgets ierarxiyasi sifatida qurilgan. Layoutlar
|
| Sana | 21.05.2024 | | Hajmi | 0,94 Mb. | | #247505 |
Bog'liq 4-Tajriba ishi (1)
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.
Advertising app (reklama joylashtirish uchun dastur)
Creating authentification user interface (Refistratsiya forma yaratish)
Baby foods app
Happy Ramadan app
Shoir ijodiga bagishlangan ilova
Dasturlashni o’rgatuvchi ilova
Cooking app
Ingliz tili notog’ri fellar jadvali
Mashxur shaxs faoliyatiga bag’ishlangan ilova
Trigonometrik formulalarni o’rgatuvchi ilova
Harakatlar strategiyasi
Kredit modul tizimi haqida
Kompyuter modellari haqida ma’lumot beruvchi ilova
Telefon modellari haqida ma’lumot beruvchi ilova
Ums tarif-rejalari
Books
Bolalar uchun hikoyalar
Online shop
Medical app
Dars jadvali
Calendar
Shopping app
|
| |
