Xcode میں Canvas — یہ کیا ہے، SwiftUI ایڈیٹر اور پیش منظر کے ساتھ کام

Xcode میں Canvas کیا ہے؟

Canvas Xcode میں ایک بلٹ ان پیش منظر ایڈیٹر ہے، جو پہلی بار SwiftUI کے ساتھ Xcode 11 میں متعارف کرایا گیا تھا۔ یہ کوڈ کے ساتھ ایڈیٹر کے دائیں پینل میں واقع ہے اور موجودہ SwiftUI View کا لائیو پیش منظر دکھاتا ہے۔ Canvas ریئل ٹائم میں کام کرتا ہے: کوڈ میں ہر تبدیلی دستی دوبارہ کمپائلیشن کے بغیر فوری طور پر پیش منظر میں جھلکتی ہے۔

فن تعمیر کے لحاظ سے، Canvas ایک علیحدہ پروسیس (Preview Provider Extension) ہے جسے Xcode Canvas کھولنے پر شروع کرتا ہے۔ یہ پروسیس کمپائل شدہ PreviewProvider کو لوڈ کرتا ہے، Metal کے ذریعے نتیجہ رینڈر کرتا ہے، اور ایڈیٹر پینل میں دکھاتا ہے۔ اگر PreviewProvider لاگو نہیں کیا گیا تو Canvas «Preview paused — No preview provider found» پلیس ہولڈر دکھاتا ہے۔

Canvas انٹرفیس

Canvas انٹرفیس میں ڈیوائس انتخاب، سمت، رنگ سکیم اور پیمانے کے اختیارات والا ٹول بار شامل ہے۔ Live Preview، Selectable اور Embed In Diagram بٹن تعامل کے طریقوں کو تبدیل کرتے ہیں۔ Canvas سپلٹ ویو کو سپورٹ کرتا ہے: آپ ایک ہی ورک اسپیس میں مختلف فائلوں کے لیے متعدد Canvas کھول سکتے ہیں۔

انٹرایکٹو Canvas کیسے کام کرتا ہے

Live Preview Canvas کی اہم خصوصیت ہے جو پیش منظر کو انٹرایکٹو بناتی ہے۔ اس موڈ میں، Canvas View کو علیحدہ پروسیس میں رینڈر کرتا ہے اور اشاروں (ٹیپ، سوائپ، اسکرول) کو SwiftUI رن ٹائم میں واپس بھیجتا ہے۔ صارف سمیلیٹر شروع کیے بغیر بٹن دبا سکتا ہے، ٹیکسٹ فیلڈ بھر سکتا ہے اور نیویگیشن ٹیسٹ کر سکتا ہے۔

SwiftUI Canvas میں اشاروں کو اسی ایونٹ سسٹم کے ذریعے پروسیس کرتا ہے جو حقیقی ڈیوائس پر ہوتا ہے۔ فرق کارکردگی میں ہے: Canvas Metal کے ذریعے سافٹ ویئر رینڈرنگ استعمال کرتا ہے، جبکہ سمیلیٹر ہوسٹ گرافکس استعمال کرتا ہے۔ اس کا مطلب ہے کہ Canvas میں پیچیدہ اینیمیشن سست چل سکتی ہیں یا بصری طور پر مختلف نظر آ سکتی ہیں۔

Canvas اپ ڈیٹ کا عمل

Canvas اپ ڈیٹ تین مراحل میں ہوتا ہے۔ پہلے، Xcode فائل کی تبدیلی کا پتہ لگاتا ہے اور صرف تبدیل شدہ PreviewProvider کو تدریجی طور پر کمپائل کرتا ہے۔ پھر نیا بائنری ماڈیول PreviewProviderExtension پروسیس میں لوڈ ہوتا ہے۔ آخر میں، SwiftUI View کو دوبارہ تخلیق کرتی ہے اور اسے Metal کے ذریعے رینڈر کرتی ہے۔ پورا چکر View کی پیچیدگی کے لحاظ سے 0.5–2 سیکنڈ لیتا ہے۔

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Tapped \(count) times") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

