Compose

Compose — Android foydalanuvchi interfeysini Kotlin orqali deklarativ tarzda yaratish uchun mo‘ljallangan UI toolkit. Odatda Jetpack Compose nomi bilan ishlatiladi. Developer ekranning joriy state uchun qanday ko‘rinishini composable functionlar orqali ifodalaydi; state o‘zgarsa framework tegishli UI qismlarini qayta hisoblaydi.

Compose XML layout va an’anaviy View tizimiga alternativa beradi, biroq ular bir applicationda birga ishlashi mumkin.

Composable function

@Composable annotationli function UI tavsiflaydi:

@Composable
fun Greeting(name: String) {
    Text("Salom, $name")
}

Composable oddiy Kotlin functionga o‘xshaydi, ammo Compose runtime ichida chaqiriladi.

U UI node va boshqa composablelarni yaratishi mumkin.

Recomposition

State o‘zgarganda Compose ta’sirlangan composable functionlarni qayta ishga tushiradi.

Bu recomposition.

Butun ekran har safar real DOMga o‘xshab qayta yaratilmaydi; runtime o‘zgarishi kerak bo‘lgan qismlarni aniqlaydi.

Composable side-effectlarsiz va tez bo‘lishi kerak.

State

UI state mutableStateOf yoki boshqa observable streamdan olinishi mumkin.

Misol:

var count by remember { mutableStateOf(0) }

count o‘zgarsa uni o‘qigan composable qayta compose qilinadi.

State ownership aniq bo‘lishi kerak.

Remember

remember qiymatni composition ichida qayta ishlatadi.

U configuration change yoki process deathda avtomatik permanent saqlanmaydi.

rememberSaveable supported qiymatni saved state orqali tiklashga yordam beradi.

Katta object va business data ViewModel yoki repositoryda saqlanadi.

State hoisting

State child componentdan parentga ko‘tariladi.

Child:

• current value;
• event callback

oladi.

Bu componentni reusable, testable va preview uchun qulay qiladi.

Stateless composable turli state source bilan ishlaydi.

Modifier

Modifier layout, ko‘rinish, interaction va semanticsni o‘zgartiradi:

Text("Compose")
    .padding(16.dp)
    .clickable { }

Modifier tartibi muhim.

padding().background() va background().padding() boshqa visual natija beradi.

Layout

Asosiy layoutlar:

• Row;
• Column;
• Box;
• LazyColumn;
• LazyRow;
• ConstraintLayoutga oid integration.

Parent childga constraint beradi, child o‘lchanadi va joylashtiriladi.

Bir childni bir passda bir necha marta o‘lchash cheklangan.

Lazy list

LazyColumn faqat ko‘rinadigan va yaqin itemlarni compose qiladi.

Katta ro‘yxat uchun samarali.

Har item stable keyga ega bo‘lishi kerak.

Index key sifatida ishlatilsa insert va reorder state’ni noto‘g‘ri elementga bog‘lashi mumkin.

Material

Compose Material componentlar:

• Button;
• TextField;
• Scaffold;
• AppBar;
• Card;
• NavigationBar;
• Dialog

kabi elementlarni beradi.

Theme color, typography va shape’ni markazlashtiradi.

Material ishlatish majburiy emas.

Theme

MaterialTheme hierarchy bo‘ylab design tokenlarni taqdim etadi.

Light, dark va dynamic color variantlari mavjud.

Custom design system o‘z component va tokenlarini yaratishi mumkin.

Rang kontrasti accessibility talabiga mos bo‘ladi.

ViewModel

ViewModel ekran state’ini StateFlow yoki Compose state ko‘rinishida beradi.

Composable eventlarni ViewModelga yuboradi.

ViewModel navigation context yoki View objectni ushlab turmasligi kerak.

UI state immutable data class bo‘lishi mumkin.

Flow yig‘ish

Flow UI’da lifecycle-aware usulda collect qilinadi.

Screen backgroundda bo‘lsa keraksiz collection to‘xtatilishi mumkin.

Har recompositionda yangi flow yaratish duplicate ishga olib keladi.

Flow ViewModelda stable saqlanadi.

Side effect

Composable body ichida to‘g‘ridan-to‘g‘ri network request yoki analytics yuborilmaydi.

Compose side-effect APIlari:

• LaunchedEffect;
• DisposableEffect;
• SideEffect;
• rememberCoroutineScope;
• produceState.

Effect key o‘zgarsa qayta ishga tushishi mumkin.

LaunchedEffect

Compositionga bog‘langan coroutine boshlaydi.

Composable compositiondan chiqsa coroutine cancellation qilinadi.

Key noto‘g‘ri tanlansa request har recompositionda qayta boshlanishi yoki kerakli update ishlamasligi mumkin.

Navigation

Navigation Compose composable destination va back stackni boshqaradi.

Route argumentlari serializatsiya va validation qilinadi.

Katta object route stringiga qo‘yilmaydi; ID uzatilib, data repositorydan olinadi.

Deep link navigation graph bilan bog‘lanadi.

View interoperability

Compose View ichiga ComposeView orqali joylashtiriladi.

An’anaviy View esa AndroidView orqali composable ichida ishlatiladi.

Bu mavjud loyihani bosqichma-bosqich ko‘chirish imkonini beradi.

Lifecycle va state ikki tizim orasida to‘g‘ri ulanadi.

Preview

Android Studio preview composable’ni turli configurationda ko‘rsatadi.

Sample data, font scale, dark theme va locale tekshiriladi.

Preview network yoki production databasega tayanmasligi kerak.

Preview parameter provider bir nechta state variantini beradi.

Test

Compose UI test semantics tree orqali elementlarni topadi.

Test:

• text;
• content description;
• test tag;
• role;
• state

bo‘yicha node tanlaydi.

Faqat pixel coordinatega tayanish mo‘rt test yaratadi.

Accessibility

Composable semantics screen reader va testlar uchun ma’no beradi.

Custom component label, role, state va actionni e’lon qiladi.

Clickable kichik icon yetarli touch targetga ega bo‘ladi.

Dynamic font layoutni buzmasligi kerak.

Performance

Performance uchun:

• stable parameter;
• immutable state;
• lazy list key;
• derived state;
• og‘ir hisobni memoization;
• image optimization

ishlatiladi.

Har recomposition zararli emas; keraksiz og‘ir ish zararli.

Layout Inspector va profiler bilan o‘lchanadi.

Snapshot tizimi

Compose state o‘qilishi va yozilishini snapshot mexanizmi bilan kuzatadi. Background thread’dagi state update concurrency qoidalariga mos bajariladi. Mutable collection ichini o‘zgartirib, observable reference’ni almashtirmaslik recomposition bermasligi mumkin.

Derived state

Boshqa statelardan hisoblanadigan va tez-tez o‘zgaradigan qiymat derivedStateOf orqali optimallashtirilishi mumkin. Bu har doim kerak emas; oddiy arifmetik hisobni murakkablashtirish foyda bermaydi.

Stability

Stable va immutable parameterlar Compose’ga ayrim recompositionlarni o‘tkazib yuborishga yordam beradi. Mutable public fieldga ega objectni stable deb noto‘g‘ri belgilash UI’ning yangilanmay qolishiga olib keladi.

Bog‘liq tushunchalar

Jetpack Compose, Composable, Recomposition, State, Remember, Modifier, State hoisting, LazyColumn, Material Design, ViewModel, Android UI