Android Jetpack- এর অংশ ConstraintLayout ব্যবহার করে একটি রেসপন্সিভ UI তৈরি করুন।

চিত্র ১। এডিটরটি A-এর নিচে C ভিউ দেখাচ্ছে, কিন্তু এর কোনো উল্লম্ব সীমাবদ্ধতা নেই।

চিত্র ২। দৃশ্য C এখন দৃশ্য A-এর নিচে উল্লম্বভাবে সীমাবদ্ধ।

যদিও একটি অনুপস্থিত কনস্ট্রেইন্ট কম্পাইলেশন এরর ঘটায় না, লেআউট এডিটর টুলবারে অনুপস্থিত কনস্ট্রেইন্টগুলোকে একটি এরর হিসেবে নির্দেশ করে। এরর এবং অন্যান্য ওয়ার্নিংগুলো দেখতে, 'Show Warnings and Errors'- এ ক্লিক করুন। যাতে কোনো কনস্ট্রেইন্ট বাদ না পড়ে, সেজন্য লেআউট এডিটর তার অটো-কানেক্ট এবং ইনফার কনস্ট্রেইন্ট ফিচারের মাধ্যমে স্বয়ংক্রিয়ভাবে আপনার জন্য কনস্ট্রেইন্ট যোগ করে দেয়।

আপনার প্রজেক্টে ConstraintLayout যোগ করুন

আপনার প্রজেক্টে ConstraintLayout ব্যবহার করতে, নিম্নলিখিত পদ্ধতি অনুসরণ করুন:

1. আপনার settings.gradle ফাইলে maven.google.com রিপোজিটরিটি ডিক্লেয়ার করা আছে কিনা তা নিশ্চিত করুন:

   গ্রুভি

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   কোটলিন

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. নিচের উদাহরণে দেখানো অনুযায়ী, মডিউল-স্তরের build.gradle ফাইলে লাইব্রেরিটিকে একটি ডিপেন্ডেন্সি হিসেবে যুক্ত করুন। সর্বশেষ সংস্করণটি উদাহরণে দেখানো সংস্করণ থেকে ভিন্ন হতে পারে।

   গ্রোভি

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.1"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.1"
   }

   কোটলিন

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.1")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.1")
   }

3. টুলবারে বা সিঙ্ক নোটিফিকেশনে, ‘Sync Project with Gradle Files’- এ ক্লিক করুন।

এখন আপনি ConstraintLayout ব্যবহার করে আপনার লেআউট তৈরি করতে প্রস্তুত।

একটি লেআউট রূপান্তর করুন

চিত্র ৩. একটি লেআউটকে ConstraintLayout এ রূপান্তর করার মেনু।

বিদ্যমান লেআউটকে কনস্ট্রেইন্ট লেআউটে রূপান্তর করতে, এই ধাপগুলো অনুসরণ করুন:

1. অ্যান্ড্রয়েড স্টুডিওতে আপনার লেআউটটি খুলুন এবং এডিটর উইন্ডোর নিচের দিকে থাকা ডিজাইন ট্যাবে ক্লিক করুন।
2. কম্পোনেন্ট ট্রি উইন্ডোতে, লেআউটটির উপর রাইট-ক্লিক করুন এবং ‘Convert LinearLayout to ConstraintLayout’ অপশনে ক্লিক করুন।

একটি নতুন লেআউট তৈরি করুন

একটি নতুন কনস্ট্রেইন্ট লেআউট ফাইল শুরু করতে, এই ধাপগুলো অনুসরণ করুন:

1. প্রজেক্ট উইন্ডোতে, মডিউল ফোল্ডারটিতে ক্লিক করুন এবং ফাইল > নতুন > এক্সএমএল > লেআউট এক্সএমএল নির্বাচন করুন।
2. লেআউট ফাইলের জন্য একটি নাম লিখুন এবং রুট ট্যাগের জন্য 'androidx.constraintlayout.widget.ConstraintLayout' লিখুন।
3. শেষ করুন- এ ক্লিক করুন।

একটি সীমাবদ্ধতা যোগ করুন বা সরান

একটি সীমাবদ্ধতা যোগ করতে, নিম্নলিখিতগুলি করুন:

