Elevation — əsaslar, kölgələr və Android-də Z koordinatı

Elevation nədir?

Elevation — Material Design-a (Google I/O 2014) daxil edilmiş metrikadır, elementin Z oxu boyunca vəziyyətini təsvir edir. X və Y-dən (ekranın ikiölçülü müstəvisi) fərqli olaraq, Z müstəvi üzərindəki hündürlükdür. Elevation dp (density-independent pixels) ilə ifadə olunur və iki vizual effekti müəyyən edir: elevation artdıqca daha böyük və bulanıq olan kölgə (shadow) və çəkmə sırası (yüksək elevation-ı olan elementlər aşağı elevation-ı olanların üstündə çəkilir).

Fiziki metafora: stolun üzərindəki kağız vərəqlərini təsəvvür edin. Yığın nə qədər hündürdürsə, üst vərəqdən düşən kölgə də bir o qədər uzundur. Elevation Material Design-da eyni şəkildə işləyir: hər bir element müəyyən hündürlükdə olan „rəqəmsal vərəq"dir. İstifadəçi elementlə qarşılıqlı əlaqədə olduqda (düyməni basdıqda, kartı qaldırdıqda), elevation müvəqqəti olaraq artır — buna „qarşılıqlı əlaqə elevasiyası" (interaction elevation) deyilir.

Material Design Guidelines-ə (Google, 2026) görə, elevation-ın düzgün istifadəsi interfeysin skan edilməsini 35% yaxşılaşdırır: istifadəçilər interaktiv elementləri daha tez tapır, çünki onlar düz məzmundan „yuxarı qalxır". Lakin həddindən artıq çox elevation səviyyəsi (4-dən çox) bu effekti azaldır: əgər bütün elementlər uçursa, heç biri vacib görünmür.

Android-də elevation: xassələr və API

Android-də elevation View API 21-dən (Android 5.0 Lollipop) daxili xassə kimi tətbiq olunub. View.elevation pikseldə (px) əsas hündürlüyü təyin edir, View.translationZ isə animasiyalar üçün əlavə yerdəyişmədir (məsələn, basdıqda). Ümumi vizual hündürlük = elevation + translationZ. Hər iki xassə ViewPropertyAnimator və ya ObjectAnimator vasitəsilə animasiyanı dəstəkləyir.

<!-- XML: elevation və 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="Elevasiyalı düymə" />

StateListAnimator — View-in vəziyyətindən (pressed, focused, enabled) asılı olaraq elevation və translationZ-nin animasiyası üçün XML resursudur. Məsələn, düymə basıldıqda elevation 2 dp-dən 8 dp-yə qədər arta bilər, qalxma effekti yaradır. StateListAnimator View-in istənilən xassələri üçün ObjectAnimator vasitəsilə animasiyanı dəstəkləyir.

// Kotlin: elevation-ın proqram tənzimlənməsi
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // px-də əsas hündürlük

// Basıldıqda elevation animasiyası
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — elevation-dan kölgənin düzgün çəkilməsi üçün əsas komponentdir. Android standart olaraq fon drawable əsasında kontur yaradan ViewOutlineProvider.BACKGROUND istifadə edir. Yumru küncləri olan View (shape drawable vasitəsilə) üçün fərdi OutlineProvider təyin edilməlidir, əks halda kölgə düzbucaqlı olacaq. Material komponentləri (CardView, MaterialButton) OutlineProvider-ı avtomatik idarə edir.

Material Design 3-də elevation səviyyələri

Material Design 3 (Material You) Material Design 2 ilə müqayisədə elevation sistemini yenidən nəzərdən keçirdi. 12 sabit səviyyə (Material 2) əvəzinə M3 hər biri müəyyən elevation səviyyəsinə uyğun gələn 5 əsas ton (tone) təklif edir. Bundan əlavə, M3 Android 12+-da „rəngli kölgə" (color shadow) konsepsiyasını təqdim edir: kölgə qara-boz olmaq əvəzinə temanın vurğu rənginə boyana bilər.

Interaction elevation — istifadəçinin elementlə qarşılıqlı əlaqəsi zamanı elevation-ın müvəqqəti artırılması. Material Design 3-də interaktiv elementlər (düymələr, kartlar) basılma (pressed state) və ya fokus (focused state) zamanı əsas elevation-a +1–2 dp alır. FloatingActionButton üçün interaction elevation +6 dp təşkil edir. Vəziyyətlər arasında keçid animasiyası təbii toxunma hissi üçün 150–200 ms davam etməlidir.

Jetpack Compose-da elevation

Jetpack Compose daxili elevation parametri olan Card və Surface komponentləri vasitəsilə elevation-ı dəstəkləyir. View System-dən fərqli olaraq, Compose kölgələri öz render mühərriki vasitəsilə çəkir, bu da Android-in bütün versiyalarında (API 21+) eyni davranışı təmin edir. Modifier.shadow() — istənilən composable-ə kölgə əlavə etmək üçün aşağı səviyyəli modifikator.

// Jetpack Compose: Surface və Card vasitəsilə 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 ilə idarə olunan kart")
}

// Xüsusi formalar üçün Modifier.shadow
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* hərəkət */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Kölgəli səth") }

Elevation animasiyası Compose-da animateFloatAsState və ya Animatable vasitəsilə həyata keçirilir. Elevation dəyişdikdə Compose avtomatik olaraq kölgəni animasiya edir. İnteraktiv elementlər üçün elevation-ın basılma, fokus və sürüklənməyə reaksiya verməsi üçün M3 InteractionSource-dan animateElevation ilə birlikdə istifadə edin. Compose 1.2+-da Material 3 temanın primary Container rənginə boyanmış kölgə olan color shadow-u dəstəkləyir.

iOS-da elevation: hündürlük simulyasiyası

iOS-da Material Design-dan götürülmüş daxili elevation analoqu yoxdur. Apple-ın Human Interface Guidelines qaydaları kölgələri idarə etmək üçün Z koordinatından istifadə etmir — bunun əvəzinə tərtibatçılar kölgələri əl ilə CALayer.shadow* vasitəsilə konfiqurasiya edirlər. Bununla belə, kölgələr və dərinlik vasitəsilə vizual iyerarxiya konsepsiyası iOS-da da mövcuddur: modal təqdimatlar, UIAlertController, UIPopoverPresentationController — hamısı fona nisbətən ayrılmaq üçün kölgələrdən istifadə edir.

iOS-da elevation simulyasiyası üçün tərtibatçılar shadowOpacity + shadowRadius + shadowOffset kombinasiyasından istifadə edir. Tələb olunan „hündürlük" nə qədər çoxdursa, kölgənin bulanıqlıq radiusu və yerdəyişməsi bir o qədər böyük olur. SwiftUI-də kölgələr parametrlərlə .shadow() modifikatoru vasitəsilə təyin edilir. iOS-da Material-a bənzər davranış üçün Google-dan Material Components for iOS (MDC) kitabxanaları mövcuddur.

// iOS: CALayer vasitəsilə elevation simulyasiyası
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
    }
}

// İstifadə
cardView.applyElevation(level: 3)  // 6 dp ekvivalenti

Material Components for iOS (MDC-iOS) — Material Design elevation-u iOS-a port edən Google kitabxanasıdır. MDC-iOS əvvəlcədən təyin edilmiş dəyərlərlə MDCShadowElevation sinfini, kölgə çəkmək üçün MDCShadowLayer-i və düzgün elevation ilə Material kartları üçün MDCCard-ı təqdim edir. MDC-iOS stateful shadow properties vasitəsilə basılma zamanı elevation animasiyasını dəstəkləyir.