Elevation — asoslar, soyalar va Android-da Z koordinatasi

Elevation nima?

Elevation — Material Design (Google I/O 2014) ga kiritilgan metrika bo'lib, elementning Z o'qi bo'ylab o'rnini tavsiflaydi. X va Y dan (ekranning ikki o'lchovli tekisligi) farqli o'laroq, Z tekislik ustidagi balandlikdir. Elevation dp (density-independent pixels) da ifodalanadi va ikkita vizual effektni aniqlaydi: elevation o'sishi bilan kattaroq va xiraroq bo'ladigan soya (shadow) va chizish tartibi (yuqori elevation ga ega elementlar pastki elevation li elementlarning ustiga chiziladi).

Jismoniy metafora: stol ustidagi qog'oz varaqlarini tasavvur qiling. Uyum qanchalik baland bo'lsa, yuqori varaqning soyasi shunchalik uzun bo'ladi. Elevation Material Design da xuddi shunday ishlaydi: har bir element ma'lum bir balandlikdagi „raqamli varaq"dir. Foydalanuvchi element bilan o'zaro aloqada bo'lganda (tugmani bosganda, kartani ko'targanda), elevation vaqtincha oshadi — bu „o'zaro ta'sir elevatsiyasi" (interaction elevation) deb ataladi.

Material Design Guidelines (Google, 2026) ga ko'ra, elevation dan to'g'ri foydalanish interfeysning skanerlanishini 35% yaxshilaydi: foydalanuvchilar interaktiv elementlarni tezroq topadi, chunki ular tekis kontentdan „chiqib turadi". Biroq, elevation darajalarining haddan tashqari ko'pligi (4 dan ortiq) bu ta'sirni kamaytiradi: agar barcha elementlar suzib yursa, hech biri muhim ko'rinmaydi.

Android-da elevation: xususiyatlar va API

Android-da elevation API 21 (Android 5.0 Lollipop) dan boshlab View-ning o'rnatilgan xususiyati sifatida amalga oshirilgan. View.elevation pikseldagi (px) asosiy balandlikni o'rnatadi, View.translationZ esa animatsiyalar uchun qo'shimcha siljishdir (masalan, bosganda). Umumiy vizual balandlik = elevation + translationZ. Ikkala xususiyat ViewPropertyAnimator yoki ObjectAnimator orqali animatsiyani qo'llab-quvvatlaydi.

<!-- XML: elevation va translationZ -->
<Button
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="4dp"
    android:translationZ="2dp"
    android:stateListAnimator="@anim/button_elevation"
    android:text="Elevatsiyali tugma" />

StateListAnimator — View holatiga (pressed, focused, enabled) qarab elevation va translationZ animatsiyasi uchun XML resursi. Masalan, tugma bosilganda elevation 2 dp dan 8 dp gacha oshib, ko'tarilish effektini yaratishi mumkin. StateListAnimator View-ning istalgan xususiyatlari uchun ObjectAnimator orqali animatsiyani qo'llab-quvvatlaydi.

// Kotlin: elevation ni dasturiy sozlash
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // px dagi asosiy balandlik

// Bosilganda elevation animatsiyasi
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — elevation dan soyani to'g'ri chizish uchun asosiy komponent. Android sukut bo'yicha fon drawable asosida kontur yaratadigan ViewOutlineProvider.BACKGROUND dan foydalanadi. Yumaloq burchakli View (shape drawable orqali) uchun maxsus OutlineProvider o'rnatilishi kerak, aks holda soya to'rtburchak shaklida bo'ladi. Material komponentlari (CardView, MaterialButton) OutlineProvider ni avtomatik boshqaradi.

Material Design 3-da elevation darajalari

Material Design 3 (Material You) Material Design 2 bilan solishtirganda elevation tizimini qayta ko'rib chiqdi. 12 sobit daraja (Material 2) o'rniga M3 har biri ma'lum bir elevation darajasiga mos keladigan 5 asosiy ton (tone) ni taklif qiladi. Bundan tashqari, M3 Android 12+ da „rangli soya" (color shadow) tushunchasini kiritadi: soya qora-kulrang bo'lish o'rniga temaning aksent rangiga bo'yalishi mumkin.

Interaction elevation — foydalanuvchining element bilan o'zaro ta'siri paytida elevation ning vaqtincha oshirilishi. Material Design 3 da interaktiv elementlar (tugmalar, kartalar) bosilganda (pressed state) yoki fokusda (focused state) asosiy elevation ga +1–2 dp oladi. FloatingActionButton uchun interaction elevation +6 dp ni tashkil qiladi. Holatlar orasidagi o'tish animatsiyasi tabiiy taktil hissiyot uchun 150–200 ms davom etishi kerak.

Jetpack Compose-da elevation

Jetpack Compose o'rnatilgan elevation parametriga ega Card va Surface komponentlari orqali elevation ni qo'llab-quvvatlaydi. View System dan farqli o'laroq, Compose soyalarni o'zining render dvigateli orqali chizadi, bu Android ning barcha versiyalarida (API 21+) bir xil harakatni ta'minlaydi. Modifier.shadow() — istalgan composable ga soya qo'shish uchun past darajadagi modifikator.

// Jetpack Compose: Surface va Card orqali elevation
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Surface

Card(
    elevation = CardDefaults.cardElevation(
        defaultElevation = 4.dp,
        pressedElevation = 8.dp,
        focusedElevation = 6.dp
    ),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.surface
    )
) {
    Text("Elevation bilan boshqariladigan karta")
}