انٹرایکٹیویٹی: جب Live Preview چل رہا ہوتا ہے، Canvas میں بٹن ایک حقیقی بٹن کی طرح کام کرتا ہے — ہر ٹیپ پر کاؤنٹر بڑھتا ہے اور دبانے کی اینیمیشن دکھائی دیتی ہے۔ یہ سمیلیٹر کے بغیر بٹن کی منطق کو جانچنے کی اجازت دیتا ہے۔

Canvas ترتیب

Canvas کی بنیادی ترتیبات Editor → Canvas مینو یا Canvas ٹول بار بٹن کے ذریعے دستیاب ہیں۔ اہم اختیارات میں ڈیوائس کا انتخاب، سمت، ڈارک تھیم اور ڈائنامک ٹائپ پیمانہ شامل ہیں۔ مستقل ترتیبات کے لیے، کوڈ میں PreviewProvider موڈیفائر استعمال کریں۔

جدید ترتیبات میں شامل ہیں: Auto Activate Preview — SwiftUI فائل کھولنے پر خودکار Canvas فعال کرنا؛ Live Preview — اشاروں کا موڈ؛ Draw Live Edges — ویو کی حدود دکھانا؛ Show Preview Sizes — پیش منظر کے علاقے کا سائز۔ Xcode ان ترتیبات کو ورک اسپیس/پروجیکٹ فائلوں میں پورٹیبل طریقے سے محفوظ کرتا ہے۔

PreviewProvider کے ذریعے ترتیب

پروگرامیٹک ترتیب Canvas پر زیادہ درست کنٹرول دیتی ہے۔ پیش منظر میں لاگو کردہ موڈیفائر ٹول بار کی ترتیبات کو اوور رائیڈ کرتے ہیں اور کوڈ میں محفوظ ہو جاتے ہیں — تمام ٹیم ممبران انہیں git کے ذریعے دیکھتے ہیں۔

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout .device کے ساتھ پوری ڈیوائس اسکرین دکھاتا ہے، جبکہ .sizeThatFits مواد کے مطابق سائز کے ساتھ ایک کمپیکٹ پیش منظر دکھاتا ہے۔ ویجٹ اور چھوٹے اجزاء کے لیے .sizeThatFits استعمال کریں — یہ ایڈیٹر میں جگہ بچاتا ہے۔

Canvas کے ساتھ کام کرنے کی مثالیں

مثال 1: موافقت کی جانچ۔ اس بات کو یقینی بنانے کے لیے کہ انٹرفیس تمام اسکرینوں پر اچھا لگتا ہے، متعدد ڈیوائسز اور کلر سکیم کے ساتھ ForEach استعمال کریں۔ Canvas تمام پیش منظر کو ایک ساتھ اپ ڈیٹ کرتا ہے، جس سے سمیلیٹر شروع کرنے سے پہلے لے آؤٹ کے مسائل کا پتہ لگایا جا سکتا ہے۔

مثال 2: ڈیٹا کے ساتھ پیش منظر۔ متحرک مواد (فہرستیں، پروفائلز، کارڈز) دکھانے والی Views کے لیے، پیش منظر میں مختلف ڈیٹا کے ساتھ متعدد انسٹینسز بنائیں۔ یہ سمیلیٹر میں اسکرینوں کے درمیان سوئچ کرنے اور ڈیٹا درج کرنے سے تیز ہے۔

مختلف حالتوں کے ساتھ پیش منظر

پیش منظر گروپ Group یا ForEach کے ذریعے ایک پینل پر تمام کمپوننٹ حالتیں دکھانے کی اجازت دیتا ہے۔ فہرستوں کے لیے یہ خاص طور پر آسان ہے: خالی فہرست، لوڈنگ، خرابی اور بھری ہوئی فہرست ایک ساتھ دکھائی دیتی ہیں۔

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas بمقابلہ سمیلیٹر — موازنہ