1. প্যালেট উইন্ডো থেকে একটি ভিউ টেনে এডিটরে আনুন।

   যখন আপনি একটি ConstraintLayout মধ্যে কোনো ভিউ যোগ করেন, তখন সেটি একটি বাউন্ডিং বক্সের মধ্যে প্রদর্শিত হয়, যার প্রতিটি কোণায় বর্গাকার রিসাইজিং হ্যান্ডেল এবং প্রতিটি পাশে বৃত্তাকার কনস্ট্রেইন্ট হ্যান্ডেল থাকে।

2. ভিউটি নির্বাচন করতে সেটিতে ক্লিক করুন।
3. নিম্নলিখিতগুলির মধ্যে যেকোনো একটি করুন:
   • একটি কনস্ট্রেইন্ট হ্যান্ডেলে ক্লিক করে সেটিকে একটি উপলব্ধ অ্যাঙ্কর পয়েন্টে টেনে নিয়ে যান। এই পয়েন্টটি অন্য কোনো ভিউ-এর প্রান্ত, লেআউটের প্রান্ত বা একটি গাইডলাইন হতে পারে। লক্ষ্য করুন যে, আপনি যখন কনস্ট্রেইন্ট হ্যান্ডেলটি টানবেন, তখন লেআউট এডিটর সম্ভাব্য সংযোগ অ্যাঙ্কর এবং নীল ওভারলে দেখাবে।

   • সংযোগ তৈরি করুন বিকল্পগুলির মধ্যে একটিতে ক্লিক করুন। অ্যাট্রিবিউটস উইন্ডোর লেআউট বিভাগে থাকা বাটনগুলো, যেমনটি চিত্র ৪-এ দেখানো হয়েছে।

     

     চিত্র ৪। অ্যাট্রিবিউটস উইন্ডোর লেআউট সেকশন আপনাকে সংযোগ তৈরি করতে দেয়।

যখন কনস্ট্রেইন্টটি তৈরি করা হয়, তখন এডিটর দুটি ভিউকে আলাদা করার জন্য এটিকে একটি ডিফল্ট মার্জিন দিয়ে দেয়।

সীমাবদ্ধতা তৈরি করার সময় নিম্নলিখিত নিয়মগুলি মনে রাখবেন:

• প্রতিটি ভিউতে অবশ্যই কমপক্ষে দুটি সীমাবদ্ধতা থাকতে হবে: একটি অনুভূমিক এবং একটি উল্লম্ব।
• আপনি শুধুমাত্র একটি কনস্ট্রেইন্ট হ্যান্ডেল এবং একটি অ্যাঙ্কর পয়েন্টের মধ্যে কনস্ট্রেইন্ট তৈরি করতে পারেন, যারা একই সমতলে থাকে। একটি ভিউ-এর উল্লম্ব সমতল—অর্থাৎ বাম এবং ডান দিক—কে শুধুমাত্র অন্য একটি উল্লম্ব সমতলের সাথে কনস্ট্রেইন করা যায়, এবং বেসলাইনগুলো শুধুমাত্র অন্যান্য বেসলাইনের সাথেই কনস্ট্রেইন হতে পারে।
• প্রতিটি কনস্ট্রেইন্ট হ্যান্ডেল শুধুমাত্র একটি কনস্ট্রেইন্টের জন্য ব্যবহার করা যায়, কিন্তু আপনি বিভিন্ন ভিউ থেকে একই অ্যাঙ্কর পয়েন্টে একাধিক কনস্ট্রেইন্ট তৈরি করতে পারেন।

আপনি নিম্নলিখিত যেকোনো একটি উপায়ে একটি সীমাবদ্ধতা মুছে ফেলতে পারেন:

• কোনো সীমাবদ্ধতা নির্বাচন করতে সেটিতে ক্লিক করুন, এবং তারপর ডিলিট-এ ক্লিক করুন।

• একটি কনস্ট্রেইন্ট অ্যাঙ্করে কন্ট্রোল -ক্লিক (macOS-এ কমান্ড -ক্লিক) করুন। কনস্ট্রেইন্টটি লাল হয়ে যায়, যা নির্দেশ করে যে আপনি এটি মুছে ফেলার জন্য ক্লিক করতে পারেন, যেমনটি চিত্র ৫-এ দেখানো হয়েছে।

  

  চিত্র ৫। একটি লাল প্রতিবন্ধক নির্দেশ করে যে আপনি এটি মুছে ফেলার জন্য ক্লিক করতে পারেন।