// Maxsus shakllar uchun Modifier.shadow
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* harakat */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Soyali sirt") }

Elevation animatsiyasi Compose da animateFloatAsState yoki Animatable orqali amalga oshiriladi. Elevation o'zgarganda, Compose avtomatik ravishda soyani animatsiya qiladi. Interaktiv elementlar uchun elevation ning bosish, fokus va tortishga reaksiya berishi uchun M3 InteractionSource dan animateElevation bilan birgalikda foydalaning. Compose 1.2+ da Material 3 temaning primary Container rangiga bo'yalgan soya — color shadow ni qo'llab-quvvatlaydi.

iOS-da elevation: balandlik simulyatsiyasi

iOS-da Material Design dan olingan o'rnatilgan elevation analogi yo'q. Apple-ning Human Interface Guidelines soyalarni boshqarish uchun Z koordinatasidan foydalanmaydi — buning o'rniga dasturchilar soyalarni qo'lda CALayer.shadow* orqali sozlashadi. Biroq, soyalar va chuqurlik orqali vizual iyerarxiya tushunchasi iOS da ham mavjud: modal taqdimotlar, UIAlertController, UIPopoverPresentationController — barchasi fondan ajralish uchun soyalardan foydalanadi.

iOS da elevation simulyatsiyasi uchun dasturchilar shadowOpacity + shadowRadius + shadowOffset kombinatsiyasidan foydalanadilar. Kerakli „balandlik" qanchalik katta bo'lsa, soyaning xiralik radiusi va siljishi shunchalik katta bo'ladi. SwiftUI da soyalar .shadow() modifikatori orqali parametrlar bilan o'rnatiladi. iOS da Material-ga o'xshash harakat uchun Google dan Material Components for iOS (MDC) kutubxonalari mavjud.

// iOS: CALayer orqali elevation simulyatsiyasi
import UIKit

extension UIView {
    func applyElevation(level: Int) {
        let elevationMap: [Int: (CGFloat, CGFloat, CGFloat)] = [
            1: (0.05, 1, 2),
            2: (0.08, 2, 4),
            3: (0.11, 4, 8),
            4: (0.12, 6, 12),
            5: (0.14, 8, 16),
            6: (0.15, 12, 24)
        ]
        let (opacity, offset, radius) = elevationMap[level] ?? (0.08, 2, 4)
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = Float(opacity)
        layer.shadowOffset = CGSize(width: 0, height: offset)
        layer.shadowRadius = radius
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
}

// Foydalanish
cardView.applyElevation(level: 3)  // 6 dp ekvivalenti

Material Components for iOS (MDC-iOS) — Material Design elevation ni iOS ga port qiladigan Google kutubxonasi. MDC-iOS oldindan belgilangan qiymatlar bilan MDCShadowElevation klassini, soya chizish uchun MDCShadowLayer ni va to'g'ri elevation bilan Material kartalari uchun MDCCard ni taqdim etadi. MDC-iOS stateful shadow properties orqali bosilganda elevation animatsiyasini qo'llab-quvvatlaydi.