Elevation — بنیادی باتیں، سائے اور Android میں Z کوآرڈینیٹ

Elevation کیا ہے؟

Elevation ایک میٹرک ہے جو Material Design (Google I/O 2014) میں متعارف کرایا گیا تھا اور z-محور کے ساتھ عنصر کی پوزیشن کو بیان کرتا ہے۔ x اور y (اسکرین کا دو جہتی طیارہ) کے برعکس، z طیارے کے اوپر کی اونچائی ہے۔ Elevation کو dp (کثافت سے آزاد پکسل) میں ظاہر کیا جاتا ہے اور یہ دو بصری اثرات کا تعین کرتا ہے: سایہ، جو elevation بڑھنے کے ساتھ بڑا اور دھندلا ہوتا جاتا ہے، اور ڈرائنگ کا ترتیب (زیادہ elevation والے عناصر کم elevation والے عناصر کے اوپر کھینچے جاتے ہیں)۔

طبیعی استعارہ: میز پر کاغذ کی چادروں کا تصور کریں۔ ڈھیر جتنا اونچا ہوگا، اوپر والی چادر کا سایہ اتنا ہی لمبا ہوگا۔ Material Design میں Elevation بالکل اسی طرح کام کرتا ہے — ہر عنصر ایک خاص اونچائی پر ایک “ڈیجیٹل شیٹ” ہے۔ جب صارف کسی عنصر کے ساتھ تعامل کرتا ہے (بٹن دباتا ہے، کارڈ اٹھاتا ہے)، elevation عارضی طور پر بڑھ جاتا ہے — اسے “تعامل elevation” کہا جاتا ہے۔

Material Design Guidelines (Google، 2026) کے مطابق، elevation کا صحیح استعمال انٹرفیس کی اسکین ایبلٹی کو 35% بہتر بناتا ہے: صارفین تعاملی عناصر کو تیزی سے ڈھونڈ لیتے ہیں کیونکہ وہ فلیٹ مواد کے اوپر “ابھرتے ہیں۔” تاہم، elevation کی ضرورت سے زیادہ سطحیں (4 سے زیادہ) اس اثر کو کم کر دیتی ہیں — اگر سب کچھ تیر رہا ہے تو، کچھ بھی اہم نہیں لگتا۔

Android میں Elevation: خصوصیات اور API

Android میں، elevation کو API 21 (Android 5.0 Lollipop) سے View کی بلٹ ان پراپرٹی کے طور پر لاگو کیا گیا ہے۔ 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 — View کی حالت (دبایا گیا، فوکس کیا گیا، فعال) کی بنیاد پر elevation اور translationZ کو اینیمیٹ کرنے کے لیے ایک XML وسیلہ ہے۔ مثال کے طور پر، جب بٹن دبایا جاتا ہے، تو elevation 2 dp سے 8 dp تک بڑھ سکتا ہے، جو اٹھانے کا اثر پیدا کرتا ہے۔ StateListAnimator کسی بھی View پراپرٹی کے لیے ObjectAnimator کے ذریعے اینیمیشن کو سپورٹ کرتا ہے۔

// 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 کی بنیاد پر ایک خاکہ بناتا ہے۔ گول کونوں والی Views (shape drawable کے ذریعے) کے لیے، ایک حسب ضرورت OutlineProvider سیٹ کرنا ضروری ہے، ورنہ سایہ مستطیل ہوگا۔ Material اجزاء (CardView، MaterialButton) OutlineProvider کو خود بخود منظم کرتے ہیں۔

Material Design 3 میں Elevation کی سطحیں

Material Design 3 (Material You) نے Material Design 2 کے مقابلے میں elevation نظام پر نظر ثانی کی ہے۔ 12 مقررہ سطحوں (Material 2) کے بجائے، M3 5 بنیادی ٹونز پیش کرتا ہے، ہر ایک مخصوص elevation سطح سے مطابقت رکھتا ہے۔ مزید برآں، M3 Android 12+ پر “رنگین سایہ” کا تصور متعارف کراتا ہے: سایہ سیاہ بھوری رنگ کی بجائے تھیم کے ایکسنٹ رنگ سے رنگا جا سکتا ہے۔

تعامل elevation — صارف کے کسی عنصر کے ساتھ تعامل کے دوران elevation میں عارضی اضافہ۔ Material Design 3 میں، تعاملی عناصر (بٹن، کارڈز) دبانے (pressed حالت) یا فوکس کرنے (focused حالت) پر اپنی بنیادی elevation میں +1–2 dp حاصل کرتے ہیں۔ FloatingActionButton کے لیے، تعامل elevation +6 dp ہے۔ قدرتی سپرش ردعمل کے لیے حالتوں کے درمیان منتقلی اینیمیشن 150–200 ms تک رہنی چاہیے۔

Jetpack Compose میں Elevation

Jetpack Compose Card اور Surface اجزاء کے ذریعے elevation کو سپورٹ کرتا ہے، جن میں ایک بلٹ ان elevation پیرامیٹر ہے۔ View سسٹم کے برعکس، Compose اپنے رینڈر انجن کے ذریعے سائے رینڈر کرتا ہے، جو Android کے تمام ورژنز (API 21+) میں مستقل رویہ کو یقینی بناتا ہے۔ Modifier.shadow() کسی بھی composable میں سایہ شامل کرنے کے لیے ایک نچلی سطح کا موڈیفائر ہے۔

// Jetpack Compose: Surface اور Card کے ذریعے 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 سے کنٹرول شدہ کارڈ")
}

// حسب ضرورت شکلوں کے لیے 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 دبانے، فوکس اور ڈریگ پر ردعمل ظاہر کرے۔ Compose 1.2+ میں Material 3 رنگین سایہ (تھیم کے primary Container رنگ سے رنگا ہوا سایہ) کو سپورٹ کرتا ہے۔

iOS پر Elevation: اونچائی کا نقلی

iOS پر، Material Design سے elevation کا کوئی بلٹ ان مشابہ نہیں ہے۔ Apple کے Human Interface Guidelines سایہ کے انتظام کے لیے z کوآرڈینیٹ استعمال نہیں کرتے — اس کے بجائے، ڈویلپر CALayer.shadow* کے ذریعے دستی طور پر سائے ترتیب دیتے ہیں۔ تاہم، سائے اور گہرائی کے ذریعے بصری درجہ بندی کا تصور iOS پر بھی موجود ہے: موڈل پریزنٹیشنز، UIAlertController، UIPopoverPresentationController — یہ سب پس منظر سے الگ ہونے کے لیے سائے استعمال کرتے ہیں۔

iOS پر elevation کو نقل کرنے کے لیے، ڈویلپر shadowOpacity + shadowRadius + shadowOffset کا مجموعہ استعمال کرتے ہیں۔ مطلوبہ “اونچائی” جتنی زیادہ ہوگی، دھندلاپن کا رداس اور سایہ آفسیٹ اتنا ہی بڑا ہوگا۔ SwiftUI میں، سائے پیرامیٹرز کے ساتھ .shadow() موڈیفائر کے ذریعے سیٹ کیے جاتے ہیں۔ iOS پر Material جیسا رویہ حاصل کرنے کے لیے، Google کی Material Components for iOS (MDC) جیسی لائبریریاں موجود ہیں۔

// iOS: CALayer کے ذریعے elevation نقل
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 اور مناسب elevation کے ساتھ Material کارڈز کے لیے MDCCard فراہم کرتا ہے۔ MDC-iOS اسٹیٹفل سایہ خصوصیات کے ذریعے دبانے پر elevation اینیمیشن کو سپورٹ کرتا ہے۔