Canvas اور سمیلیٹر ایک دوسرے کی تکمیل کرتے ہیں، نہ کہ ایک دوسرے کی جگہ لیتے ہیں۔ Canvas لے آؤٹ کے دوران تیز رفتار تکرار کے لیے مثالی ہے: فوری فیڈ بیک کے ساتھ کوڈ میں ترمیم کریں۔ سمیلیٹر حتمی تصدیق کے لیے ضروری ہے: حقیقی کارکردگی، حسب ضرورت اشارے، سسٹم الرٹس اور ہارڈویئر فیچرز (کیمرہ، سینسرز) کے ساتھ انضمام۔

WWDC 2024 کے مطابق، Apple Canvas کو ابتدائی ترقی کے مرحلے کے لیے اور سمیلیٹر کو انٹیگریشن ٹیسٹنگ کے لیے ایک آلے کے طور پر پیش کرتا ہے۔ UI ترقی کے 60% وقت Canvas میں اور 40% — سمیلیٹر یا ڈیوائس پر ٹیسٹ کرنے میں گزارنے کی سفارش کی جاتی ہے۔

سفارش: Canvas میں ڈیزائن کریں، سمیلیٹر پر ٹیسٹ کریں۔ بٹنوں اور نیویگیشن کے اشاروں کی منطق کے لیے Live Preview استعمال کریں، لیکن اینیمیشن، نیٹ ورک کی درخواستوں اور ہارڈویئر فنکشنز کا حتمی ٹیسٹ سمیلیٹر یا حقیقی ڈیوائس پر کریں۔

Canvas کے ساتھ کام کرنے کے نکات

نکتہ 1: قابل انتخاب موڈ استعمال کریں۔ قابل انتخاب موڈ (کرسر آئیکن) میں، آپ پیش منظر کے کسی بھی عنصر پر کلک کر کے انسپکٹر میں اس کا درجہ بندی، موڈیفائر اور فریم دیکھ سکتے ہیں۔ یہ لے آؤٹ ڈیبگنگ کے لیے مفید ہے: آپ پرنٹ کیے بغیر فوری طور پر پیڈنگ، آفسیٹ اور عنصر کا سائز دیکھتے ہیں۔

نکتہ 2: Embed In Diagram۔ Canvas عناصر کو گروپ کر سکتا ہے: دو یا زیادہ Views منتخب کریں، Embed In Diagram پر کلک کریں — Canvas VStack/HStack/ZStack بنائے گا اور کوڈ خود بخود دوبارہ ترتیب دے گا۔ یہ دستی طور پر بریکٹ ٹائپ کیے بغیر پیچیدہ درجہ بندی بنانے میں تیزی لاتا ہے۔

نکتہ 3: Canvas پیش منظر کیشے صاف کریں۔ اگر Canvas اپ ڈیٹ ہونا بند کر دے تو Product → Preview Cache صاف کریں۔ Xcode کیشڈ PreviewProvider بائنریز کو حذف کر دے گا اور انہیں شروع سے دوبارہ بنائے گا۔ یہ Canvas منجمد ہونے کے 90% مسائل حل کرتا ہے۔

Canvas رفتار کو بہتر بنانا

سست Canvas عام طور پر پیش منظر کی ضرورت سے زیادہ تعداد کی وجہ سے ہوتا ہے۔ پیچیدہ Views کے لیے، 6–8 کے گروپ کے بجائے صرف ایک پیش منظر استعمال کریں۔ اشاروں کے بغیر Views کے لیے Live Preview بند کریں — جامد موڈ تیزی سے رینڈر ہوتا ہے۔ یقینی بنائیں کہ PreviewProvider حقیقی نیٹ ورک کی درخواستوں کے بجائے نقلی ڈیٹا استعمال کرتا ہے۔

// Quick debug: minimal preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) Canvas کا تیز ترین موڈ ہے کیونکہ یہ ڈیوائس کی سرحدوں کے بغیر صرف View کا مواد رینڈر کرتا ہے۔ روزانہ لے آؤٹ کام کے لیے اسے استعمال کریں، صرف حتمی جانچ کے لیے .device کو فعال کریں۔