Shadow: جوہر، موبائل ایپلیکیشنز میں سائے بنانا

UI میں سایہ کیا ہے؟

سایہ (shadow) صارف انٹرفیس میں ایک بصری اثر ہے جو روشنی اور گہرائی کی نقل کرتا ہے۔ سایہ کسی عنصر کی ایک گہری دھندلی کاپی اصل سے ہٹا کر کھینچ کر بنایا جاتا ہے۔ موبائل ڈیزائن میں، سائے تین کام انجام دیتے ہیں: درجہ بندی دکھاتے ہیں (اونچا عنصر = لمبا سایہ)، انٹرایکٹیویٹی کا اشارہ دیتے ہیں (سایہ والے بٹن دبانے کے قابل لگتے ہیں)، مواد کو پس منظر سے الگ کرتے ہیں (سایہ والے کارڈ علیحدہ بلاکس کے طور پر پڑھے جاتے ہیں)۔

Google کے Material Design میں، سائے elevation کے تصور سے لازم و ملزوم ہیں۔ ہر عنصر z-متناسق میں ایک مخصوص بلندی پر قبضہ کرتا ہے، اور سایہ اوپر سے روشنی کا پروجیکشن ہے۔ Apple کے Human Interface Guidelines ایک سخت بلندی کا نظام تجویز نہیں کرتے، لیکن انٹرفیس میں بصری درجہ بندی اور گہرائی پیدا کرنے کے لیے سائے استعمال کرنے کی سفارش کرتے ہیں۔

Nielsen Norman Group کے ایک مطالعہ (2024) کے مطابق، صحیح طریقے سے رکھے گئے سائے انٹرایکٹو عنصر تلاش کرنے کے وقت میں 24% کمی لاتے ہیں۔ سائے بصارت سے محروم صارفین کو عناصر کی حدود میں فرق کرنے میں بھی مدد دیتے ہیں۔ تاہم، سائے کا زیادہ استعمال (اسکرین پر 3+ سطح) علمی بوجھ بڑھاتا ہے اور ادراک کو خراب کرتا ہے۔

iOS پر سائے: CALayer اور SwiftUI

iOS پر، سائے CALayer کی خصوصیات کے ذریعے لاگو کیے جاتے ہیں: shadowColor سائے کا رنگ سیٹ کرتا ہے، shadowOffset — CGSize میں (x، y) ہٹاؤ، shadowRadius — دھندلاہٹ کا رداس، shadowOpacity — 0 سے 1 تک دھندلاپن۔ کارکردگی کے لیے، shadowPath (ایک UIBezierPath جو سائے کی شکل بیان کرتا ہے) سیٹ کرنے کی بھی سفارش کی جاتی ہے، تاکہ Core Animation اسے خودکار طور پر شمار نہ کرے۔

// UIKit: CALayer کے ذریعے سایہ ترتیب
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12

// سایہ ترتیب
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.15
cardView.layer.shadowOffset = CGSize(width: 0, height: 4)
cardView.layer.shadowRadius = 8

"> اصلاح: واضح shadowPath
cardView.layer.shadowPath = UIBezierPath(
    roundedRect: cardView.bounds,
    cornerRadius: 12
).cgPath

SwiftUI میں، سائے .shadow() موڈیفائر کے ساتھ color، radius، x، y پیرامیٹرز کے ساتھ سیٹ کیے جاتے ہیں۔ SwiftUI خودکار طور پر shadowPath لاگو کرتا ہے اور رینڈرنگ کارکردگی کا انتظام کرتا ہے۔ جدید سائے (اندرونی سائے، متعدد سائے) کے لیے، LinearGradient کے ساتھ overlay() استعمال کریں۔

// SwiftUI: shadow موڈیفائر کے ذریعے سایہ
import SwiftUI

VStack {
    Text("سایہ والا کارڈ")
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(
            color: .black.opacity(0.15),
            radius: 10,
            x: 0,
            y: 4
        )
}

iOS پر سائے کی کارکردگی: اگر shadowPath سیٹ نہیں ہے، Core Animation ہر فریم پر پرت کی شکل کی بنیاد پر سائے کا حساب لگاتا ہے، جو اینیمیشن کے دوران رکاوٹ کا سبب بن سکتا ہے۔ جامد عناصر کے لیے، ہمیشہ shadowPath سیٹ کریں۔ اینیمیٹڈ عناصر کے لیے، سائے کو علیحدہ پرت میں کیش کرنے کے لیے CALayer پر shouldRasterize = true استعمال کریں۔ SwiftUI میں، راسٹرائزیشن .drawingGroup() کے ذریعے منظم کی جاتی ہے۔

Android میں سائے: elevation اور کسٹم سائے

Android میں، Material Design میں سائے elevation کے ذریعے لاگو کیے جاتے ہیں — ایک View خاصیت جو z-متناسق میں عنصر کی بلندی سیٹ کرتی ہے۔ نظام elevation اور outlineProvider (عنصر کی خاکہ) کی بنیاد پر خودکار طور پر سایہ رینڈر کرتا ہے۔ elevation جتنی زیادہ ہوگی، سایہ اتنا ہی بڑا اور دھندلا ہوگا۔ ان View کے لیے جو Material Design (جیسے AppCompat) سے وراثت نہیں پاتے، سائے صرف ہارڈویئر ایکسلریشن فعال ہونے پر کام کرتے ہیں۔

