Elevation — مبانی، سایه‌ها و مختصات Z در Android

Elevation چیست؟

Elevation — معیاری است که در Material Design (Google I/O 2014) معرفی شده و موقعیت عنصر را در امتداد محور Z توصیف می‌کند. برخلاف X و Y (صفحه دو بعدی)، Z ارتفاع بالای صفحه است. Elevation بر حسب dp (پیکسل‌های مستقل از تراکم) بیان می‌شود و دو اثر بصری را تعیین می‌کند: سایه (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="دکمه با elevation" />

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 پنج تن (tone) پایه ارائه می‌دهد که هر کدام با یک سطح elevation خاص مطابقت دارد. علاوه بر این، M3 مفهوم «سایه رنگی» (color shadow) را در Android 12+ معرفی می‌کند: سایه می‌تواند به رنگ تأکیدی تم رنگ‌آمیزی شود، نه سیاه-خاکستری.

Interaction elevation — افزایش موقت elevation هنگام تعامل کاربر با عنصر. در Material Design 3، عناصر تعاملی (دکمه‌ها، کارت‌ها) هنگام فشار (pressed state) یا فوکوس (focused state) +1–2 dp به elevation پایه دریافت می‌کنند. برای FloatingActionButton interaction elevation +6 dp است. انیمیشن انتقال بین حالت‌ها باید 150–200 میلی‌ثانیه برای بازخورد لمسی طبیعی طول بکشد.

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 اپل از مختصات 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 پشتیبانی می‌کند.