বিভিন্ন স্ক্রিন সাইজের জন্য রেসপন্সিভ ও অ্যাডাপটিভ লেআউট

Responsive and adaptive layouts for different screen sizes

৯ মিনিট পড়া শুরু · Beginner Python কোডসহ সম্পূর্ণ বাংলায়

এক নজরে · TL;DR

রেসপন্সিভ (Responsive) লেআউট মানে একই কাঠামো বজায় রেখে উপাদানগুলো স্ক্রিন সাইজ অনুযায়ী স্কেল/রিফ্লো হয় — যেমন একটি টেক্সট কলাম প্রশস্ত স্ক্রিনে চওড়া হয়।
অ্যাডাপটিভ (Adaptive) লেআউট মানে নির্দিষ্ট সাইজ-ক্লাসের জন্য সম্পূর্ণ ভিন্ন কাঠামো ব্যবহার করা — যেমন ফোনে একটি লিস্ট-অনলি ভিউ, কিন্তু ট্যাবলেটে লিস্ট+ডিটেইল পাশাপাশি ভিউ।
স্ক্রিন প্রস্থকে সাধারণত তিনটি সাইজ ক্লাসে ভাগ করা হয় — compact (<৬০০dp), medium (৬০০-৮৪০dp), expanded (>৮৪০dp)।
নিচের কোড সেলে একটি সত্যিকারের ফাংশন স্ক্রিন প্রস্থ থেকে সাইজ ক্লাস ও গ্রিড কলাম সংখ্যা genuinely গণনা করে, একাধিক concrete প্রস্থের বিপরীতে পরীক্ষা করে।

এই পাঠে যা শিখবেন

রেসপন্সিভ ও অ্যাডাপটিভ লেআউটের মধ্যে মৌলিক পার্থক্য
compact/medium/expanded সাইজ-ক্লাস ব্রেকপয়েন্ট ও তাদের ব্যবহারিক তাৎপর্য
স্ক্রিন প্রস্থ থেকে সাইজ ক্লাস ও গ্রিড কলাম সংখ্যা genuinely গণনা করার একটি Python ফাংশন
কেন একটি ভালো মোবাইল অ্যাপকে ফোন থেকে ফোল্ডেবল থেকে ট্যাবলেট পর্যন্ত বিস্তৃত রেঞ্জ বিবেচনা করতে হয়

১ · রেসপন্সিভ বনাম অ্যাডাপটিভ

দুটো শব্দ প্রায়ই গুলিয়ে ফেলা হয়, কিন্তু এদের কৌশল ভিন্ন। রেসপন্সিভ লেআউট একটিমাত্র নমনীয় কাঠামো ব্যবহার করে যা যেকোনো প্রস্থে "মানিয়ে নেয়" — টেক্সট রিফ্লো হয়, একটি গ্রিডের কলাম স্বয়ংক্রিয়ভাবে প্রশস্ত/সংকীর্ণ হয়। অ্যাডাপটিভ লেআউট এর বদলে কয়েকটি সুনির্দিষ্ট "সাইজ ক্লাস"-এর জন্য আলাদা, পূর্ব-নকশাকৃত কাঠামো তৈরি করে — যেমন একটি ইমেইল অ্যাপ ফোনে শুধু ইনবক্স লিস্ট দেখায়, কিন্তু ট্যাবলেটে একই সাথে লিস্ট ও নির্বাচিত ইমেইলের বিস্তারিত পাশাপাশি দেখায়।

রেসপন্সিভ
একই লেআউট কাঠামো, উপাদান স্কেল/রিফ্লো হয় — বাস্তবায়ন সহজ, কিন্তু বড় স্ক্রিনে "সুযোগের পূর্ণ ব্যবহার" নাও হতে পারে।

অ্যাডাপটিভ
সাইজ-ক্লাস অনুযায়ী ভিন্ন কাঠামো — বড় স্ক্রিনে বেশি তথ্য/কার্যকারিতা একসাথে দেখানো সম্ভব হয়, কিন্তু প্রতিটি সাইজ ক্লাসের জন্য আলাদা ডিজাইন/টেস্টিং দরকার হয়।

২ · সাইজ ক্লাস ও ব্রেকপয়েন্ট

মোবাইল ডিভাইস ছোট ফোন থেকে বড় ফোল্ডেবল ও ট্যাবলেট পর্যন্ত বিস্তৃত রেঞ্জে আসে। স্ক্রিন প্রস্থকে তিনটি সুপরিচিত সাইজ ক্লাসে ভাগ করা প্রচলিত —

