Responsive Design — بنیادی باتیں، اسکرینوں کے مطابق انٹرفیس کی موافقت

Responsive Design کیا ہے؟

Responsive Design انٹرفیس بنانے کا ایک طریقہ ہے جس میں لے آؤٹ اسکرین کے سائز، سمت اور دستیاب جگہ پر ردعمل ظاہر کرتا ہے، فعالیت کھوئے بغیر عناصر کو دوبارہ ترتیب دیتا ہے۔ یہ اصطلاح 2010 میں Ethan Marcotte نے ویب ڈیزائن کے لیے وضع کی تھی، لیکن اصول مکمل طور پر مقامی موبائل ایپلیکیشنز پر لاگو ہوتے ہیں۔

موبائل ڈویلپمنٹ میں، responsive design کا مطلب ہے کہ ایک ہی ایپلیکیشن تمام ڈیوائسز پر صحیح طریقے سے ظاہر ہوتی ہے: iPhone SE (375 pt) سے iPad Pro (عمودی میں 1024 pt) تک اور Android اسمارٹ فون (360 dp) سے ٹیبلٹ (800 dp) تک۔ کلیدی عناصر ہیں لچکدار گرڈ، انکولی تصاویر اور فریم ورک کی سطح پر میڈیا سوالات (size classes, qualifiers)۔

Apple Developer Documentation کے مطابق، ایپلیکیشن یونیورسل ہونی چاہیے — علیحدہ iPad بلڈ کے بغیر تمام ڈیوائسز پر کام کرنی چاہیے۔ Google Play Jetpack WindowManager اور canonical layouts کے ذریعے انکولی لے آؤٹ استعمال کرنے کی سفارش کرتا ہے۔ ٹیبلٹ موافقت کی کمی منفی جائزوں کی ایک عام وجہ ہے۔

Responsive vs Adaptive Design

Responsive اور adaptive کی اصطلاحات اکثر الجھ جاتی ہیں، حالانکہ یہ مختلف طریقوں کو بیان کرتی ہیں۔ Responsive design ایک لچکدار گرڈ استعمال کرتا ہے جو اسکرین کی چوڑائی کے مطابق مسلسل ایڈجسٹ ہوتا ہے۔ Adaptive design پہلے سے طے شدہ breakpoints کے لیے مقررہ لے آؤٹ استعمال کرتا ہے — ایپلیکیشن ان کے درمیان اچانک سوئچ کرتی ہے۔

عملی طور پر، موبائل ایپس دونوں طریقوں کا مجموعہ استعمال کرتی ہیں۔ بنیادی گرڈ responsive طور پر بنایا جاتا ہے (Auto Layout constraint انحصار کے ساتھ)، اور breakpoint (مثال: چوڑائی > 600 pt) تک پہنچنے پر، لے آؤٹ عناصر کی مختلف ترتیب کے ساتھ انکولی ورژن میں سوئچ ہو جاتا ہے۔ iOS Auto Layout (responsive) کو Size Classes (adaptive) کے ساتھ جوڑتا ہے۔ Android ConstraintLayout (responsive) کو qualifier وسائل (adaptive) کے ساتھ جوڑتا ہے۔

iOS Size Classes: Compact اور Regular

Size Classes ایک iOS طریقہ کار ہے جو دستیاب اسکرین کی جگہ کو دو محوروں پر درجہ بندی کرتا ہے: افقی اور عمودی۔ ہر محور Compact (C) یا Regular (R) ہو سکتا ہے۔ مجموعہ لے آؤٹ موافقت کے چار اختیارات دیتا ہے: CR (عام iPhone عمودی)، RR (iPad عمودی/افقی)، RC (Plus/Pro Max پر iPhone افقی)، CC (iPad Split View)۔

// Swift میں Size Classes کی تعریف
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — master-detail دکھائیں
        case (.compact, .regular):
            showStackedView() // iPhone عمودی — اسٹیکڈ لے آؤٹ
        case (.compact, .compact):
            showCompactView() // iPhone SE افقی — کم سے کم
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // UISplitViewController یا HStack کا استعمال
    }

    private func showStackedView() {
        // iPhone کے لیے عمودی اسٹیک
    }

    private func showCompactView() {
        // ثانوی عناصر چھپائیں، اہم دکھائیں
    }
}

Interface Builder میں، Size Classes "wAny hAny" پینل کے ذریعے ترتیب دی جاتی ہیں — ڈویلپر ایک مخصوص مجموعہ (wRegular hRegular, wCompact hRegular) منتخب کرتا ہے اور constraint تغیرات شامل کرتا ہے۔ SwiftUI ردعمل انکولی کے لیے @Environment(\.horizontalSizeClass) اور @Environment(\.verticalSizeClass) استعمال کرتا ہے — جب سمت یا ونڈو کا سائز بدلتا ہے، SwiftUI خود بخود ویو کو دوبارہ کھینچتا ہے۔

