Elevation — الأساسيات، الظلال والإحداثي Z في Android

ما هو elevation؟

Elevation هو مقياس تم تقديمه في Material Design (Google I/O 2014) يصف موضع العنصر على طول المحور z. على عكس x و y (المستوى ثنائي الأبعاد للشاشة)، فإن z هو الارتفاع فوق المستوى. يُعبَّر عن elevation بـ dp (بكسل مستقل عن الكثافة) ويحدد تأثيرين بصريين: الظل، الذي يصبح أكبر وأكثر ضبابية مع زيادة elevation، وترتيب الرسم (العناصر ذات elevation الأعلى تُرسم فوق العناصر ذات elevation الأقل).

استعارة فيزيائية: تخيل أوراقاً على طاولة. كلما زاد ارتفاع الكومة، زاد طول الظل من الورقة العلوية. Elevation في Material Design تعمل بنفس الطريقة تماماً — كل عنصر هو «ورقة رقمية» على ارتفاع معين. عندما يتفاعل المستخدم مع عنصر (يضغط على زر، يرفع بطاقة)، يزداد 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 (مضغوط، مركّز، مفعّل). على سبيل المثال، عند الضغط على زر، يمكن أن يزيد 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  // الارتفاع الأساسي بالبكسل

// رسوم elevation المتحركة عند الضغط
val animator = ObjectAnimator.ofFloat(
    myButton,
    "translationZ",
    0f,
    8f
).apply {
    duration = 150
    repeatMode = ValueAnimator.REVERSE
    repeatCount = 1
}

OutlineProvider — مكون رئيسي للعرض الصحيح لظل elevation. افتراضياً، يستخدم Android ViewOutlineProvider.BACKGROUND الذي ينشئ محيطاً بناءً على drawable الخلفية. بالنسبة لـ Views ذات الزوايا المستديرة (عبر 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 نغمات أساسية، كل منها يتوافق مع مستوى elevation محدد. بالإضافة إلى ذلك، يقدم M3 مفهوم «الظل الملون» على Android 12+: يمكن تلوين الظل بلون التمييز للمظهر بدلاً من أن يكون أسود-رمادي.

تفاعل الارتفاع — زيادة مؤقتة في elevation أثناء تفاعل المستخدم مع عنصر. في Material Design 3، تحصل العناصر التفاعلية (الأزرار، البطاقات) على +1–2 dp إلى elevation الأساسي عند الضغط (حالة pressed) أو التركيز (حالة focused). بالنسبة لـ FloatingActionButton، يكون تفاعل الارتفاع +6 dp. يجب أن تستمر رسوم الانتقال بين الحالات من 150 إلى 200 مللي ثانية لاستجابة لمسية طبيعية.

Elevation في Jetpack Compose

Jetpack Compose يدعم elevation عبر مكوني Card و Surface، واللذين يحتويان على معلمة elevation مدمجة. على عكس نظام View، يقوم 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+ الظل الملون — ظل ملون بلون primary Container للمظهر.

Elevation في iOS: محاكاة الارتفاع

في iOS، لا يوجد نظير مدمج لـ elevation من Material Design. إرشادات Human Interface من 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 التي تنقل elevation من Material Design إلى iOS. توفر MDC-iOS فئة MDCShadowElevation بقيم محددة مسبقاً، و MDCShadowLayer لعرض الظل، و MDCCard لبطاقات Material مع elevation مناسب. تدعم MDC-iOS رسوم elevation المتحركة عند الضغط من خلال خصائص الظل ذات الحالة.