Layout Editor: এটি কী, Android Studio এবং লেআউট তৈরি

Layout Editor কী?

Layout Editor হল Android Studio-তে নির্মিত একটি টুল যা Android অ্যাপ্লিকেশনের ইউজার ইন্টারফেস ভিজ্যুয়ালি ডিজাইন করার জন্য। এটি res/layout/ ফোল্ডারে একটি XML লেআউট ফাইলে ডাবল-ক্লিক করলে খোলে এবং Code, Design এবং Split ট্যাবের মধ্যে স্যুইচ করার নিচের প্যানেলের মাধ্যমে উপলব্ধ। ডেভেলপার প্যালেট থেকে ক্যানভাসে উপাদান টেনে আনতে পারে, তাদের বৈশিষ্ট্য কনফিগার করতে পারে এবং রিয়েল টাইমে পরিবর্তন পর্যবেক্ষণ করতে পারে।

টুলটি দুটি ডিসপ্লে মোড সমর্থন করে: Design (বাস্তব উইজেট রেন্ডারিং সহ ভিজ্যুয়াল ক্যানভাস) এবং Blueprint (সীমাবদ্ধতা এবং সীমানা সহ পরিকল্পিত উপস্থাপনা)। Split মোড একসাথে XML কোড এবং ভিজ্যুয়াল ক্যানভাস দেখায়। এগুলোর মধ্যে স্যুইচ করা এডিটরের উপরের বাম কোণে বাটনের মাধ্যমে করা হয়।

Layout Editor প্রতিটি ব্যবহারকারী কর্মের জন্য স্বয়ংক্রিয়ভাবে XML কোড তৈরি করে: একটি উপাদান যোগ করা, মার্জিন সেট করা, একটি সীমাবদ্ধতা তৈরি করা। এটি ডেভেলপারকে ডজন খানেক XML অ্যাট্রিবিউট মনে না রাখতে এবং ভিজ্যুয়াল ফলাফলে ফোকাস করতে দেয়। তৈরি কোড সবসময় Code ট্যাবে ম্যানুয়ালি এডিট করা যায়।

Layout Editor-এর প্রধান অঞ্চল

Layout Editor ইন্টারফেস চারটি অঞ্চলে বিভক্ত: Palette (উপাদান প্যালেট), Component Tree (উপাদান ট্রি), Design Surface (ডিজাইন ক্যানভাস) এবং Properties Panel (বৈশিষ্ট্য প্যানেল)। Palette-এ বিভাগ অনুসারে গোষ্ঠীবদ্ধ সমস্ত উপলব্ধ Android SDK উইজেট রয়েছে: Widgets, Text, Buttons, Containers এবং অন্যান্য। Component Tree লেআউট শ্রেণিবিন্যাস একটি গাছ হিসাবে প্রদর্শন করে, যা আপনাকে কন্টেইনারের মধ্যে উপাদান টেনে আনতে দেয়।

Design Surface এডিটরের কেন্দ্রীয় অংশ যেখানে লেআউট প্রদর্শিত হয়। ক্যানভাসে, আপনি উপাদান নির্বাচন করতে, সরাতে, আকার পরিবর্তন করতে এবং সীমাবদ্ধতা তৈরি করতে পারেন। ক্যানভাসের নীচে, বিভিন্ন স্ক্রিনে লেআউট প্রিভিউ করার জন্য একটি ডিভাইস এবং ওরিয়েন্টেশন সুইচার রয়েছে। Layout Editor বিভিন্ন ধরনের ভার্চুয়াল ডিভাইসে প্রিভিউ সমর্থন করে: Nexus, Pixel এবং Samsung।

Properties Panel নির্বাচিত উপাদানের অ্যাট্রিবিউট প্রদর্শন করে: layout_width, layout_height, মার্জিন, প্যাডিং, গ্র্যাভিটি এবং TextView-র জন্য textSize-এর মতো সমস্ত নির্দিষ্ট অ্যাট্রিবিউট। Properties Panel-এ প্রতিটি পরিবর্তন তৎক্ষণাৎ ক্যানভাসে প্রতিফলিত হয় এবং সংশ্লিষ্ট XML কোড তৈরি করে।