• অ্যাট্রিবিউটস উইন্ডোর লেআউট বিভাগে, চিত্র ৬-এ দেখানো অনুযায়ী একটি কনস্ট্রেইন্ট অ্যাঙ্করে ক্লিক করুন।

  

  চিত্র ৬। একটি কনস্ট্রেইন্ট অ্যাঙ্কর মুছে ফেলার জন্য সেটিতে ক্লিক করুন।

যদি আপনি একটি ভিউতে বিপরীতমুখী কনস্ট্রেইন্ট যোগ করেন, তাহলে কনস্ট্রেইন্ট লাইনগুলো স্প্রিংয়ের মতো পেঁচিয়ে গিয়ে বিপরীত শক্তিগুলোকে নির্দেশ করে, যেমনটি ভিডিও ২-এ দেখানো হয়েছে। এই প্রভাবটি সবচেয়ে স্পষ্টভাবে দেখা যায় যখন ভিউয়ের সাইজ 'fixed' বা 'wrap content'-এ সেট করা থাকে, সেক্ষেত্রে ভিউটি কনস্ট্রেইন্টগুলোর মাঝখানে কেন্দ্রীভূত থাকে। এর পরিবর্তে যদি আপনি চান যে ভিউটি কনস্ট্রেইন্টগুলো মেটানোর জন্য আকারে প্রসারিত হোক, তাহলে সাইজটি 'match constraints'-এ পরিবর্তন করুন । যদি আপনি বর্তমান সাইজটি অপরিবর্তিত রেখে ভিউটিকে এমনভাবে সরাতে চান যাতে এটি কেন্দ্রে না থাকে, তাহলে কনস্ট্রেইন্ট বায়াস (constraint bias) অ্যাডজাস্ট করুন ।

পরবর্তী বিভাগগুলিতে বর্ণিত পদ্ধতি অনুযায়ী, আপনি কনস্ট্রেইন্ট ব্যবহার করে বিভিন্ন ধরণের লেআউট আচরণ অর্জন করতে পারেন।

অভিভাবকের অবস্থান

একটি ভিউ-এর পার্শ্বভাগকে লেআউটের সংশ্লিষ্ট প্রান্তের সাথে আবদ্ধ করুন।

চিত্র ৭-এ, ভিউটির বাম দিকটি প্যারেন্ট লেআউটের বাম প্রান্তের সাথে সংযুক্ত। আপনি মার্জিনের মাধ্যমে প্রান্ত থেকে দূরত্ব নির্ধারণ করতে পারেন।

চিত্র ৭। প্যারেন্টের উপর একটি হরাইজন্টাল কনস্ট্রেইন্ট।

অর্ডার অবস্থান

দুটি ভিউয়ের প্রদর্শনের ক্রম উল্লম্বভাবে অথবা অনুভূমিকভাবে নির্ধারণ করুন।

চিত্র ৮-এ, B-কে সর্বদা A-এর ডানদিকে থাকতে বাধ্য করা হয়েছে এবং C-কে A-এর নিচে থাকতে বাধ্য করা হয়েছে। তবে, এই সীমাবদ্ধতাগুলো তাদের একই সরলরেখায় থাকাকে বোঝায় না, তাই B এখনও উপরে এবং নীচে চলাচল করতে পারে।

চিত্র ৮. একটি আনুভূমিক এবং উল্লম্ব সীমাবদ্ধতা।

সারিবদ্ধকরণ

একটি ভিউয়ের প্রান্তকে অন্য একটি ভিউয়ের একই প্রান্তের সাথে সারিবদ্ধ করুন।

চিত্র ৯-এ, B-এর বাম দিক A-এর বাম দিকের সাথে অ্যালাইন করা আছে। যদি আপনি ভিউ সেন্টারগুলো অ্যালাইন করতে চান, তাহলে উভয় দিকে একটি কনস্ট্রেইন্ট তৈরি করুন।