// SwiftUI میں Size Classes
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — سائڈبار کے ساتھ افقی لے آؤٹ
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — فل سکرین عمودی اسٹیک
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers ایک Android طریقہ کار ہے جو ڈیوائس کی خصوصیات کی بنیاد پر مختلف وسائل (layout, values, drawables) لوڈ کرتا ہے۔ کوالیفائرز میں اسکرین کا سائز (small, normal, large, xlarge)، سمت (port, land)، کم از کم چوڑائی (sw<N>dp)، دستیاب چوڑائی (w<N>dp) اور اونچائی (h<N>dp) شامل ہیں۔

// Kotlin میں ڈیوائس کنفیگریشن کا پتہ لگانا
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

مختلف اسکرینوں کے لیے وسائل کا ڈھانچہ: res/layout/activity_main.xml (فون)، res/layout-sw600dp/activity_main.xml (7" ٹیبلٹ)، res/layout-sw720dp/activity_main.xml (10" ٹیبلٹ)۔ Android smallestWidth کی بنیاد پر خود بخود درست لے آؤٹ منتخب کرتا ہے — سمت سے قطع نظر dp میں کم از کم اسکرین چوڑائی۔ کوالیفائر sw<N>dp موافقت کا سب سے مستحکم طریقہ ہے۔

// Jetpack Compose — موافقت کے لیے WindowSizeClass
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager (androidx.window لائبریری) تین چوڑائی کے زمروں کے ساتھ WindowSizeClass فراہم کرتا ہے: COMPACT (0–600 dp)، MEDIUM (600–840 dp)، EXPANDED (>840 dp)۔ یہ پرانے qualifier فولڈرز کا ایک جدید متبادل ہے۔ Google اسے فولڈ ایبل ڈیوائسز اور ٹیبلٹس کی موافقت کے لیے تجویز کرتا ہے۔

انکولی گرڈ اور breakpoints

انکولی گرڈ responsive design کی بنیاد ہے۔ مقررہ سائز کے بجائے، عناصر فیصد تناسب، لچکدار constraints اور اندرونی مواد کے سائز کا استعمال کرتے ہیں۔ Breakpoints اسکرین چوڑائی کے وہ نکات ہیں جن پر لے آؤٹ حالتوں کے درمیان سوئچ کرتا ہے۔

Google Material Design اور Apple HIG سے تجویز کردہ breakpoints: 0–599 dp (فون، ایک کالم)، 600–839 dp (ٹیبلٹ، دو کالم، navigation rail)، 840+ dp (ٹیبلٹ، تین کالم، navigation drawer)۔ Breakpoints کی تعداد 4 سے زیادہ نہیں ہونی چاہیے — ضرورت سے زیادہ منتقلی کے نکات دیکھ بھال اور جانچ کو مشکل بناتے ہیں۔

انکولی ڈیزائن کے بہترین طریقے

کامیاب responsive design کے لیے پچھلی دہائی میں iOS اور Android ڈویلپر کمیونٹی کی طرف سے تیار کردہ اصولوں کے ایک سیٹ پر عمل کرنا ضروری ہے۔ ذیل میں Apple HIG، Google Material Design اور پروڈکشن پروجیکٹ کے تجربے پر مبنی اہم سفارشات ہیں۔

• سب سے چھوٹی اسکرین سے شروع کریں — iPhone SE (375 pt) یا Android compact (360 dp) کے لیے لے آؤٹ ڈیزائن کریں، پھر بڑی اسکرینوں کے لیے توسیع شامل کریں۔ یہ یقینی بناتا ہے کہ اہم مواد ہر جگہ فٹ ہو
• اندرونی مواد کا سائز استعمال کریں — UILabel، UIButton، ImageView کے قدرتی سائز ہوتے ہیں۔ Auto Layout اور ConstraintLayout اضافی constraints کے بغیر خودکار پوزیشننگ کے لیے ان کا استعمال کرتے ہیں
• چھوٹی اسکرینوں پر مواد مت چھپائیں — چھپانے کے بجائے، دوبارہ ترتیب دیں (reflow)۔ صارف کو ایک ہی فعالیت تک رسائی ہونی چاہیے، صرف ایک مختلف ترتیب میں
• تمام Size Classes پر جانچ کریں — iOS سمیلیٹر بغیر دوبارہ شروع کیے Size Classes تبدیل کرنے کی اجازت دیتا ہے۔ Android Emulator مختلف ڈیوائس پروفائلز فراہم کرتا ہے۔ ٹیبلٹس اور فولڈ ایبل ڈیوائسز پر جانچ ضرور کریں
• Material 3 Adaptive Layout — Google فہرست/تفصیل، ٹول بار اور نیویگیشن کے لیے تیار canonical layouts فراہم کرتا ہے۔ اپنے پیٹرن ایجاد کرنے کے بجائے ان کا استعمال کریں

انکولی ڈیزائن کا بنیادی اصول: مواد لے آؤٹ کی وضاحت کرتا ہے، اس کے برعکس نہیں۔ اگر iPad iPhone کے جیسا کارڈ اسٹیک دکھاتا ہے، صرف چوڑا کھینچا ہوا — یہ responsive design نہیں ہے۔ Responsive design لے آؤٹ پر نظرثانی کرتا ہے: iPhone پر — عمودی اسکرول، iPad پر — سائڈبار کے ساتھ master-detail۔