logo
  1. Bosh sahifa
  2. Slaydlar
  3. Informatika va AT
  4. Flutter Android Studioda asosiy komponentalar bilan ishlash Layout, Table ListView Grid List va boshqalar

Flutter Android Studioda asosiy komponentalar bilan ishlash Layout, Table ListView Grid List va boshqalar

Yuklangan vaqt:

04.08.2023

Ko'chirishlar soni:

0

Hajmi:

1915.515625 KB
Ko'chirib olish
Flutter: Android Studioda asosiy komponentalar bilan ishlash: Layout, Table, ListView, Grid, List va boshqalar Reja: 1. Flutter: Android Studioda asosiy komponentalar bilan ishlash 2. Layout, Table, ListView, Grid, List lar haqida umumiy ma’lumot Palette • Palette panelida foydalanuvchi interfeysi komponentlari mavjud: View, Layouts, ViewGroup. LinearLayout • Layout da  ikkita variant  mavjud: Horizontal  va  Vertical .  • LinearLayout tartibi barcha q ob&#39;ektlar bir yo&#39;nalishda — vertikal yoki gorizontal ravishda moslashtiradi.  • Yo&#39;nalish  Android yo&#39;nalishi xususiyati bilan belgilanadi: orientation : • android:orientation=&#34;horizontal&#34; • android:orientation=&#34;vertical&#34; Misol • <?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?> • <LinearLayout xmlns:android=&#34;http://schemas.android.com/apk/res/android&#34; • android:layout_width=&#34;match_parent&#34; • android:layout_height=&#34;match_parent&#34; • android:orientation=&#34;vertical&#34;> •   <LinearLayout • android:layout_width=&#34;match_parent&#34; • android:layout_height=&#34;match_parent&#34; • android:layout_weight=&#34;1&#34; • android:orientation=&#34;horizontal&#34;> •   <TextView • android:layout_width=&#34;wrap_content&#34; • android:layout_height=&#34;fill_parent&#34; • android:layout_weight=&#34;1&#34; • android:background=&#34;#aa0000&#34; • android:gravity=&#34;center_horizontal&#34; • android:text=&#34;red&#34;/> •   <TextView • android:layout_width=&#34;wrap_content&#34; • android:layout_height=&#34;match_parent&#34; • android:layout_weight=&#34;1&#34; • android:background=&#34;#00aa00&#34; • android:gravity=&#34;center_horizontal&#34; • android:text=&#34;green&#34;/> •   <TextView • android:layout_width=&#34;wrap_content&#34; • android:layout_height=&#34;match_parent&#34; • android:layout_weight=&#34;1&#34; • android:background=&#34;#0000aa&#34; • android:gravity=&#34;center_horizontal&#34; • android:text=&#34;blue&#34;/> •   <TextView • android:layout_width=&#34;wrap_content&#34; • android:layout_height=&#34;match_parent&#34; • android:layout_weight=&#34;1&#34; • android:background=&#34;#aaaa00&#34; • android:gravity=&#34;center_horizontal&#34; • android:text=&#34;yellow&#34;/> • </LinearLayout> •      <LinearLayout  android:layout_width=&#34;match_parent&#34;  android:layout_height=&#34;fill_parent&#34;  android:layout_weight=&#34;1&#34;  android:orientation=&#34;vertical&#34;>    <TextView  android:layout_width=&#34;match_parent&#34;  android:layout_height=&#34;wrap_content&#34;  android:layout_weight=&#34;1&#34;  android:text=&#34;row one&#34;  android:textSize=&#34;15dp&#34;/>    <TextView  android:layout_width=&#34;match_parent&#34;  android:layout_height=&#34;wrap_content&#34;  android:layout_weight=&#34;1&#34;  android:text=&#34;row two&#34;  android:textSize=&#34;15dp&#34;/>    <TextView  android:layout_width=&#34;match_parent&#34;  android:layout_height=&#34;wrap_content&#34;  android:layout_weight=&#34;1&#34;  android:text=&#34;row three&#34;  android:textSize=&#34;15dp&#34;/>    <TextView  android:layout_width=&#34;match_parent&#34;  android:layout_height=&#34;wrap_content&#34;  android:layout_weight=&#34;1&#34;  android:text=&#34;row four&#34;  android:textSize=&#34;15dp&#34;/>  </LinearLayout>     </LinearLayout>    Natija: • Ushbu misolda  TextView elementlarini gorizontal va vertikal ravishda joylashtirishning ikkita usuli qo&#39;llaniladi . • LinearLayout markirovkasi  android- ning qiziqarli xususiyatiga ega : layout_weight , bu ichki elementining egallaydigan joyini bildiradi. Ushbu xususiyat taqdimotning &#34;ahamiyati&#34; ni belgilaydi va bu elementni qolgan bo&#39;sh joyni to&#39;ldirish uchun kengaytirishga imkon beradi. Standart holda 0 ga teng bo’ladi. • Misol uchun, agar uchta matn maydoni mavjud bo&#39;lsa va ularning ikkitasi 1 qiymatida bo’lsa, ikkinchisiga hech qanday qiymat (0) berilmagan bo&#39;lsa, u holda uchinchi matn maydoni kengaytirilmaydi va bu maydon tomonidan ko&#39;rsatilgan matn hajmi bilan belgilanadigan maydonni egallaydi. Boshqa ikkitasi uchinchi maydon bilan band bo&#39;lmagan bo&#39;sh joyni to&#39;ldirish uchun bir xil darajada kengayadi. Agar uchinchi maydon 2 (0 o&#39;rniga) hajmda belgilansa, bu maydon boshqa ikki kishiga qaraganda &#34;muhimroq&#34; deb e&#39;lon qilinadi, shuning uchun uchinchi maydon umumiy maydonning 50 foizini oladi, dastlabki ikkitasi umumiy maydonning 25 foizini oladi • Bundan tashqari, Android xususiyatini ham belgilashingiz mumkin : weightSum . Agar atribut 100 qiymatini belgilasa, unda biz ichki matnlarning oladigan joy hajmini foiz sifatida qulay shaklda ko’rsatishimiz mumkin. Ushbu usul veb-ustalar tomonidan keng qo&#39;llaniladi. Misol <?xml version=&#34;1.0&#34; encoding=&#34;UTF-8&#34;?><LinearLayout xmlns:android=&#34;http://schemas.android.com/apk/res/android&#34; android:layout_width=&#34;match_parent&#34; android:layout_height=&#34;match_parent&#34; android:background=&#34;#0000FF&#34; android:orientation=&#34;vertical&#34; android:weightSum=&#34;100&#34;> <LinearLayout android:layout_width=&#34;fill_parent&#34; android:layout_height=&#34;0dp&#34; android:layout_weight=&#34;50&#34; android:background=&#34;#FFFF00&#34; android:gravity=&#34;center&#34;> <TextView android:layout_width=&#34;wrap_content&#34; android:layout_height=&#34;wrap_content&#34; android:layout_margin=&#34;10dp&#34; android:gravity=&#34;center&#34; android:text=“Hello word&#34; android:textColor=&#34;#000000&#34; android:textSize=&#34;20sp&#34; android:textStyle=&#34;bold&#34;/> </LinearLayout></LinearLayout> Natija TabLayout/TabItem • TableLayout, masalan, Sudoku, Tic-toe va boshqalar kabi mantiqiy o&#39;yinlar yaratishda foydalanish uchun qulay. • TableLayout uchun ba&#39;zi qoidalar mavjud. Birinchidan, har bir ustunning kengligi ustundagi eng keng tarkib bilan belgilanadi. Ichki elementlari atributlarda  match_parent qiymatini ishlatadi . Layout_height uchun  TableRow xususiyati  har doim  wrap_content .  •   Agar  Android xususiyati: &#34; * &#34; qiymatini belgilash uchun TableLayout komponentining stretchColumns bo&#39;lsa, har bir TableRow komponentining tarkibi tartibning to&#39;liq kengligiga cho&#39;zilishi mumkin. Misol Ob-havo prognozi jadvalini yaratish Misol uchun, ob-havo prognozi jadvalini yaratish uchun quyidagi dizayndan foydalanish mumkin: • Birinchi qatorda jadval sarlavhasini ko&#39;rsatish • Ikkinchi qatorda taqvim turiga ko&#39;ra sanalar ko&#39;rsatiladi • Uchinchi qatorda eng yuqori haroratni ko&#39;rsating • To&#39;rtinchi qatorda eng past haroratni ko&#39;rsating • Beshinchi qatorda grafiklarni ko&#39;rsatish (yomg&#39;ir, qor, bulut, quyosh) ListView • Android-ning dastlabki versiyalarida ListView komponenti interfeysning eng mashhur elementlaridan biri bo&#39;ldi. • ListView -elementlarning aylanadigan ro&#39;yxati.  • ListView komponenti  TextView va boshqa oddiy elementlarga nisbatan qo&#39;llaniladi. Ro&#39;yxat bilan ishlash ikki qismdan iborat.  • Birinchidan, biz  ListView formasiga qo&#39;shamiz va keyin uni ro&#39;yxat elementlari bilan to&#39;ldiramiz. • Biroq, agar XML kodini ko&#39;rib chiqsak, u erda hech narsa ko&#39;rilmaydi. <ListView android:id=&#34;@+id/listView“ android:layout_width=&#34;match_parent&#34; android:layout_height=&#34;wrap_content&#34; > </ListView> • Mainactivity oynasiga o’tib quyidagilarni yozamiz • // kod onCreate usulida yozilgan()// ListView elementining namunasini oling • ListView listView = findViewById(R.id.listView); • // string qator aniqlashfinal • String[] cat Names = new String[] • {&#34;Ryjik&#34;, &#34;Barsik&#34;, &#34;Murzik&#34;, &#34;Murka&#34;, &#34;Vaska&#34;,&#34;Thomasina&#34;, &#34;Kristina&#34;,&#34; Qurol&#34;, &#34;Smoke&#34;, &#34;Kuzya&#34;,&#34;Kiti&#34;, &#34;Masyanya&#34;, &#34;Simba&#34;}; • // ma&#39;lumot adapteridan foydalaningArrayAdapter<String> adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_ 1, catNames);listView.setAdapter(adapter); • ListView komponenti to&#39;ldirish uchun ma&#39;lumotlarni talab qiladi. To&#39;ldirish manbai massivlar, ma&#39;lumotlar bazalari bo&#39;lishi mumkin. Ma&#39;lumotni ro&#39;yxatga ulash uchun adapter deb ataladi. • Standart ro&#39;yxat uchun adapter odatda yangi ArrayAdapter(Context context, int textViewResourceId, String[] objects) dizayni yordamida yaratiladi. • context -joriy kontekst • textViewResourceId- har bir satr uchun belgilar bilan resurs identifikatori. Tizim belgilarini Android identifikatori bilan ishlatish mumkin. R.layout.simple_list_item_1 yoki o&#39;z belgilarini yaratish • ob&#39;ektlar -qatorlar • SetAdapter usuli(ListAdapter) tayyorlangan ro&#39;yxatni adapter bilan bog&#39;laydi. GridLayout • Android 4.0-da GridLayout ( Asboblar panelidagi Layouts bo&#39;limi) nomi ostida yangi tartib paydo  bo&#39;ldi. Bir qarashda TableLayout kabi  ko&#39;rinishi mumkin . Lekin, aslida, bu juda ham qulay va funktsionaldir. Va yangi platforma uchun ishlab chiqilgan yangi loyihalarda o&#39;rganish va undan foydalanish tavsiya etiladi. • Android kutubxonasiga Android klassi qo&#39;shildi. support.v7.widget.GridLayout , bu komponentni eski qurilmalar uchun ishlatishga imkon beradi.  •   • Belgilar Android sinfiga tegishli .widget.GridLayout  va TableLayout kabi ustunlar, qatorlar, hujayralar  mavjud , ammo elementlar moslashuvchan tarzda sozlanishi mumkin. • Ustunlar va qatorlar soni  Android atributlari tomonidan ishlatiladi: columnCount=&#34;number&#34;  va  andro id: rowCount=&#34;number&#34; . Misol • <?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?> • <GridLayout xmlns:android=&#34;http://schemas.android.com/apk/res/android&#34; • android:layout_width=&#34;wrap_content&#34; • android:layout_height=&#34;wrap_content&#34; • android:layout_gravity=&#34;center&#34; • android:columnCount=&#34;4&#34; • android:orientation=&#34;horizontal&#34; > • <Button android:text=&#34;1&#34; /> • <Button android:text=&#34;2&#34; /> • <Button android:text=&#34;3&#34; /> • <Button android:text=&#34;4&#34; /> • <Button android:text=&#34;5&#34; /> • <Button android:text=&#34;6&#34; /> • <Button android:text=&#34;7&#34; /> • <Button android:text=&#34;8&#34; /> • <Button android:text=&#34;9&#34; /> • <Button android:text=&#34;10&#34; /> • <Button android:text=&#34;11&#34; /> • <Button android:text=&#34;12&#34; /> • <Button android:text=&#34;13&#34; /> • <Button android:text=&#34;14&#34; /> • <Button android:text=&#34;15&#34; /> • <Button android:text=&#34;16&#34; /> Natija: GridView • GridView komponenti  tekis jadval hisoblanadi.  GridView uchun  ArrayAdapter yoki BaseAdapter sinfidan olingan sinfni yaratish  va uning getView usulini () qayta tuzish orqali ma&#39;lumotlar elementlarini ko&#39;rsatish uchun o&#39;z maydonlarini ishlatish mumkin . • GridView uchun ustunlar soni tez-tez statik tarzda o&#39;rnatiladi. Elementdagi qatorlar soni adapter taqdim etadigan elementlarning soniga qarab dinamik ravishda aniqlanadi. Xususiyatlari • android  — numColumns-ustunlar sonini aniqlaydi. Agar qiymat  berilgan bo&#39;lsa auto_fit, tizim mavjud maydonga asoslangan ustunlar sonini hisoblab chiqadi • android  — verticalSpacing-jadval hujayralari orasidagi bo&#39;sh joy hajmini belgilaydi • android:columnWidth -ustunlar kengligini o&#39;rnatadi • android  — stretchMode-bo&#39;sh joy qoldig&#39;ini belgilangan Android qiymati bilan jadval uchun ajratilganligini ko&#39;rsatadi:  numColumns=&#34;auto_fit&#34; . Ustunlar xujayralari orasidagi bo&#39;sh joy qoldig&#39;ini kengaytirish uchun yoki  spacingWidth  — hujayralar orasidagi bo&#39;shliqni kengaytirish uchun columnWidth qiymatlarini qabul qiladi Адабиётлар ва интернет ресурслар • “ Beginning Android TM 4 Application Development”, by Wei-Meng Lee, printed at Radha Offset, Delhi in 2013, pages – 533. Chapter-1. Getting started with Android programming • “ Android TM Application Development Cookbook”, by Wei-Meng Lee, printed at Sharda Offset Press, Delhi in 2013, pages – 385. • http://www.tutorialspoint.com/android/ android_environment_setup.htm • http://www.wikihow.com/Set-up-an-Android- Development-Environment • http://www.tutorialspoint.com/android/ android_architecture.htm • http://developer.android.com/sdk/index.html • http://opennet.uz/timnet4u/androidda-tezkor-emulator- genymotion-virtual-mashinasidan-foydalanish.html

O'xshashlar

Flutter Android Studio interfeysi ilk dasturni yozish va uni emulyatorda ishlatish komponentalar bilan tanishish
DNS bilan ishlash. Tarmoq fayl tizimi va disklari bilan ishlash
Ko’rsatgich va havolalar bilan ishlash
Elektron pochta bilan ishlash
Excelda diagrammalar bilan ishlash