Compact
প্রস্থ < ৬০০dp — বেশিরভাগ ফোন পোর্ট্রেট মোডে। সাধারণত একটি একক কলাম/স্ট্যাক করা লেআউট।

Medium
প্রস্থ ৬০০dp-৮৪০dp — বড় ফোন ল্যান্ডস্কেপে, ছোট ট্যাবলেট, ফোল্ডেবল খোলা অবস্থায়। একাধিক কলাম শুরু হতে পারে।

Expanded
প্রস্থ > ৮৪০dp — বড় ট্যাবলেট, ডেস্কটপ-স্টাইল উইন্ডো। একাধিক কলাম, প্রায়ই লিস্ট+ডিটেইল প্যানেল একসাথে।

৩ · প্রস্থ থেকে লেআউট ভ্যারিয়েন্ট ও কলাম সংখ্যা গণনা

নিচের কোড সেলে choose_layout() ফাংশনটি একটি স্ক্রিন প্রস্থ ইনপুট নিয়ে genuinely তার সাইজ ক্লাস নির্ধারণ করে (উপরের ব্রেকপয়েন্ট অনুযায়ী branching), এবং একটি ন্যূনতম কলাম-প্রস্থ ধ্রুবক দিয়ে ভাগ করে গ্রিড কলাম সংখ্যা প্রকৃতপক্ষে গণনা করে — একাধিক concrete প্রস্থে পরীক্ষা করা হয়েছে।

Python

# স্ক্রিন প্রস্থ থেকে সাইজ ক্লাস ও গ্রিড কলাম সংখ্যা -- genuinely গণনা করা, শুধু নাম বসানো নয়

MIN_COLUMN_WIDTH_DP = 160  # প্রতিটি কলামের জন্য আরামদায়ক ন্যূনতম প্রস্থ

def classify_size(width_dp):
    if width_dp < 600:
        return "compact"
    elif width_dp <= 840:
        return "medium"
    else:
        return "expanded"