এডিটরের উপরের বাম কোণে নিয়ন্ত্রণ বাটন রয়েছে: ডিসপ্লে মোড নির্বাচন, অটো-কানেক্ট সীমাবদ্ধতা সক্রিয় করা (Autoconnect), সীমাবদ্ধতা লাইন হিসাবে প্রদর্শন এবং ভার্চুয়াল ডিভাইসের মধ্যে স্যুইচ করা। "Device for Preview" বাটন আপনাকে অভিযোজনযোগ্যতা পরীক্ষা করার জন্য স্মার্টফোন, ট্যাবলেট বা Android TV মডেল নির্বাচন করতে দেয়।

ConstraintLayout: নমনীয় অবস্থান নির্ধারণ

ConstraintLayout হল Google-এর দ্বারা সমস্ত নতুন Android প্রকল্পের জন্য সুপারিশকৃত প্রাথমিক লেআউট। নেস্টেড LinearLayout-এর বিপরীতে, ConstraintLayout একটি সমতল শ্রেণিবিন্যাস তৈরি করে যেখানে প্রতিটি উপাদান প্যারেন্ট, অন্যান্য উপাদান বা গাইডলাইনের সাথে সংযুক্ত থাকে। এটি নেস্টিং গভীরতা হ্রাস করে এবং রেন্ডারিং কর্মক্ষমতা উন্নত করে।

ConstraintLayout-এ প্রতিটি উপাদানের পার্শ্ব সীমাবদ্ধতা রয়েছে: app:layout_constraintStart_toStartOf, app:layout_constraintEnd_toEndOf, app:layout_constraintTop_toTopOf, app:layout_constraintBottom_toBottomOf। সীমাবদ্ধতা প্যারেন্ট (parent) বা অন্য উপাদানের ID-র সাথে সংযুক্ত হতে পারে। একটি মৌলিক XML টেমপ্লেট এইরকম দেখায়:

এই উদাহরণে, TextView প্যারেন্টের চার দিকে কেন্দ্রীভূত। আকার 0dp (match_constraint) মানে হল প্রস্থ বাম থেকে ডান সীমাবদ্ধতা পর্যন্ত বিস্তৃত। এই পদ্ধতি নির্দিষ্ট আকার ছাড়াই অভিযোজিত লেআউট তৈরি করতে দেয়।

ConstraintLayout Bias-ও সমর্থন করে — একটি উপাদানের কেন্দ্রের অফসেট। অ্যাট্রিবিউট layout_constraintHorizontal_bias এবং layout_constraintVertical_bias 0 থেকে 1 পর্যন্ত মান নেয়, যেখানে 0.5 হল কেন্দ্র, 0 হল শুরুতে সংলগ্ন, 1 হল শেষে সংলগ্ন। Bias দুটি সীমাবদ্ধতার মধ্যে একটি উপাদানকে নির্ভুলভাবে অবস্থান করতে দেয়।

অতিরিক্ত ConstraintLayout বৈশিষ্ট্য: Guidelines (শতাংশ বা dp-তে গাইড লাইন), Barriers(ব্যারিয়ার যা একাধিক উপাদানকে গ্রুপ করে) এবং Chains(স্থান বিতরণ সহ উপাদানের চেইন)। এই সমস্ত উপাদান Layout Editor-এ ক্যানভাসে কনটেক্সট মেনুর মাধ্যমে সরাসরি তৈরি করা হয়।

LinearLayout: রৈখিক বিন্যাস

LinearLayout হল একটি কন্টেইনার যা চাইল্ড উপাদানগুলিকে অনুক্রমিকভাবে অনুভূমিক (android:orientation="horizontal") বা উল্লম্ব (android:orientation="vertical") ভাবে সাজায়। এটি বোঝার জন্য সবচেয়ে সহজ লেআউট, কিন্তু এটি জটিল লেআউটের সাথে একটি নেস্টেড শ্রেণিবিন্যাস তৈরি করে, যা কর্মক্ষমতা কমাতে পারে।

LinearLayout-এর মূল অ্যাট্রিবিউট হল weight (android:layout_weight)। এটি নির্দিষ্ট মান অনুসারে উপাদানগুলির মধ্যে আনুপাতিকভাবে খালি স্থান বিতরণ করতে দেয়। যদি আপনি দুটি বাটনের জন্য weight="1" সেট করেন, তারা সমান প্রস্থ নেবে। weight="2" সহ একটি উপাদান weight="1" সহ একটি উপাদানের চেয়ে দ্বিগুণ স্থান পাবে। LinearLayout সহ উদাহরণ XML:

