কম্পিউটার টিউটোরিয়াল

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন

Linear, Relative, Constraint, Table, Frame এবং আরও অনেক লেআউট রয়েছে Android-এ। অ্যাপ্লিকেশন ডিজাইন করার সময় আপনার সামনে অনেক অপশন থাকে। প্রশ্ন হলো, কোনটি সবচেয়ে ভালো?

বিভিন্ন লেআউটের বিস্তারিত জানার আগে, প্রথমে View অবজেক্ট হায়ারার্কি এবং Android-এর ড্রইং প্রসেস নিয়ে আলোচনা করি।

View এবং ViewGroup

ViewGroup কে যেকোনো ভিউর প্যারেন্ট ক্লাস এবং লেআউটের বেস ক্লাস হিসেবে চিন্তা করুন। এটি অন্য ভিউদের ধারক একটি অবজেক্ট রিপ্রেজেন্ট করে। উদাহরণস্বরূপ, LinearLayout একটি ViewGroup কারণ এটি ভিউ এবং অন্যান্য লেআউট ধারণ করতে পারে।

অন্যদিকে, View হলো UI এলিমেন্টের বেসিক বিল্ডিং ব্লক। ভিউগুলো ViewGroup-এর অংশ হতে পারে। উদাহরণস্বরূপ, TextView একটি View।

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন
ViewGroup এবং View-এর হায়ারার্কি

Measure → Layout → Draw → Repeat

লেআউটগুলো Android-এ XML ফাইল হিসেবে সংরক্ষিত থাকে। কিন্তু এগুলো স্ক্রিনে দেখা অবজেক্টে কীভাবে রূপান্তরিত হয়? প্রতিটি XML ফাইল ইনস্ট্যানশিয়েট (inflate) হয় এবং একটি ভিউ হায়ারার্কি ট্রি তৈরি হয়। এর মানে যদি আপনার লেআউট B, লেআউট A-এর ভিতরে নেস্টেড থাকে, তবে তাদের চাইল্ড-প্যারেন্ট সম্পর্ক থাকবে (লেআউট A, লেআউট B-এর প্যারেন্ট)। ট্রি তৈরি হলে তিনটি ফেজ ঘটে: Measure, Layout এবং Draw। প্রতিটি ফেজ Depth First Search অর্ডারে ট্রি ট্রাভার্স করে।

Measure

প্রথম ফেজে, প্রতিটি প্যারেন্ট নোড তার চাইল্ডদের আকার সংক্রান্ত কনস্ট্রেইন বা সীমাবদ্ধতা বের করে। এগুলো নিচের দিকে পাস করে, যেখানে প্রতিটি চাইল্ড নিজের পছন্দের আকার (কত বড় হতে চায়) নির্ধারণ করে এবং পাস করা সীমাবদ্ধতা ও নিজের চাইল্ডদের সীমাবদ্ধতা বিবেচনা করে।

Layout

এখানে প্রতিটি নোড তার চাইল্ডদের স্ক্রিনে ফাইনাল আকার এবং পজিশন নির্ধারণ করে।

Draw

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

উপরোক্ত প্রসেস ধরে রেখে, আপনার অ্যাপ্লিকেশনের লেআউট যতটা সম্ভব শ্যালো (shallow) রাখার চেষ্টা করুন যাতে ভিউ হায়ারার্কি ট্রাভার্স করতে লেগে وقت কম যায়
Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন
“assorted-color photo frame lot” by Markus Spiske on Unsplash

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>
একটি সাধারণ Linear Layout

মান लीজिए আপনি চান প্রথম 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>
layout_weight

Relative

নাম অনুযায়ী, এই লেআউট তার ভেতরের চাইল্ড ভিউগুলোকেRelative position-এ সেট করে। এটি আপনার লেআউট হায়ারার্কি ফ্ল্যাট রাখতে পারে নেস্টেড ভিউ গ্রুপ ছাড়া। একই সাথে, প্রতিটি Relative Layout-কে দুই Measure pass-এর প্রসেস থেকে গুজরতে হয়, যা পারফরম্যান্সে প্রভাব ফেলতে পারে।