আপনি কনস্ট্রেইন্ট থেকে ভিউটিকে ভেতরের দিকে টেনে অ্যালাইনমেন্ট অফসেট করতে পারেন। উদাহরণস্বরূপ, চিত্র ১০-এ B-কে একটি ২৪ডিপি অফসেট অ্যালাইনমেন্ট সহ দেখানো হয়েছে। এই অফসেটটি কনস্ট্রেইন্টযুক্ত ভিউটির মার্জিন দ্বারা নির্ধারিত হয়।

এছাড়াও আপনি যে ভিউগুলো অ্যালাইন করতে চান, সেগুলো নির্বাচন করে অ্যালাইন-এ ক্লিক করতে পারেন। অ্যালাইনমেন্টের ধরন নির্বাচন করতে টুলবারে যান।

চিত্র ৯। একটি অনুভূমিক সারিবদ্ধকরণ সীমাবদ্ধতা।

চিত্র ১০। একটি অফসেট অনুভূমিক সারিবদ্ধকরণ সীমাবদ্ধতা।

বেসলাইন অ্যালাইনমেন্ট

একটি ভিউয়ের টেক্সট বেসলাইনকে অন্য একটি ভিউয়ের টেক্সট বেসলাইনের সাথে অ্যালাইন করুন।

চিত্র ১১-তে, B-এর প্রথম লাইনটি A-এর পাঠ্যের সাথে সারিবদ্ধ করা হয়েছে।

একটি বেসলাইন কনস্ট্রেইন্ট তৈরি করতে, যে টেক্সট ভিউটিকে আপনি কনস্ট্রেইন করতে চান সেটির উপর রাইট-ক্লিক করুন এবং তারপর 'Show Baseline'-এ ক্লিক করুন। এরপর টেক্সট বেসলাইনটিতে ক্লিক করে লাইনটিকে টেনে অন্য একটি বেসলাইনে নিয়ে যান।

চিত্র ১১। একটি বেসলাইন অ্যালাইনমেন্ট সীমাবদ্ধতা।

একটি নির্দেশিকা মেনে চলুন

আপনি একটি উল্লম্ব বা অনুভূমিক গাইডলাইন যোগ করতে পারেন যা আপনার ভিউগুলোকে সীমাবদ্ধ করতে সাহায্য করে এবং আপনার অ্যাপের ব্যবহারকারীদের কাছে অদৃশ্য থাকে। আপনি লেআউটের প্রান্তের সাপেক্ষে ডিপি ইউনিট বা শতাংশের উপর ভিত্তি করে লেআউটের মধ্যে গাইডলাইনটির অবস্থান নির্ধারণ করতে পারেন।

একটি নির্দেশিকা তৈরি করতে, 'নির্দেশিকা' (Guidelines) এ ক্লিক করুন। টুলবারে, এবং তারপরে 'Add Vertical Guideline' অথবা 'Add Horizontal Guideline'-এ ক্লিক করুন।

ডটেড লাইনটি টেনে এর অবস্থান পরিবর্তন করুন, এবং পরিমাপ মোড পরিবর্তন করতে গাইডলাইনের প্রান্তের বৃত্তটিতে ক্লিক করুন।

চিত্র ১২। একটি নির্দেশিকা রেখা দ্বারা সীমাবদ্ধ দৃশ্য।

একটি বাধার মধ্যে সীমাবদ্ধ করুন

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

উদাহরণস্বরূপ, চিত্র ১৩-তে ভিউ C একটি প্রতিবন্ধকের ডান দিকে সীমাবদ্ধ। প্রতিবন্ধকটি ভিউ A এবং ভিউ B উভয়ের "শেষ প্রান্তে" (অথবা বাম থেকে ডান বিন্যাসে ডান দিকে) স্থাপন করা হয়েছে। ভিউ A বা ভিউ B-এর ডান দিকটি সবচেয়ে ডানদিকে থাকার উপর নির্ভর করে প্রতিবন্ধকটি সরে যায়।

একটি প্রতিবন্ধক তৈরি করতে এই ধাপগুলো অনুসরণ করুন:

