SwiftUI ট্যাব ভিউতে কাস্টম ইমেজ ব্যবহার করা

সাধারণত ট্যাব ভিউতে আমরা SF Symbosl ব্যবহার করি। কিন্তু চাইলে আমরা যে কোন ইমেজ আইকন হিসেবে ব্যবহার করতে পারি। তার জন্য Assets.xcassets ফোল্ডারে নির্দিষ্ট ইমেজ রাখতে হবে। এরপর ঐ ইমেজ আমরা ব্যবহার করতে পারব। যেমনঃ

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image("home_icon")
                    Text("Home")
                }

            ProfileView()
                .tabItem {
                    Image("profile_icon")
                    Text("Profile")
                }
        }
    }
}

struct HomeView: View {
    var body: some View {
        Text("Home Screen")
    }
}

struct ProfileView: View {
    var body: some View {
        Text("Profile Screen")
    }
}

#Preview{
    ContentView()
}

এই আইকনের জন্য ব্যবহৃত ইমেজের সাইজ হতে হবে 24*24 পিক্সেল। সব গুলো স্ক্রিনে সুন্দর মত দেখাতে চাইলে 1x, 2x, 3x সাইজের ইমেজ Assets.xcassets ফোল্ডারে রাখতে হবে।

ResolutionSize (pixels)Description
1x (Standard)24×24নন রেটিনা ডিসপ্লে এর জন্য
2x (Retina)48×48রেটিনা ডিসপ্লে এর জন্য
3x (Super Retina)72×72 সুপার রেটিনা ডিসপ্লে এর জন্য

যেমনঃ

এরপর এই ইমেজ আমরা ট্যাবভিউতে ব্যবহার করতে পারব। ইমেজ আইকনের কালার অ্যাপের টিন্ট কালার অনুযায়ী পরিবর্তন করতে চাইলে .renderingMode(.template) মডিফায়ার ব্যবহার করতে পারি।

       Image("image_name")
        .renderingMode(.template)

বিদ্রঃ ট্যাব ভিউর ভেতর ইমেজ আইকনের ক্ষেত্রে resizable এবং frame মডিফায়ার কাজ করে না। তাই ইমেজকে আগেই রিসাইজ করে নিতে হবে।

একটা ইমেজকে ট্যাবভিউর জন্য রিসাইজ করার জন্য একটা ছোট্ট পাইথন স্ক্রিপ্ট লিখে নিয়েছিঃ

from PIL import Image
import os

def generate_icon_sizes(input_image_path, output_folder):
    # Output sizes in pixels for 1x, 2x, and 3x
    sizes = {
        "1x": (24, 24),
        "2x": (48, 48),
        "3x": (72, 72)
    }

    # Check if output folder exists, create if not
    if not os.path.exists(output_folder):
        os.makedirs(output_folder)

    # Open the input image
    try:
        with Image.open(input_image_path) as img:
            for scale, size in sizes.items():
                resized_img = img.resize(size, Image.Resampling.LANCZOS)  # Updated here
                # Save resized image
                base_name = os.path.basename(input_image_path)
                name, ext = os.path.splitext(base_name)
                output_path = os.path.join(output_folder, f"{name}_{scale}{ext}")
                resized_img.save(output_path)
                print(f"Saved {scale} image at: {output_path}")
    except Exception as e:
        print(f"Error: {e}")

# Example usage
input_image = "image_name.png"  # Replace with your input file
output_directory = "output_icons"
generate_icon_sizes(input_image, output_directory)

এখানে pillow লাইব্রেরী ইউজ করা হয়েছে। তা ইন্সটল করা না থাকলে এভাবে ইন্সটল করে নেওয়া যাবেঃ

pip install pillow

উপরের স্ক্রিপ্টে শুধু মাত্র একটা ইমেজকে রিসাইজ করবে। আমরা চাইলে একটা ফোল্ডারে থাকা সব গুলো ইমেজকে রিসাইজ করে নিতে পারিঃ

from PIL import Image
import os

def generate_icon_sizes_from_folder(input_folder, output_folder):
    # Output sizes in pixels for 1x, 2x, and 3x
    sizes = {
        "1x": (24, 24),
        "2x": (48, 48),
        "3x": (72, 72)
    }

    # Check if output folder exists, create if not
    if not os.path.exists(output_folder):
        os.makedirs(output_folder)

    # Loop through all files in the input folder
    for file_name in os.listdir(input_folder):
        input_image_path = os.path.join(input_folder, file_name)
        
        # Skip non-image files
        if not os.path.isfile(input_image_path):
            continue
        
        try:
            with Image.open(input_image_path) as img:
                for scale, size in sizes.items():
                    resized_img = img.resize(size, Image.Resampling.LANCZOS)
                    
                    # Save resized image
                    name, ext = os.path.splitext(file_name)
                    output_file_name = f"{name}_{scale}{ext}"
                    output_path = os.path.join(output_folder, output_file_name)
                    resized_img.save(output_path)
                    print(f"Saved {scale} image at: {output_path}")
        except Exception as e:
            print(f"Error processing {file_name}: {e}")

# Example usage
input_directory = "input_folder"  # Replace with the path to your input folder
output_directory = "output_folder"  # Replace with the path to your output folder
generate_icon_sizes_from_folder(input_directory, output_directory)

ভেক্টর ইমেজ ট্যাব ভিউতে ব্যবহার করা

আমরা চাইলে SVG / ভেক্টর ইমেজ ট্যাবভিউতে ব্যবহার করতে পারি। তার জন্য রেগুলার ইমেজের মতই ভেক্টর ইমেজ Assets.xcassets রাখব। এরপর Image() ভিউতে ভেক্টর ইমেজটির নাম দিয়ে ব্যবহার করতে পারবঃ

       Image("image_name")

ইমেজের মত আইকনের কালার অ্যাপের টিন্ট কালার অনুযায়ী পরিবর্তন করতে চাইলে .renderingMode(.template) মডিফায়ার ব্যবহার করতে পারি।

ভেক্টর ইমেজের ক্ষেত্রেও ট্যাবভিউতে ব্যবহার করার ক্ষেত্রে আগে রিসাইজ করে নিতে হবে। ভেক্টর ইমেজ যে কোন টেক্সট এডিটরে ওপেন করে রিসাইজ করে নেওয়া যাবে।

ফাইলের শুরুতেই সাইজ মডিফায়ার থাকার কথা।

যেহেতু ভেক্টর ইমেজ ডিভাইস অনুযায়ী স্কেল করে নেওয়া যায়। আমাদের আলাদা আলাদা সাইজের ভেক্টর ইমেজের দরকার পড়বে না। এ জন্য Assets.xcassets এ গিয়ে SVG ইমেজটির Attribute Inspector থেকে “Scales” প্রোপার্টি Single Scale এ পরিবর্তন করে নিতে হবে।

এই স্টেপ অপশনাল। অ্যাপে ব্যবহারের জন্য দরকারি ভেক্টর আইকন svgrepo.com থেকে ডাউনলোড করতে পারেন।

Leave a Reply