RelativeLayout-এর একটি উপকারী ফিচার হলো centerInParent অ্যাট্রিবিউট ব্যবহার করে চাইল্ড ভিউকে কেন্দ্রে রাখা।

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন
layout_centerInParent TextView-কে কেন্দ্রে রাখে

Constraint

একটি constraint হলো একটি সংযোগ বা অ্যালাইনমেন্ট যেখানে constraint টাই করা থাকে। আপনি প্রতিটি চাইল্ড ভিউর জন্য বিভিন্ন constraint ডিফাইন করেন অন্য ভিউদের সাপেক্ষে। এটি আপনাকে কমপ্লেক্স লেআউট তৈরি করতে দেয় ফ্ল্যাট ভিউ হায়ারার্কির সাথে (নেস্টেড ViewGroup ছাড়া)। RelativeLayout-এর মতো, এই লেআউটটিও দুই Measure pass প্রয়োজন।

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন
TextView-এ কনস্ট্রেইন্টগুলো লক্ষ্য করুন

Frame

এই লেআউট শুধু একটি সিঙ্গল চাইল্ড ভিউ ধারণ করতে ব্যবহৃত হয়, এই লেআউটে অন্য কোনো ভিউ ব্লক করে দেয়। লেআউটটি নিজের সবচেয়ে বড় চাইল্ড ভিউ (দৃশ্যমান বা অদৃশ্য) যত বড়, তার প্লাস কিছু প্যাডিং তত বড় হয়।

FrameLayout-এ একাধিক চাইল্ড ভিউ রাখা এড়িয়ে চলুন কারণ চাইল্ড ভিউগুলো একে অপরকে ওভারল্যাপ করাতে পারে। আপনি এই চাইল্ড ভিউদের পজিশন কন্ট্রোল করতে পারেন layout_gravity অ্যাট্রিবিউট প্রতিটিতে অ্যাসাইন করে।

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন

List View / Grid View

যখন স্ক্রিনে একাধিক আইটেম প্রেজেন্ট করার প্রয়োজন হয় (যেমন রেস্তোরাঁ মেনু)। List View হলো একটি সিঙ্গল কলাম লিস্ট যা ব্যবহারকারী স্ক্রল করতে পারে। Grid View-কে List View-এর মতো ভাবুন কিন্তু একাধিক কলামের সাথে।

এই লেআউটগুলো সম্পর্কে জানা গুরুত্বপূর্ণ যে, ভিউগুলো ডাইনামিক এবং রানটাইমে তৈরি হয়। রানটাইমে আইটেমগুলো পপুলেট করতে AdapterView ব্যবহার করতে হয়।

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন
layout_column এবং layout_row ব্যবহার করে লেআউটে প্রতিটি আইটেমের লোকেশন নির্দিষ্ট করতে পারেন

TableLayout

Grid View-এর সাথে খুব মিলে-जুলে, এই লেআউট তার চাইল্ডদের সারি ও কলামে আর্গানাইজ করে। প্রতিটি লেআউটে একাধিক TableRow অবজেক্ট থাকে, প্রতিটি একটি সারি ডিফাইন করে।

Android Layouts মাস্টার করুন: আপনার অ্যাপের জন্য সঠিক লেআউট বেছে নিন
আমাদের দুটি TableRow এলিমেন্ট আছে

বিভিন্ন লেআউট ট্রাই করতে হিচকিচাবেন না যতক্ষণ না আপনার জন্য সেরা वाला পাওয়া যায়। কমেন্টে জানান কোন লেআউট আপনার কাছে সবচেয়ে উপযোগী এবং কেন।


  1. অ্যান্ড্রয়েডে হোম বাটন দিয়ে ক্যামেরা লঞ্চ করার পদ্ধতি

  2. কোটলিন অ্যান্ড্রয়েড অ্যানিমেশনকে অ্যাক্সেসিবল করা: একটি প্র্যাক্টিক্যাল গাইড

  3. ২০১৯ সালে অ্যান্ড্রয়েড অ্যাপ ডেভেলপমেন্টে দক্ষতা অর্জন: লেটেস্ট ফিচারগুলো অধ принять করুন

  4. Android Studio 4.0: মূল ফিচার এবং উন্নতির ব্যাখ্যা