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 টুলবার বাটনের মাধ্যমে উপলব্ধ। মূল অপশনের মধ্যে ডিভাইস নির্বাচন, ওরিয়েন্টেশন, ডার্ক থিম এবং Dynamic Type স্কেল অন্তর্ভুক্ত। স্থায়ী সেটিংসের জন্য, কোডে 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: Selectable মোড ব্যবহার করুন। Selectable মোডে (কার্সর আইকন), আপনি প্রিভিউর যেকোনো এলিমেন্টে ক্লিক করে ইন্সপেক্টরে তার হায়ারার্কি, মডিফায়ার এবং ফ্রেম দেখতে পারেন। এটি লেআউট ডিবাগিংয়ের জন্য দরকারী: আপনি প্রিন্ট ছাড়াই তাৎক্ষণিকভাবে প্যাডিং, অফসেট এবং এলিমেন্টের আকার দেখতে পান।

টিপ 2: Embed In Diagram। Canvas এলিমেন্ট গ্রুপ করতে পারে: দুই বা ততোধিক Views নির্বাচন করুন, Embed In Diagram ক্লিক করুন — Canvas VStack/HStack/ZStack তৈরি করবে এবং কোড স্বয়ংক্রিয়ভাবে পুনর্নির্মাণ করবে। এটি ম্যানুয়ালি ব্র্যাকেট টাইপ না করেই জটিল হায়ারার্কি তৈরি দ্রুত করে।

টিপ 3: Canvas Preview Cache সাফ করুন। যদি 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 চালু করুন।