এই উদাহরণে, EditText layout_weight="1" পায় এবং labelName এবং btnSubmit-এর মধ্যে সমস্ত খালি স্থান নেয়। layout_width="0dp" নির্দেশ করে যে EditText-এর প্রস্থ সম্পূর্ণরূপে weight দ্বারা নির্ধারিত। weight ছাড়া, আপনাকে একটি নির্দিষ্ট প্রস্থ সেট করতে হত, যা বিভিন্ন স্ক্রিনের সাথে খাপ খায় না।

LinearLayout-এর গুরুত্বপূর্ণ বৈশিষ্ট্য: android:gravity কন্টেইনারের ভিতরে বিষয়বস্তুর সারিবদ্ধতা নিয়ন্ত্রণ করে, এবং android:layout_gravity প্যারেন্টের ভিতরে কন্টেইনারের সারিবদ্ধতা নিয়ন্ত্রণ করে। নেস্টেড LinearLayout সহ LinearLayout গভীর নেস্টিংয়ের একটি সাধারণ কারণ, তাই Google এই ধরনের নির্মাণগুলি ConstraintLayout দিয়ে প্রতিস্থাপন করার সুপারিশ করে।

XML কোড: ভেতর থেকে লেআউট গঠন

প্রতিটি Android লেআউট res/layout/ ফোল্ডারে একটি XML ফাইল। Layout Editor এই ফাইলটি স্বয়ংক্রিয়ভাবে তৈরি করে, কিন্তু ম্যানুয়াল অপ্টিমাইজেশনের জন্য এর গঠন বোঝা প্রয়োজন। মূল উপাদান কন্টেইনারের ধরন (ConstraintLayout, LinearLayout, FrameLayout) নির্ধারণ করে, যার ভিতরে চাইল্ড উইজেটগুলি স্থাপন করা হয়।

ConstraintLayout সহ একটি মৌলিক XML টেমপ্লেটে xmlns:android এবং xmlns:app নামস্থান ঘোষণা অন্তর্ভুক্ত রয়েছে। অ্যাপ নামস্থানটি ConstraintLayout লাইব্রেরির অ্যাট্রিবিউটের জন্য ব্যবহৃত হয়, যেমন layout_constraintStart_toStartOf। অন্যান্য উপাদান এবং Activity বা Fragment কোড থেকে রেফারেন্সের জন্য প্রতিটি উপাদানকে android:id দেওয়া উচিত।

একাধিক উপাদান এবং সীমাবদ্ধতা সহ একটি লেআউট খণ্ডের উদাহরণ:

এই লেআউটে, ImageView প্যারেন্টের শীর্ষে সংযুক্ত এবং অনুভূমিকভাবে কেন্দ্রীভূত। TextView ImageView-এর নীচের প্রান্তে (Top_toBottomOf) সংযুক্ত। Button TextView-এর নীচে স্থাপন করা হয়েছে। সীমাবদ্ধতার এই চেইন নেস্টেড LinearLayout ছাড়াই একটি অনুক্রমিক গঠন তৈরি করে।

Layout Editor আপনাকে Design / Code / Split ট্যাবের মাধ্যমে ভিজ্যুয়াল এবং টেক্সট উপস্থাপনার মধ্যে স্যুইচ করতে দেয়। Split মোডে, XML-এ পরিবর্তন তৎক্ষণাৎ ক্যানভাসে প্রতিফলিত হয় এবং বিপরীতটিও। এটি সেই অ্যাট্রিবিউটগুলির ফাইন-টিউনিংয়ের জন্য বিশেষভাবে সুবিধাজনক যেগুলির ক্যানভাসে ভিজ্যুয়াল নিয়ন্ত্রণ নেই।

উপাদান প্যালেট এবং Properties Panel

Palette হল Layout Editor-এর বাম প্যানেল যাতে সমস্ত উপলব্ধ UI উপাদান রয়েছে: TextView, Button, ImageView, EditText, ProgressBar, RecyclerView এবং অন্যান্য। উপাদানগুলি বিভাগ অনুসারে গোষ্ঠীবদ্ধ: Widgets, Text, Buttons, Containers, Transitions, Advanced। ক্যানভাসে একটি উপাদান যোগ করতে, কেবল প্যালেট থেকে এটি Design Surface-এ টেনে আনুন।