1. ক্লিক নির্দেশিকা টুলবারে, এবং তারপর 'Add Vertical Barrier' অথবা 'Add Horizontal Barrier'-এ ক্লিক করুন।
2. কম্পোনেন্ট ট্রি উইন্ডোতে, ব্যারিয়ারের ভিতরে আপনি যে ভিউগুলো চান সেগুলো নির্বাচন করুন এবং ব্যারিয়ার কম্পোনেন্টের মধ্যে টেনে আনুন।
3. কম্পোনেন্ট ট্রি থেকে বাধাটি নির্বাচন করুন, অ্যাট্রিবিউটস খুলুন window, এবং তারপর barrierDirection সেট করুন।

এখন আপনি অন্য একটি ভিউ থেকে ব্যারিয়ারটির উপর একটি কনস্ট্রেইন্ট তৈরি করতে পারেন।

আপনি ব্যারিয়ারের ভিতরে থাকা ভিউগুলোকেও ব্যারিয়ারের সাথে আবদ্ধ করতে পারেন। এইভাবে, আপনি ব্যারিয়ারের ভিতরের সমস্ত ভিউকে একে অপরের সাথে সারিবদ্ধ করতে পারবেন, এমনকি যদি আপনি না-ও জানেন যে কোন ভিউটি সবচেয়ে লম্বা বা উঁচু।

প্রতিবন্ধকটির একটি 'ন্যূনতম' অবস্থান নিশ্চিত করার জন্য আপনি এর ভিতরে একটি নির্দেশিকাও অন্তর্ভুক্ত করতে পারেন।

চিত্র ১৩। দৃশ্য C একটি প্রতিবন্ধক দ্বারা আবদ্ধ, যা দৃশ্য A এবং দৃশ্য B উভয়ের অবস্থান ও আকারের উপর ভিত্তি করে চলাচল করে।

সীমাবদ্ধতার পক্ষপাত সামঞ্জস্য করুন

যখন আপনি একটি ভিউ-এর উভয় দিকে একটি কনস্ট্রেইন্ট যোগ করেন, এবং একই ডাইমেনশনের জন্য ভিউ সাইজটি 'ফিক্সড' বা 'র‍্যাপ কন্টেন্ট' হয়, তখন ভিউটি ডিফল্টরূপে ৫০% বায়াস সহ দুটি কনস্ট্রেইন্টের মাঝখানে কেন্দ্রীভূত হয়। আপনি অ্যাট্রিবিউটস উইন্ডোতে থাকা বায়াস স্লাইডারটি টেনে অথবা ভিডিও ৩-এ দেখানো অনুযায়ী ভিউটি টেনে বায়াস অ্যাডজাস্ট করতে পারেন।

এর পরিবর্তে আপনি যদি চান যে ভিউটি সীমাবদ্ধতা পূরণের জন্য তার আকার প্রসারিত করুক, তাহলে আকারটি "match constraints"-এ পরিবর্তন করুন ।

দেখার আকার সামঞ্জস্য করুন

চিত্র ১৪। একটি ভিউ নির্বাচন করার সময়, অ্যাট্রিবিউটস উইন্ডোতে ১ সাইজ রেশিও, ২ কনস্ট্রেইন্ট ডিলিট করা, ৩ হাইট বা উইডথ মোড, ৪ মার্জিন, এবং ৫ কনস্ট্রেইন্ট বায়াসের জন্য কন্ট্রোল অন্তর্ভুক্ত থাকে। এছাড়াও আপনি লেআউট এডিটরে ৬ কনস্ট্রেইন্ট লিস্টে ক্লিক করে স্বতন্ত্র কনস্ট্রেইন্টগুলো হাইলাইট করতে পারেন।

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

অ্যাট্রিবিউটস উইন্ডোর উপরের দিকে ভিউ ইন্সপেক্টর রয়েছে, যেখানে বিভিন্ন লেআউট অ্যাট্রিবিউটের জন্য কন্ট্রোল অন্তর্ভুক্ত আছে, যেমনটি চিত্র ১৪-তে দেখানো হয়েছে। এটি শুধুমাত্র কনস্ট্রেইন্ট লেআউটের ভিউগুলোর জন্য উপলব্ধ।

