সুইফট ইউআই অ্যাপে কিভাবে ফুল উইডথ ইমেজ বা কালার ব্যাকগ্রাউন্ড ব্যবহার করা যায়, তাই শিখব। যে কোন ভিউ এর ব্যাকগ্রাউন্ড সেট করি আমরা .background() মডিফায়ার ব্যবহার করে। যেমনঃ

Text("Hello, world!")
                .background(.blue)

যা ব্যবহার করলে টেক্সট ভিউটির ব্যাকগ্রাউন্ডে ব্লু কালার দেখাবে। এখন একই টেক্সট ভিউর ফ্রেম সাইজ পরিবর্তন করলেই পুরো পেইজের ব্যাকগ্রাউন্ড পরিবর্তন হয়ে যাবেঃ

      Text("Hello, world!")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(.blue)

আমরা দেখব প্রায় পুরা স্ক্রিনের ব্যাকগ্রাউন্ড নীল হয়ে গেছে।

এখানে শুধু মাত্র একটা মাত্র ভিউ ছিল। তাই স্ক্রিনের পুরো যায়গার ব্যাকগ্রাউন্ড পরিবর্তন হয়ে গেছে। সাধারণত একটা স্ক্রিনে একাধিক ভিউ থাকতে পারে। আর সে ক্ষেত্রে আমরা এই ফুল পেইজ ব্যাকগ্রাউন্ডের জন্য কন্টেইনার ভিউ যেমন VStack এ এই .background() মডিফায়ার ব্যবহার করব। এরকমঃ

import SwiftUI
struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) 
        .background(.blue)
    }
}

অনেক সহজ, তাই না?

এখন আমরা চাইলে ইমেজও ব্যবহার করতে পারি। উপড়ে .background মডিফায়ারে কালারের পরিবর্তে ইমেজ ব্যবহার করব। ইমেজ ব্যবহার করার পূর্বে ঐ নামের একটা ইমেজ Assets.xcassets এ কপি করতে হবে। ড্র্যাগ & ড্রপ করেও রাখা যাবে।

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
        Image("background")
            .resizable()
            .scaledToFill()
            .opacity(0.5)
            .ignoresSafeArea()
        )
    }
}

এখানে  .ignoresSafeArea() দিয়ে নচ বা ক্যামেরার পেছনের অংশেও ব্যাকগ্রাউন্ড এপ্লাই করা হয়েছে। এবং .opacity(0.5) গুরুত্বপূর্ণ না। ইমেজের উপরের কন্টেন্ট গুলো সুন্দর মত যেনো পড়তে পারি, তাই opacity ব্যবহার করেছি। আউটপুট পাবো এমনঃ

উপরে আমরা প্যারেন্ট কন্টেইনারে .background মডিফায়ার ব্যবহার করে ব্যাকগ্রাউন্ড সেট করেছি। আমরা চাইলে ZStack ব্যবহার করেও ব্যাকগ্রাউন্ড সেট করতে পারি।

ZStack ব্যবহার করে ফুল উইডথ ব্যাকগ্রাউন্ড ইমেজ

ZStack এর মধ্যে চাইল্ড গুলো একটা আরেকটার উপর স্ট্যাক আকারে থাকে। তাই প্রথমে যে ভিউ আমরা সেট করব, তা পেছনে থাকবে। এরপর নতুন ভিউ যোগ করলে ঐ ভিউর উপরে সেট হবে।

এখন শুরুতে যদি একটা ফুল ওয়াইড কালার বা ইমেজ সেট করি, এরপর আরেকটা ভিউতে কনেন্ট গুলো রাখি, তাহলে প্রথম ভিউটা ব্যাকগ্রাউন্ড হিসেবে কাজ করবে।

ফুল পেইজ কালার ব্যাকগ্রাউন্ডের জন্য আমরা এভাবেও লিখতে পারিঃ

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack{
            Color.blue
                .ignoresSafeArea()
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }           
        }
    }
}

ZStack এর প্রথম চাইল্ড Color.blue.ignoresSafeArea()। তাই এটি ব্যাকগ্রাউন্ড হিসেবে কাজ করেছে। এরপর VStack এ আমরা অন্য কনেন্ট গুলো রেখেছি।

ইমেজও ব্যবহার করতে পারি একই ভাবেঃ

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack{
            Image("background")
                .resizable()
                .scaledToFill()
                .opacity(0.5)
                .ignoresSafeArea()
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Hello, world!")
            }
        }
    }
}

একই রকম আউটপুট পাবো।

FullWidthBackground সোর্স কোড। আইওএস অ্যাপ ডেভেলপমেন্ট নিয়ে অন্যান্য লেখা।