Linear, Relative, Constraint, Table, Frame এবং আরও অনেক লেআউট রয়েছে Android-এ। অ্যাপ্লিকেশন ডিজাইন করার সময় আপনার সামনে অনেক অপশন থাকে। প্রশ্ন হলো, কোনটি সবচেয়ে ভালো?
বিভিন্ন লেআউটের বিস্তারিত জানার আগে, প্রথমে View অবজেক্ট হায়ারার্কি এবং Android-এর ড্রইং প্রসেস নিয়ে আলোচনা করি।
View এবং ViewGroup
ViewGroup কে যেকোনো ভিউর প্যারেন্ট ক্লাস এবং লেআউটের বেস ক্লাস হিসেবে চিন্তা করুন। এটি অন্য ভিউদের ধারক একটি অবজেক্ট রিপ্রেজেন্ট করে। উদাহরণস্বরূপ, LinearLayout একটি ViewGroup কারণ এটি ভিউ এবং অন্যান্য লেআউট ধারণ করতে পারে।
অন্যদিকে, View হলো UI এলিমেন্টের বেসিক বিল্ডিং ব্লক। ভিউগুলো ViewGroup-এর অংশ হতে পারে। উদাহরণস্বরূপ, TextView একটি View।
Measure → Layout → Draw → Repeat
লেআউটগুলো Android-এ XML ফাইল হিসেবে সংরক্ষিত থাকে। কিন্তু এগুলো স্ক্রিনে দেখা অবজেক্টে কীভাবে রূপান্তরিত হয়? প্রতিটি XML ফাইল ইনস্ট্যানশিয়েট (inflate) হয় এবং একটি ভিউ হায়ারার্কি ট্রি তৈরি হয়। এর মানে যদি আপনার লেআউট B, লেআউট A-এর ভিতরে নেস্টেড থাকে, তবে তাদের চাইল্ড-প্যারেন্ট সম্পর্ক থাকবে (লেআউট A, লেআউট B-এর প্যারেন্ট)। ট্রি তৈরি হলে তিনটি ফেজ ঘটে: Measure, Layout এবং Draw। প্রতিটি ফেজ Depth First Search অর্ডারে ট্রি ট্রাভার্স করে।
Measure
প্রথম ফেজে, প্রতিটি প্যারেন্ট নোড তার চাইল্ডদের আকার সংক্রান্ত কনস্ট্রেইন বা সীমাবদ্ধতা বের করে। এগুলো নিচের দিকে পাস করে, যেখানে প্রতিটি চাইল্ড নিজের পছন্দের আকার (কত বড় হতে চায়) নির্ধারণ করে এবং পাস করা সীমাবদ্ধতা ও নিজের চাইল্ডদের সীমাবদ্ধতা বিবেচনা করে।
Layout
এখানে প্রতিটি নোড তার চাইল্ডদের স্ক্রিনে ফাইনাল আকার এবং পজিশন নির্ধারণ করে।
Draw
রুট নোড থেকে শুরু করে, যা নিজে ড্র করে, তারপর তার চাইল্ডদের ড্র করতে বলে। এইভাবে প্যারেন্ট প্রথমে ড্র হয় এবং তার চাইল্ডগুলো তার উপরে ড্র হয়।
উপরোক্ত প্রসেস ধরে রেখে, আপনার অ্যাপ্লিকেশনের লেআউট যতটা সম্ভব শ্যালো (shallow) রাখার চেষ্টা করুন যাতে ভিউ হায়ারার্কি ট্রাভার্স করতে লেগে وقت কম যায়
Layouts Breakdown
Linear
এটি তার চাইল্ডগুলোকে একটি সারি/সারি হিসেবে আর্গানাইজ করে, অরিয়েন্টেশন vertical বা horizontal। অর্থাৎ, ভিউগুলো হয় এক সারি থাকবে বা এক কলামে। দিকনির্দেশ নির্দিষ্ট করতে android:orientation অ্যাট্রিবিউট ব্যবহার করুন।
Linear Layout-এর একটি আকর্ষণীয় ফিচার হলো layout_weight অ্যাট্রিবিউট। এটি Linear Layout-কে বলে কীভাবে চাইল্ড ভিউদের মধ্যে স্পেস ভাগ করবে। এটি কাজে আসে যখন আপনি আপনার লেআউটকে ডিভাইস এবং অরিয়েন্টেশনের মধ্যে কনসিস্টেন্ট রাখতে চান।
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="World!" /> </LinearLayout>
মান लीজिए আপনি চান প্রথম TextView (যে "Hello" শব্দটি ধারণ করে) সবসময় স্ক্রিনের প্রস্থের 3/4 অংশ দখল করবে। এর জন্য layout_weight ব্যবহার করা যাবে।
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="4" // <-- আমাদের লেআউটের জন্য টোটাল ওয়েট যোগ করলাম (4) tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="3" // <-- ৪ এর মধ্যে ৩ ওয়েট পাবে (3/4) android:text="Hello" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="World!" android:layout_weight="1" // <-- ৪ এর মধ্যে ১ ওয়েট পাবে (1/4) /> </LinearLayout>
Relative
নাম অনুযায়ী, এই লেআউট তার ভেতরের চাইল্ড ভিউগুলোকেRelative position-এ সেট করে। এটি আপনার লেআউট হায়ারার্কি ফ্ল্যাট রাখতে পারে নেস্টেড ভিউ গ্রুপ ছাড়া। একই সাথে, প্রতিটি Relative Layout-কে দুই Measure pass-এর প্রসেস থেকে গুজরতে হয়, যা পারফরম্যান্সে প্রভাব ফেলতে পারে।
RelativeLayout-এর একটি উপকারী ফিচার হলো centerInParent অ্যাট্রিবিউট ব্যবহার করে চাইল্ড ভিউকে কেন্দ্রে রাখা।
Constraint
একটি constraint হলো একটি সংযোগ বা অ্যালাইনমেন্ট যেখানে constraint টাই করা থাকে। আপনি প্রতিটি চাইল্ড ভিউর জন্য বিভিন্ন constraint ডিফাইন করেন অন্য ভিউদের সাপেক্ষে। এটি আপনাকে কমপ্লেক্স লেআউট তৈরি করতে দেয় ফ্ল্যাট ভিউ হায়ারার্কির সাথে (নেস্টেড ViewGroup ছাড়া)। RelativeLayout-এর মতো, এই লেআউটটিও দুই Measure pass প্রয়োজন।
Frame
এই লেআউট শুধু একটি সিঙ্গল চাইল্ড ভিউ ধারণ করতে ব্যবহৃত হয়, এই লেআউটে অন্য কোনো ভিউ ব্লক করে দেয়। লেআউটটি নিজের সবচেয়ে বড় চাইল্ড ভিউ (দৃশ্যমান বা অদৃশ্য) যত বড়, তার প্লাস কিছু প্যাডিং তত বড় হয়।
FrameLayout-এ একাধিক চাইল্ড ভিউ রাখা এড়িয়ে চলুন কারণ চাইল্ড ভিউগুলো একে অপরকে ওভারল্যাপ করাতে পারে। আপনি এই চাইল্ড ভিউদের পজিশন কন্ট্রোল করতে পারেন layout_gravity অ্যাট্রিবিউট প্রতিটিতে অ্যাসাইন করে।
List View / Grid View
যখন স্ক্রিনে একাধিক আইটেম প্রেজেন্ট করার প্রয়োজন হয় (যেমন রেস্তোরাঁ মেনু)। List View হলো একটি সিঙ্গল কলাম লিস্ট যা ব্যবহারকারী স্ক্রল করতে পারে। Grid View-কে List View-এর মতো ভাবুন কিন্তু একাধিক কলামের সাথে।
এই লেআউটগুলো সম্পর্কে জানা গুরুত্বপূর্ণ যে, ভিউগুলো ডাইনামিক এবং রানটাইমে তৈরি হয়। রানটাইমে আইটেমগুলো পপুলেট করতে AdapterView ব্যবহার করতে হয়।
TableLayout
Grid View-এর সাথে খুব মিলে-जুলে, এই লেআউট তার চাইল্ডদের সারি ও কলামে আর্গানাইজ করে। প্রতিটি লেআউটে একাধিক TableRow অবজেক্ট থাকে, প্রতিটি একটি সারি ডিফাইন করে।
বিভিন্ন লেআউট ট্রাই করতে হিচকিচাবেন না যতক্ষণ না আপনার জন্য সেরা वाला পাওয়া যায়। কমেন্টে জানান কোন লেআউট আপনার কাছে সবচেয়ে উপযোগী এবং কেন।