Elevation — основи, сенки и Z-координата в Android

Какво е elevation?

Elevation — е метрика, въведена в Material Design (Google I/O 2014), която описва позицията на елемента по Z-оста. За разлика от X и Y (двуизмерна равнина на екрана), Z е височината над равнината. Elevation се изразява в dp (density-independent pixels) и определя два визуални ефекта: сянка (shadow), която става по-голяма и по-размита с увеличаване на elevation, и ред на рисуване (елементите с по-високо elevation се рисуват над елементите с по-ниско elevation).

Физическа метафора: представете си листове хартия на маса. Колкото по-висока е купчината, толкова по-дълга е сянката от горния лист. Elevation в Material Design работи по абсолютно същия начин: всеки елемент е „цифров лист" на определена височина. Когато потребителят взаимодейства с елемент (натиска бутон, повдига карта), elevation временно се увеличава — това се нарича „елевация при взаимодействие" (interaction elevation).

Според Material Design Guidelines (Google, 2026), правилното използване на elevation подобрява сканируемостта на интерфейса с 35%: потребителите по-бързо намират интерактивните елементи, защото те „изпъкват" над плоския контент. Прекомерният брой нива на elevation (повече от 4) обаче намалява този ефект: ако всички елементи летят, никой не изглежда важен.

Elevation в Android: свойства и API

В Android elevation е реализирана като вградено свойство на View от API 21 (Android 5.0 Lollipop). View.elevation задава базовата височина в пиксели (px), а View.translationZ — допълнително отместване за анимации (например при натискане). Обща визуална височина = elevation + translationZ. И двете свойства поддържат анимация чрез ViewPropertyAnimator или ObjectAnimator.

<!-- XML: elevation и 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="Бутон с елевация" />

StateListAnimator — XML ресурс за анимация на elevation и translationZ в зависимост от състоянието на View (pressed, focused, enabled). Например при натискане на бутон elevation може да се увеличи от 2 dp на 8 dp, създавайки ефект на повдигане. StateListAnimator поддържа анимация чрез ObjectAnimator за всякакви свойства на View.

// Kotlin: програмно настройване на elevation
import android.animation.ObjectAnimator
import android.view.View

val myButton: View = findViewById(R.id.myButton)
myButton.elevation = 4f  // базова височина в px

// Анимация на elevation при натискане
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — ключов компонент за правилно рисуване на сянката от elevation. По подразбиране Android използва ViewOutlineProvider.BACKGROUND, който създава контур на базата на background drawable. За View със заоблени ъгли (чрез shape drawable) трябва да се зададе персонализиран OutlineProvider, в противен случай сянката ще бъде правоъгълна. Material компонентите (CardView, MaterialButton) управляват OutlineProvider автоматично.

Нива на elevation в Material Design 3

Material Design 3 (Material You) преразгледа системата за elevation в сравнение с Material Design 2. Вместо 12 фиксирани нива (Material 2) M3 предлага 5 основни тона (tones), всеки от които съответства на определено ниво на elevation. Освен това M3 въвежда концепцията за „цветна сянка" (color shadow) на Android 12+: сянката може да бъде оцветена в акцентен цвят на темата, вместо да е черно-сива.

Interaction elevation — временно увеличение на elevation при взаимодействие на потребителя с елемента. В Material Design 3 интерактивните елементи (бутони, карти) получават +1–2 dp към базовото elevation при натискане (pressed state) или фокус (focused state). За FloatingActionButton interaction elevation е +6 dp. Анимацията на преход между състоянията трябва да продължава 150–200 ms за естествена тактилна реакция.

Elevation в Jetpack Compose

Jetpack Compose поддържа elevation чрез компонентите Card и Surface, които имат вграден параметър elevation. За разлика от View System, Compose рисува сенките чрез собствен рендер двигател, което осигурява еднакво поведение на всички версии на Android (API 21+). Modifier.shadow() — нискостепенен модификатор за добавяне на сянка към произволен composable.

// Jetpack Compose: elevation чрез Surface и Card
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")
}

// Modifier.shadow за персонализирани форми
Surface(
    modifier = Modifier
        .shadow(elevation = 6.dp, shape = RoundedCornerShape(16.dp))
        .clickable { /* действие */ },
    shape = RoundedCornerShape(16.dp),
    color = MaterialTheme.colorScheme.surface
) { Text("Повърхност със сянка") }

Анимация на elevation в Compose се реализира чрез animateFloatAsState или Animatable. При промяна на elevation, Compose автоматично анимира сянката. За интерактивни елементи използвайте M3 InteractionSource в комбинация с animateElevation, за да реагира elevation на натискания, фокус и влачене. Material 3 в Compose 1.2+ поддържа color shadow — сянка, оцветена в цвета на primary Container на темата.

Elevation на iOS: симулация на височина

На iOS няма вграден аналог на elevation от Material Design. Human Interface Guidelines на Apple не използват Z-координата за управление на сенките — вместо това разработчиците конфигурират сенките ръчно чрез CALayer.shadow*. Концепцията за визуална йерархия чрез сенки и дълбочина обаче съществува и на iOS: модални презентации, UIAlertController, UIPopoverPresentationController — всички те използват сенки за отделяне от фона.

За симулация на elevation на iOS разработчиците използват комбинация от shadowOpacity + shadowRadius + shadowOffset. Колкото по-висока е необходимата „височина", толкова по-голям е радиусът на размиване и отместването на сянката. В SwiftUI сенките се задават чрез модификатора .shadow() с параметри. За поведение, подобно на Material на iOS, съществуват библиотеки Material Components for iOS (MDC) от Google.

// iOS: симулация на elevation чрез CALayer
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
    }
}

// Използване
cardView.applyElevation(level: 3)  // еквивалент на 6 dp

Material Components for iOS (MDC-iOS) — библиотека на Google, която пренася Material Design elevation на iOS. MDC-iOS предоставя класа MDCShadowElevation с предварително дефинирани стойности, MDCShadowLayer за рисуване на сянка и MDCCard за Material карти с правилно elevation. MDC-iOS поддържа анимация на elevation при натискане чрез stateful shadow properties.