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

Что такое elevation?

Elevation — это метрика, введённая в Material Design (Google I/O 2014), которая описывает положение элемента вдоль z-оси. В отличие от x и y (двумерная плоскость экрана), z — это высота над плоскостью. Elevation выражается в dp (density-independent pixels) и определяет два визуальных эффекта: тень (shadow), которая становится больше и размытее с ростом 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, который создаёт контур на основе фонового 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("Поверхность с shadow") }

Анимация 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.