চিত্র ১৪-তে কলআউট ৩ দ্বারা নির্দেশিত প্রতীকগুলিতে ক্লিক করে আপনি উচ্চতা এবং প্রস্থ গণনা করার পদ্ধতি পরিবর্তন করতে পারেন। এই প্রতীকগুলি নিম্নরূপ সাইজ মোডকে উপস্থাপন করে। এই সেটিংসগুলির মধ্যে টগল করতে প্রতীকটিতে ক্লিক করুন:

• স্থির : নিম্নলিখিত টেক্সট বক্সে একটি নির্দিষ্ট মাত্রা উল্লেখ করুন অথবা এডিটরে ভিউটির আকার পরিবর্তন করুন।
• কন্টেন্ট মোড়ানো : ভিউটি তার বিষয়বস্তু ধারণ করার জন্য কেবল প্রয়োজনমতোই প্রসারিত হয়।
• লেআউট_সীমাবদ্ধ প্রস্থ

সীমাবদ্ধতা মেনে অনুভূমিক মাত্রা পরিবর্তন করতে এটিকে ' true সেট করুন। ডিফল্টরূপে, WRAP_CONTENT এ সেট করা একটি উইজেট কোনো সীমাবদ্ধতা দ্বারা সীমিত থাকে না।

• সীমাবদ্ধতা মেলানো : ভিউ-এর মার্জিন বিবেচনা করার পর, এটি উভয় পাশের সীমাবদ্ধতা পূরণের জন্য যথাসম্ভব প্রসারিত হয়। তবে, আপনি নিম্নলিখিত অ্যাট্রিবিউট এবং ভ্যালু ব্যবহার করে এই আচরণটি পরিবর্তন করতে পারেন। এই অ্যাট্রিবিউটগুলো কেবল তখনই কার্যকর হয় যখন আপনি ভিউ-এর প্রস্থকে "সীমাবদ্ধতা মেলানো" (match constraints) হিসেবে সেট করেন:
  • লেআউট_কনস্ট্রেইন্টউইডথ_মিনিট

    এটি ভিউটির সর্বনিম্ন প্রস্থের জন্য একটি dp ডাইমেনশন গ্রহণ করে।

  • লেআউট_কনস্ট্রেইন্টউইডথ_ম্যাক্স

    এটি ভিউটির সর্বোচ্চ প্রস্থের জন্য একটি dp ডাইমেনশন গ্রহণ করে।

  তবে, প্রদত্ত ডাইমেনশনে যদি কেবল একটিই সীমাবদ্ধতা থাকে, তাহলে ভিউটি তার বিষয়বস্তু অনুযায়ী প্রসারিত হয়। উচ্চতা বা প্রস্থ যেকোনোটিতে এই মোড ব্যবহার করে আপনি একটি আকারের অনুপাতও নির্ধারণ করতে পারেন।

আকার অনুপাত হিসাবে নির্ধারণ করুন

চিত্র ১৫। দৃশ্যটি ১৬:৯ অনুপাতে সেট করা হয়েছে, যেখানে প্রস্থটি উচ্চতার অনুপাতের উপর ভিত্তি করে নির্ধারিত।

আপনি ভিউয়ের আকারকে একটি অনুপাতে, যেমন 16:9, সেট করতে পারেন, যদি ভিউয়ের ডাইমেনশনগুলোর মধ্যে অন্তত একটি "ম্যাচ কনস্ট্রেইন্টস" ( 0dp ) হিসেবে সেট করা থাকে। অনুপাতটি সক্রিয় করতে, টগল অ্যাসপেক্ট রেশিও কনস্ট্রেইন্ট (চিত্র 14-এর কলআউট 1 )-এ ক্লিক করুন এবং প্রদর্শিত ইনপুটে width : height অনুপাতটি লিখুন।

যদি প্রস্থ এবং উচ্চতা উভয়ই "ম্যাচ কনস্ট্রেইন্টস" হিসেবে সেট করা থাকে, তাহলে কোন ডাইমেনশনটি অন্যটির অনুপাতের উপর ভিত্তি করে হবে তা নির্বাচন করতে আপনি "টগল অ্যাসপেক্ট রেশিও কনস্ট্রেইন্ট"-এ ক্লিক করতে পারেন। ভিউ ইন্সপেক্টর সংশ্লিষ্ট এজগুলোকে একটি সলিড লাইন দিয়ে সংযুক্ত করে দেখিয়ে দেয় কোন ডাইমেনশনটি অনুপাত হিসেবে সেট করা হয়েছে।