<!-- XML: خصوصیات کے ذریعے elevation -->
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="12dp"
    app:cardElevation="6dp">
    <!-- کارڈ کا مواد -->
</androidx.cardview.widget.CardView>

Android View System میں کسٹم سائے کے لیے، OutlineProvider استعمال کریں۔ ViewOutlineProvider آپ کو outline.setRoundRect() یا outline.setPath() کے ذریعے صوابدیدی شکل سیٹ کرنے کی اجازت دیتا ہے۔ OutlineProvider کے بغیر، سایہ View کی مستطیل شکل کی بنیاد پر رینڈر کیا جاتا ہے، جو کونے کی گولائی کو مدنظر نہیں رکھتا۔

// Kotlin: سایہ کے لیے کسٹم OutlineProvider
import android.graphics.Outline
import android.view.View
import android.view.ViewOutlineProvider

val myView: View = findViewById(R.id.myView)
myView.outlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(
            0, 0, view.width, view.height,
            12f  // کونے کا رداس
        )
    }
}
myView.elevation = 8f  // px میں سائے کی بلندی
myView.translationZ = 4f  // دبانے پر اضافی بلندی

Jetpack Compose میں، سائے Modifier.shadow() اور Card اور Surface اجزاء میں elevation کے ذریعے منظم کیے جاتے ہیں۔ Modifier.shadow() elevation اور shape قبول کرتا ہے۔ View System کے برعکس، Compose اپنی رینڈر پائپ لائن میں سائے رینڈر کرتا ہے، جو Android کے تمام ورژنز پر زیادہ پیش قیاسی رویہ فراہم کرتا ہے۔

// Jetpack Compose: Modifier.shadow کے ذریعے سایہ
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    modifier = Modifier.shadow(
        elevation = 6.dp,
        shape = RoundedCornerShape(12.dp),
        clip = false
    ),
    colors = CardDefaults.cardColors(containerColor = Color.White)
) {
    Text("کسٹم سایہ والا Card")
}

سائے کے استعمال کے لیے سفارشات

سائے کا صحیح استعمال انٹرفیس کے ادراک کو بہتر بناتا ہے، جبکہ غلط استعمال بصری شور پیدا کرتا ہے اور کارکردگی کو خراب کرتا ہے۔ Material Design پانچ elevation سطحیں بیان کرتا ہے: 0 dp (کوئی سایہ نہیں)، 1–4 dp (بٹن، چپس)، 6–12 dp (کارڈ، مینیو)، 16–24 dp (ڈائیلاگ، نیچے کی شیٹ)، 24+ dp (موڈل ونڈو، FAB)۔

بہترین طریقے: (1) ان عناصر کے لیے سایہ استعمال نہ کریں جنہیں توجہ مبذول نہیں کرنی چاہیے (پس منظر، تقسیم کنندگان)، (2) سائے کی بلندی عنصر کی اہمیت سے مطابقت رکھتی ہو — جتنا اہم، اتنا اونچا، (3) بٹن دباتے وقت، سپرش فیڈ بیک کے لیے اینیمیشن کے ساتھ elevation کم کریں، (4) گہرے پس منظر پر سائے سے بچیں — سائے کے بجائے overlay (روشن/سیاہ) استعمال کریں۔ Material You (Android 12+) میں، سائے تھیم کے مطابق ڈھل جاتے ہیں: گہرے پس منظر پر، elevation کو رنگین پرت (surface tint) سے بدل دیا جاتا ہے۔

Flutter میں سائے: BoxShadow اور PhysicalModel

Flutter میں، سائے BoxDecoration کے اندر BoxShadow کے ذریعے لاگو کیے جاتے ہیں۔ BoxShadow color، offset، blurRadius اور spreadRadius قبول کرتا ہے۔ Flutter متعدد سائے کو سپورٹ کرتا ہے: BoxShadow کی فہرست دینے سے پیچیدہ اثرات پیدا ہو سکتے ہیں — مثال کے طور پر، بیرونی سایہ + اندرونی ہائی لائٹ۔ PhysicalModel ایک متبادل ہے جو شکل (BeveledRectangleBorder، CircleBorder) کی بنیاد پر ایک طبعی سایہ نقل کرتا ہے۔

// Flutter: BoxDecoration + BoxShadow کے ذریعے سایہ
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.0),
        boxShadow: [
            BoxShadow(
                color: Colors.black.withOpacity(0.15),
                offset: Offset(0, 4),
                blurRadius: 8.0,
                spreadRadius: 0,
            ),
        ],
    ),
    child: Text('سایہ والا کنٹینر'),
)

// طبعی سایہ کے لیے PhysicalModel
PhysicalModel(
    color: Colors.white,
    elevation: 6.0,
    shadowColor: Colors.black.withOpacity(0.2),
    borderRadius: BorderRadius.circular(12.0),
    child: Text('سایہ والا طبعی ماڈل'),
)

کارکردگی: متعدد سائے والا BoxShadow ہر تبدیلی پر دوبارہ پینٹ کرنے کا سبب بن سکتا ہے۔ جامد عناصر کے لیے، PhysicalModel استعمال کریں — یہ سایہ کو علیحدہ پرت (RepaintBoundary) میں کیش کرتا ہے۔ Flutter 3.16+ میں، انکولی سائے کے ساتھ Material 3 elevation سپورٹ ہے، جو تھیم (ہلکا/گہرا) کے مطابق رنگ اور دھندلاہٹ تبدیل کرتا ہے۔