Properties Panel (ডান প্যানেল) নির্বাচিত উপাদানের সমস্ত অ্যাট্রিবিউট প্রদর্শন করে। প্যানেলটি বিভাগে বিভক্ত: Id (আইডি), Layout (আকার এবং মার্জিন), Transform (ঘূর্ণন এবং স্কেল), Text (TextView বিষয়বস্তু), Padding and Margin। প্রতিটি অ্যাট্রিবিউটের জন্য, বিকল্প সহ একটি ড্রপডাউন মেনু উপলব্ধ: wrap_content, match_parent, match_constraint (0dp)।

Properties Panel-এর একটি বৈশিষ্ট্য হল ভিজ্যুয়াল মার্জিন এডিটর (প্যাডিং এবং মার্জিন) গ্রাফিক্যাল ডিসপ্লে সহ। সংশ্লিষ্ট তীরের পাশের সংখ্যায় ক্লিক করে, আপনি স্লাইডার ব্যবহার করে মার্জিন পরিবর্তন করতে পারেন। Layout Editor স্বয়ংক্রিয়ভাবে মার্জিন স্বাভাবিক করে: যদি চারটি মার্জিন একই হয়, তাহলে অ্যাট্রিবিউট android:layout_margin ব্যবহার করা হয়, অন্যথায় পৃথক android:layout_marginStart, android:layout_marginTop ইত্যাদি।

Properties Panel-এ Constraint অ্যাট্রিবিউট সম্পাদনার জন্য, একটি বিশেষ Constraints বিভাগ রয়েছে। এটি উপাদানের সমস্ত বাঁধন প্রদর্শন করে: প্যারেন্ট বা অন্য উপাদানের কোন পাশে প্রতিটি প্রান্ত সংযুক্ত। আপনি বাঁধনের ধরন পরিবর্তন করতে পারেন, একটি সীমাবদ্ধতা যোগ বা সরাতে পারেন। আপনি Blueprint মোডে ক্যানভাসে সংশ্লিষ্ট লাইনে ক্লিক করেও একটি সীমাবদ্ধতা সরাতে পারেন।

অভিযোজিত লেআউট তৈরি

একটি অভিযোজিত লেআউট হল এমন একটি লেআউট যা বিভিন্ন স্ক্রিন আকারে সঠিকভাবে প্রদর্শিত হয়: কমপ্যাক্ট ফোন (320dp) থেকে বড় ট্যাবলেট (600dp+) এবং ভাঁজযোগ্য ডিভাইস পর্যন্ত। Layout Editor অভিযোজিত ইন্টারফেস পরীক্ষা এবং তৈরি করার জন্য বেশ কয়েকটি টুল সরবরাহ করে।

প্রথম টুলটি হল টুলবারে Device for Preview। ড্রপডাউন তালিকায় জনপ্রিয় ডিভাইস রয়েছে: Pixel 6, Pixel 9, Samsung Galaxy S25, Nexus 7, Nexus 9, Pixel C এবং অন্যান্য। আপনি ইচ্ছামত স্ক্রিন আকার এবং পিক্সেল ঘনত্ব (dpi) সহ একটি কাস্টম ডিভাইস যোগ করতে পারেন। ডিভাইসের মধ্যে স্যুইচ করতে এক সেকেন্ড সময় লাগে এবং দেখায় যে প্রতিটি স্ক্রিনে লেআউটটি কেমন দেখায়।

দ্বিতীয় টুলটি হল বিকল্প লেআউট তৈরির জন্য আকার যোগ্যতাসম্পন্ন (qualifiers)। Layout Editor-এ, আপনি বিভিন্ন স্ক্রিন আকার, ওরিয়েন্টেশন বা ঘনত্বের জন্য একই XML ফাইলের একাধিক সংস্করণ তৈরি করতে পারেন। উদাহরণস্বরূপ, ফোনের জন্য একটি activity_main.xml ফাইল এবং ট্যাবলেটের জন্য activity_main-sw600dp.xml ফাইল। Layout Editor স্বয়ংক্রিয়ভাবে সক্রিয় যোগ্যতাসম্পন্নের জন্য একটি প্রিভিউ দেখায়।