উদাহরণস্বরূপ, যদি আপনি উভয় দিককে 'ম্যাচ কনস্ট্রেইন্টস' (match constraints) এ সেট করেন, তাহলে প্রস্থকে উচ্চতার অনুপাতে সেট করতে 'টগল অ্যাসপেক্ট রেশিও কনস্ট্রেইন্ট' (Toggle Aspect Ratio Constraint) এ দুইবার ক্লিক করুন। সম্পূর্ণ আকারটি ভিউটির উচ্চতা দ্বারা নির্ধারিত হয়, যা চিত্র ১৫-তে দেখানো অনুযায়ী যেকোনো উপায়ে সংজ্ঞায়িত করা যেতে পারে।

ভিউ মার্জিন সামঞ্জস্য করুন

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

অ্যাট্রিবিউটস উইন্ডোতে প্রতিটি কনস্ট্রেইন্ট নির্দেশকারী লাইনের নম্বরে ক্লিক করে আপনি প্রতিটি ভিউয়ের মার্জিন নিয়ন্ত্রণ করতে পারেন। চিত্র ১৪-তে, কলআউট ৪ দেখাচ্ছে যে বটম মার্জিন ১৬ডিপি-তে সেট করা আছে।

চিত্র ১৬। টুলবারের মার্জিন বাটন।

টুলটি দ্বারা প্রদত্ত সমস্ত মার্জিন ৮ডিপি-র গুণিতক, যা আপনার ভিউগুলিকে ম্যাটেরিয়াল ডিজাইনের ৮ডিপি বর্গাকার গ্রিড সুপারিশের সাথে সামঞ্জস্যপূর্ণ করতে সাহায্য করে।

একটি শৃঙ্খল দিয়ে রৈখিক গোষ্ঠী নিয়ন্ত্রণ করুন

চিত্র ১৭। দুটি দৃশ্যসহ একটি অনুভূমিক শিকল।

চেইন হলো কতগুলো ভিউ-এর একটি সমষ্টি, যেগুলো দ্বিমুখী অবস্থানগত সীমাবদ্ধতার মাধ্যমে একে অপরের সাথে সংযুক্ত থাকে। একটি চেইনের অন্তর্ভুক্ত ভিউগুলো উল্লম্বভাবে বা অনুভূমিকভাবে বিন্যস্ত থাকতে পারে।

চিত্র ১৮। প্রতিটি চেইন শৈলীর উদাহরণ।

চেইনগুলোকে নিম্নলিখিত উপায়গুলোর যেকোনো একটিতে স্টাইল করা যেতে পারে:

1. স্প্রেড: মার্জিন বিবেচনা করার পর ভিউগুলো সুষমভাবে বণ্টিত হয়। এটিই ডিফল্ট।
2. অভ্যন্তরে বিস্তার: প্রথম এবং শেষ দৃশ্যগুলো শৃঙ্খলের প্রতিটি প্রান্তের সীমাবদ্ধতার সাথে সংযুক্ত থাকে, এবং বাকিগুলো সমানভাবে বণ্টিত হয়।
3. ওয়েটেড: যখন চেইনটি স্প্রেড বা স্প্রেড ইনসাইড-এ সেট করা থাকে, তখন আপনি এক বা একাধিক ভিউকে "ম্যাচ কনস্ট্রেইন্টস" ( 0dp )-এ সেট করে অবশিষ্ট স্থান পূরণ করতে পারেন। ডিফল্টরূপে, "ম্যাচ কনস্ট্রেইন্টস"-এ সেট করা প্রতিটি ভিউয়ের মধ্যে স্থানটি সমানভাবে বণ্টিত হয়, কিন্তু আপনি layout_constraintHorizontal_weight এবং layout_constraintVertical_weight অ্যাট্রিবিউট ব্যবহার করে প্রতিটি ভিউকে গুরুত্বের একটি ওয়েট বা মাত্রা নির্ধারণ করে দিতে পারেন। এটি একটি লিনিয়ার লেআউটের layout_weight মতোই কাজ করে: সর্বোচ্চ ওয়েট ভ্যালুযুক্ত ভিউটি সবচেয়ে বেশি জায়গা পায়, এবং একই ওয়েটযুক্ত ভিউগুলো সমান পরিমাণ জায়গা পায়।
4. প্যাকড: মার্জিন বিবেচনা করার পর ভিউগুলো একসাথে প্যাক করা থাকে। আপনি চেইনের 'হেড' ভিউ বায়াস পরিবর্তন করে পুরো চেইনটির বায়াস—বামে বা ডানে, অথবা উপরে বা নিচে—সমন্বয় করতে পারেন।

