Guruh: 653-21 Nazariy qism: Layout turlari va ular haqida qisqa ma’lumot




Download 493,26 Kb.
bet1/4
Sana15.05.2024
Hajmi493,26 Kb.
#236557
  1   2   3   4
Bog'liq
Mobil ilovalar2


2-topshiriq
FIO Orifjanov Xojimirzo Shohobjon o’g’li
GURUH:653-21
Nazariy qism: Layout turlari va ular haqida qisqa ma’lumot.
Mobil ilovalarni ishlab chiqishda maket foydalanuvchi interfeysi (UI) elementlarining ekranda qanday ko'rinishini aniqlaydi. Bu muammosiz va foydalanuvchilarga qulay tajribani ta'minlashda hal qiluvchi rol o'ynaydi. Turli xil platformalar va framelar har xil UI layoutga solish ehtiyojlarini qondirish uchun mo'ljallangan turli xil layout turlarini taklif etadi. Bu erda mashhur mobil dasturlash muhitida topilgan ba'zi keng tarqalgan layout turlari haqida umumiy ma'lumot:
1. Linear Layout

  • Tavsif: elementlar vertikal yoki gorizontal ravishda bitta yo'nalishda joylashtirilgan. Bu har bir element bir-biriga ergashadigan ro'yxatga o'xshaydi.

  • Platformalar / ramkalar: Android (XML yoki Jetpack yaratmoq yordamida), iOS (UIKit uistackvyu yordamida), Xamarin, va hokazo (Flexbox yordamida) Native React

2. Constraint Layout

  • Tavsif: UI elementlarining nisbiy joylashuvi va o'lchamlari bilan yanada murakkab sxemalarga imkon beradi. Elementlar o'z pozitsiyalarini aka-uka elementlariga yoki ota-ona layoutiga cheklovlar asosida belgilashlari mumkin.

  • Platformalar / ramkalar: asosan Android rivojlanishida ishlatiladi. Shunga o'xshash funksiyalarga iOS-da avtomatik layout bilan erishish mumkin.

3. Relative Layout

  • Tavsif: UI elementlari bir-biriga yoki asosiy konteynerga nisbatan joylashtirilgan. Bu turli xil ekran o'lchamlariga mos keladigan UI yaratish uchun foydalidir.

  • Platformalar/ ramkalar: Android (garchi cheklov layouti ko'pincha uning moslashuvchanligi va ishlashi uchun afzal ko'riladi).

4. Frame Layout

  • Tavsif: bitta elementni ko'rsatish uchun ekrandagi maydonni blokirovka qilish uchun mo'ljallangan. Siz bir nechta elementlarni to'plashingiz mumkin va ular qoziqda ko'rsatiladi, ustiga eng so'nggi qo'shimchalar qo'shiladi.

  • Platformalar/ ramkalar: Android, boshqa platformalar o'xshash tushunchalarga ega bo'lsa-da (masalan, iOS-da ko'rish).

5. Grid Layout

  • Tavsif: elementlar qatorlar va ustunlar bilan panjara shaklida joylashtirilgan. Bu galereyadagi rasmlar kabi narsalarni tizimli ravishda namoyish qilish uchun foydalidir.

  • Platformalar/ ramkalar: Android, iOS (UIKit Uicollectionvyu), Xamarin, qoqish, va hokazo

6. Flexbox Layout

  • Tavsif: UI dizaynlari uchun optimallashtirilgan layout modeli. Bu mavjud maydonga qarab o'lchamlari va holatini sozlashi mumkin bo'lgan sezgir elementlarga imkon beradi. Bu, ayniqsa, turli xil ekran o'lchamlari va tomonlar nisbati uchun foydalidir.

  • Platformalar/ ramkalar: React Native, veb-ishlab chiqish (CSS Flexbox) va mahalliy Android va iOS uchun kutubxona sifatida mavjud.

7. Stack Layout

  • Tavsif: chiziqli layoutga o'xshash, lekin Xamaringa xos.Shakllari. Yo'nalish xususiyati asosida elementlarni gorizontal yoki vertikal ravishda bitta qatorga joylashtiradi.

  • Platformalar / Ramkalar: Xamarin.Shakllari.

8. Flutter Layout

  • Vidjetlar: Flutterda hamma narsa vidjet, shu jumladan layout modellari.

Ba'zi umumiy layout vidjetlariga quyidagilar kiradi:

  • Satr / ustun: chiziqli gorizontal yoki vertikal layoutlar uchun.

  • Stack: nizomiga muvofiq vidjet uchun.

  • Panjara: panjara maketlari uchun.

  • ConstraintsBox, Padding, SizedBox: o'lcham va oraliqni aniqlash uchun.

Har bir layout turi o'zining afzalliklariga ega va turli UI talablariga mos keladi. To'g'ri layoutni tanlash turli xil qurilmalar va ekran o'lchamlarini o'lchaydigan samarali foydalanuvchi interfeysini yaratish uchun juda muhimdir.

Amaliy qism:



Xulosa:
Men Orifjanov Xojimirzo darsimizning ushbu qismigacha bo’lgan
oralig’ida hozirgi kabi dasturlarning strukturasi va qanday yozilishini o’rganishga muvaffaq bo’ldim hamda ushbu nazariy bilimlardan olgan tushunchalarimni amaliyotda ham qo’llashga erishdim.

Dastur kodi: activity_main.xml:


android:layout_width="match_parent" android:layout_height="match_parent" android:background="#3B6CFF" tools:context=".MainActivity">

android:id="@+id/computerImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/img_1" android:layout_centerHorizontal="true" android:layout_marginTop="20dp"/>

android:id="@+id/welcomeText" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Muhammad Ali"
android:layout_centerHorizontal="true" android:layout_below="@id/computerImage" android:layout_marginTop="50dp"
android:textColor="#000000" />

Download 493,26 Kb.
  1   2   3   4




Download 493,26 Kb.

Bosh sahifa
Aloqalar

    Bosh sahifa



Guruh: 653-21 Nazariy qism: Layout turlari va ular haqida qisqa ma’lumot

Download 493,26 Kb.