তৃতীয় পদ্ধতি হল শতাংশ Guidelines সহ ConstraintLayout। অ্যাট্রিবিউট app:layout_constraintGuide_percent সহ গাইড লাইন আপনাকে শতাংশ অবস্থানের সাথে উপাদান সংযুক্ত করতে দেয়। উদাহরণস্বরূপ, 50%-এ একটি গাইডলাইন ডিভাইসের আকার নির্বিশেষে স্ক্রিনকে অর্ধেক ভাগ করে। XML ফাইল ডুপ্লিকেট না করে অভিযোজিত লেআউট তৈরির এটি সবচেয়ে নমনীয় উপায়।

Layout Editor অভিযোজনযোগ্যতা সমস্যা সম্পর্কে সতর্কতাও প্রদর্শন করে: নির্দিষ্ট প্রস্থের উপাদানগুলিতে হলুদ ত্রিভুজ, অতিরিক্ত বড় ছবি বা অ-অনুকূল নেস্টিং। ডেভেলপার একটি সতর্কতায় ক্লিক করতে পারে এবং সংশোধনের জন্য একটি সুপারিশ পেতে পারে।

XML লেআউট অপ্টিমাইজেশন

লেআউট অপ্টিমাইজেশন সরাসরি রেন্ডারিং গতি এবং অ্যাপ্লিকেশনের মসৃণতাকে প্রভাবিত করে। Layout Editor অন্তর্নির্মিত Layout Inspector এবং Problems প্যানেলে সতর্কতার মাধ্যমে সমস্যা সনাক্ত করতে সহায়তা করে। প্রধান অপ্টিমাইজেশন নিয়ম: নেস্টিং কমানো, নেস্টেড LinearLayout-এর পরিবর্তে ConstraintLayout ব্যবহার করা, সঠিক আকারের অ্যাট্রিবিউট নির্বাচন করা।

নেস্টিং গভীরতা কর্মক্ষমতার প্রধান শত্রু। প্রতিটি নেস্টেড কন্টেইনার পরিমাপ এবং অঙ্কন সময় বাড়ায়। Android Studio-তে Hierarchy View টুল লেআউট ট্রি দেখায়। যদি গভীরতা 5–6 স্তর অতিক্রম করে, তাহলে লেআউটটি পুনর্গঠন করা উচিত। ConstraintLayout 3–4 নেস্টিং স্তরকে একটি একক সমতল কন্টেইনার দিয়ে প্রতিস্থাপন করে এই সমস্যার সমাধান করে।

Layout Editor-এ XML লেআউট অপ্টিমাইজেশনের জন্য সুপারিশ:

• নেস্টেড LinearLayout-এর পরিবর্তে রুট কন্টেইনার হিসাবে ConstraintLayout ব্যবহার করুন — এটি শ্রেণিবিন্যাস গভীরতা হ্রাস করে এবং রেন্ডারিং গতি বাড়ায়
• বড় তালিকার জন্য LinearLayout-এ layout_weight এড়িয়ে চলুন — weight-এর জন্য দুই-পাস পরিমাপ (two-pass layout) প্রয়োজন
• Layout Editor-এ Clear Constraints of Selection কনটেক্সট মেনুর মাধ্যমে অব্যবহৃত সীমাবদ্ধতা সরান
• কদাচিৎ প্রদর্শিত ব্লকের জন্য ViewStub ব্যবহার করুন — ViewStub দৃশ্যমানতা পর্যন্ত ইনফ্লেশন স্থগিত করে
• পুনরায় ব্যবহারযোগ্য উপাদানের জন্য Merge — মর্জ ট্যাগ include-এর মাধ্যমে অন্তর্ভুক্ত করার সময় অতিরিক্ত কন্টেইনার সরিয়ে দেয়
• ছবির আকার হ্রাস করুন এবং আইকনের জন্য PNG-এর পরিবর্তে VectorDrawable ব্যবহার করুন

Layout Inspector অ্যাপ্লিকেশন রানটাইমের সময় লেআউট প্রোফাইলিংয়ের জন্য Android Studio-র একটি টুল। এটি প্রকৃত শ্রেণিবিন্যাস, প্রতিটি উপাদানের পরিমাপ এবং অঙ্কন সময় দেখায়। Layout Editor Layout Inspector-এর সাথে সংহত: একটি সতর্কতায় ডাবল-ক্লিক করলে বিস্তারিত প্রতিবেদনে সংশ্লিষ্ট সমস্যা খোলে।