চেইনের 'হেড' ভিউ—যা একটি হরাইজন্টাল চেইনের (বাম থেকে ডান লেআউটে) সর্ববামের ভিউ এবং একটি ভার্টিকাল চেইনের সর্বশীর্ষের ভিউ—XML-এ চেইনটির স্টাইল নির্ধারণ করে। তবে, চেইনের যেকোনো ভিউ সিলেক্ট করে চেইন বাটনে ক্লিক করার মাধ্যমে আপনি স্প্রেড , স্প্রেড ইনসাইড এবং প্যাকড-এর মধ্যে টগল করতে পারেন। যা দৃশ্যের নিচে প্রদর্শিত হয়।

একটি চেইন তৈরি করতে, ভিডিও ৪-এ দেখানো অনুযায়ী নিম্নলিখিত কাজগুলো করুন:

1. চেইনে অন্তর্ভুক্ত করার জন্য সমস্ত ভিউ নির্বাচন করুন।
2. ভিউগুলোর যেকোনো একটিতে রাইট-ক্লিক করুন।
3. চেইন নির্বাচন করুন।
4. অনুভূমিকভাবে কেন্দ্র করুন অথবা উল্লম্বভাবে কেন্দ্র করুন ।

চেইন ব্যবহার করার সময় কয়েকটি বিষয় বিবেচনা করতে হবে:

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

স্বয়ংক্রিয়ভাবে সীমাবদ্ধতা তৈরি করুন

লেআউটে প্রতিটি ভিউ বসানোর সময় সেগুলিতে কনস্ট্রেইন্ট যোগ করার পরিবর্তে, আপনি লেআউট এডিটরে প্রতিটি ভিউকে আপনার পছন্দসই অবস্থানে নিয়ে গিয়ে তারপর 'ইনফার কনস্ট্রেইন্টস' (Infer Constraints) এ ক্লিক করতে পারেন। স্বয়ংক্রিয়ভাবে সীমাবদ্ধতা তৈরি করতে।

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

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

ডিফল্টরূপে অটোকানেক্ট নিষ্ক্রিয় থাকে। 'Enable Autoconnection to Parent'-এ ক্লিক করে এটি সক্রিয় করুন। লেআউট এডিটর টুলবারে।

কীফ্রেম অ্যানিমেশন

একটি ConstraintLayout মধ্যে, আপনি ConstraintSet এবং TransitionManager ব্যবহার করে এলিমেন্টগুলোর আকার ও অবস্থানের পরিবর্তনকে অ্যানিমেট করতে পারেন।

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

ConstraintSet ব্যবহার করে একটি অ্যানিমেশন তৈরি করতে, দুটি লেআউট ফাইল নির্দিষ্ট করুন যা অ্যানিমেশনটির শুরু এবং শেষের কীফ্রেম হিসেবে কাজ করবে। এরপর আপনি দ্বিতীয় কীফ্রেম ফাইল থেকে একটি ConstraintSet লোড করে প্রদর্শিত ConstraintLayout এ তা প্রয়োগ করতে পারবেন।

নিম্নলিখিত কোড উদাহরণটিতে দেখানো হয়েছে কিভাবে একটিমাত্র বাটনকে অ্যানিমেট করে স্ক্রিনের নিচে নিয়ে যাওয়া যায়।

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

অতিরিক্ত সম্পদ

সানফ্লাওয়ার ডেমো অ্যাপে ConstraintLayout ব্যবহার করা হয়েছে।