def compute_columns(width_dp):
    return max(1, width_dp // MIN_COLUMN_WIDTH_DP)

def choose_layout(width_dp):
    return {
        "width_dp": width_dp,
        "size_class": classify_size(width_dp),
        "columns": int(compute_columns(width_dp)),
    }

test_widths = [360, 411, 600, 720, 840, 1024, 1280]

print(f"{'প্রস্থ (dp)':12s} | {'সাইজ ক্লাস':10s} | কলাম সংখ্যা")
print("-" * 42)
for w in test_widths:
    layout = choose_layout(w)
    print(f"{layout['width_dp']:12d} | {layout['size_class']:10s} | {layout['columns']}")

লক্ষ্য করুন প্রস্থ ৮৪০dp-তে classify_size() "medium" রিটার্ন করে ("<=" ব্যবহার করার কারণে, ৮৪০ ঠিক সীমানায়), অথচ কলাম সংখ্যা তখনও 840 // 160 = 5 হয় — অর্থাৎ সাইজ ক্লাস ও কলাম সংখ্যা দুটো ভিন্ন গণনা, একটি অন্যটির উপর সরাসরি নির্ভর করে না। ৬০০dp-তে সাইজ ক্লাস "medium"-এ পরিণত হয় কারণ শর্তটি width_dp < 600, তাই ৬০০ ঠিক এই সীমার বাইরে পড়ে যায়।

মূল কথা · Key takeaway

রেসপন্সিভ ও অ্যাডাপটিভ পরস্পরবিরোধী নয় — বাস্তবে বেশিরভাগ ভালো মোবাইল অ্যাপ দুটোই একসাথে ব্যবহার করে: প্রতিটি সাইজ ক্লাসের ভেতরে রেসপন্সিভভাবে উপাদান স্কেল হয়, কিন্তু সাইজ ক্লাসের সীমানা পার হলে সম্পূর্ণ ভিন্ন (অ্যাডাপটিভ) কাঠামোতে পরিবর্তিত হয়। M5 (UI কম্পোনেন্ট)-এ এই ব্রেকপয়েন্ট ভিত্তি করে প্রকৃত widget tree তৈরি হবে।

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।

প্র ০১ একটি ফোল্ডেবল ডিভাইস খোলা অবস্থায় "medium" সাইজ ক্লাসে পড়তে পারে — এটি অ্যাপ ডেভেলপমেন্টে কী প্রভাব ফেলে?

এর মানে একটি অ্যাপকে শুধু "ফোন বনাম ট্যাবলেট" দুই বিভাগে ভাবলে চলবে না — একই ফিজিক্যাল ডিভাইস ব্যবহারকারী মুড়ে/খুলে রানটাইমে সাইজ ক্লাস পরিবর্তন করতে পারে। তাই লেআউট লজিককে স্ট্যাটিক ডিভাইস-টাইপ চেকের বদলে বর্তমান প্রস্থের উপর ভিত্তি করে ডায়নামিকভাবে পুনর্মূল্যায়ন করতে হয় — ঠিক যেমন উপরের choose_layout() ফাংশন যেকোনো মুহূর্তের প্রস্থ ইনপুট নিয়ে কাজ করে।

প্র ০২ একটি অ্যাপ শুধু রেসপন্সিভ (কখনো অ্যাডাপটিভ নয়) হলে ট্যাবলেটে ব্যবহারকারীর অভিজ্ঞতায় কী সীমাবদ্ধতা থাকতে পারে?

একটি সম্পূর্ণ রেসপন্সিভ কিন্তু কখনো অ্যাডাপটিভ নয় এমন অ্যাপ ট্যাবলেটে হয়তো একই সিঙ্গেল-কলাম লেআউট শুধু বড় আকারে দেখাবে — বড় স্ক্রিনের অতিরিক্ত জায়গা কার্যকরভাবে ব্যবহৃত না হয়ে ফাঁকা মার্জিন বা অস্বাভাবিক বড় উপাদান হিসেবে "নষ্ট" হতে পারে। অ্যাডাপটিভ লেআউট (যেমন লিস্ট+ডিটেইল পাশাপাশি দেখানো) সেই একই জায়গাকে অতিরিক্ত কার্যকারিতার জন্য ব্যবহার করতে পারে।

প্র ০৩ উপরের কোডে compute_columns()-এ max(1, ...) ব্যবহার করা হয়েছে কেন — width_dp // MIN_COLUMN_WIDTH_DP সরাসরি রিটার্ন করলে কী সমস্যা হতো?

যদি প্রস্থ MIN_COLUMN_WIDTH_DP (১৬০dp)-এর চেয়ে কম হয় (যেমন একটি খুব ছোট স্মার্টওয়াচ-স্টাইল স্ক্রিন, প্রস্থ ১২০dp), তাহলে 120 // 160 = 0 — অর্থাৎ শূন্য কলাম, যা অর্থহীন (একটি স্ক্রিনে অন্তত একটি কলাম থাকতেই হবে)। max(1, ...) নিশ্চিত করে ফলাফল কখনো ১-এর কম না হয়, এমনকি অস্বাভাবিকভাবে ছোট প্রস্থের জন্যও।

অনুশীলন

চিন্তা করুন: আপনার পরিচিত কোনো অ্যাপ (যেমন একটি ইমেইল বা ফাইল ম্যানেজার অ্যাপ) কল্পনা করুন এবং ভাবুন এটি compact, medium, ও expanded — তিনটি সাইজ ক্লাসে কেমন দেখতে হওয়া উচিত।

একটি সাধারণ প্যাটার্ন: compact-এ শুধু লিস্ট দেখানো (আইটেম ট্যাপ করলে নতুন স্ক্রিনে ডিটেইল খোলে), medium-এ হয়তো লিস্ট কিছুটা চওড়া হয়ে দুই-কলাম গ্রিড হতে পারে, এবং expanded-এ লিস্ট ও ডিটেইল প্যানেল স্থায়ীভাবে পাশাপাশি দেখানো — নেভিগেশনে একটি অতিরিক্ত "স্ক্রিন পরিবর্তন" ধাপ ছাড়াই।
পরীক্ষা করুন: উপরের কোড সেলে MIN_COLUMN_WIDTH_DP-এর মান ১৬০ থেকে ২৪০-এ পরিবর্তন করুন, তারপর আবার চালিয়ে দেখুন 1024dp প্রস্থে কলাম সংখ্যা কীভাবে বদলায়।

MIN_COLUMN_WIDTH_DP = 240 হলে, 1024 // 240 = 4 (আগে ১৬০ দিয়ে ছিল 1024 // 160 = 6) — অর্থাৎ প্রতিটি কলামকে বেশি প্রশস্ত রাখতে চাইলে একই প্রস্থে কম কলাম বসবে। এটি দেখায় কীভাবে একটি একক ধ্রুবক পরিবর্তন করে পুরো গ্রিডের "ঘনত্ব" নিয়ন্ত্রণ করা যায়।