অ্যান্ড্রয়েড কনস্ট্রেইন্ট লেয়াউট সম্পর্কে বিস্তারিত

অ্যান্ড্রয়েড স্টুডিও ২.২ থেকে কনস্ট্রেইন্ট লেয়াউটের জন্য বিল্টইন সাপোর্ট যুক করেছে। আগে ডিফল্ট অ্যাপ লেয়াউট ফাইলটিতে রিলেটিভ লেয়াউট যুক্ত করত। ২.৩ থেকে ডিফল্ট ভাবে কনস্ট্রেইন্ট লেয়াউট যুক্ত করে দিচ্ছে।

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

  • layout_toRightOf
  • layout_toLeftOf
  • layout_toTopOf
  • layout_toBottomOf

 

কনস্ট্রেইন্ট লেয়াউটে এই প্রপার্টি গুলো ব্যবহার করতে পারিঃ

  • layout_constraintTop_toTopOf — Align the topof the desired view to the top of another.
  • layout_constraintTop_toBottomOf— Align the topof the desired view to the bottom of another.
  • layout_constraintBottom_toTopOf — Align the bottomof the desired view to the top of another.
  • layout_constraintBottom_toBottomOf — Align the bottomof the desired view to the bottom of another.
  • layout_constraintLeft_toTopOf — Align the leftof the desired view to the top of another.
  • layout_constraintLeft_toBottomOf — Align the leftof the desired view to the bottom of another.
  • layout_constraintLeft_toLeftOf — Align the leftof the desired view to the left of another.
  • layout_constraintLeft_toRightOf — Align the leftof the desired view to the right of another.
  • layout_constraintRight_toTopOf — Align the rightof the desired view to the top of another.
  • layout_constraintRight_toBottomOf — Align the rightof the desired view to the bottom of another.
  • layout_constraintRight_toLeftOf — Align the rightof the desired view to the left of another.
  • layout_constraintRight_toRightOf — Align the rightof the desired view to the right of another.

 

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

কনস্ট্রেইন্টঃ কনস্ট্রেইন্ট দিয়ে একটা উইজেটের সাথে আরেকটা উইজেটের পজিশন, এলাইনমেন্ট, মূল লেয়াউটের সাথে এলাইনমেন্ট ইত্যাদি ঠিক করে দেওয়া যায়।

 

কন্সট্রেইন্ট লেয়াউট নিয়ে কাজ করার জন্য রয়েছে অনেক গুলো হ্যান্ডেলার। যেমনঃ

রিসাইজ হ্যান্ডেলঃ

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

সাইড কনস্ট্রেইন্ট হ্যান্ডেলঃ

একটা ভিউকে আরেকটা ভিউর পাশাপাশি রাখার জন্য সাইড কনস্ট্রেইন্ট হ্যান্ডেল ব্যবহার করা যায়। এ ছাড়া একটা উইজেটের উপরের কনস্ট্রেইন্ট হ্যান্ডেল আরেকটা উইজেটের উপরের কনস্ট্রেন্ট হ্যান্ডেলের সাথে যুক্ত করে দিলে যেগুলো ভার্টিক্যালি এলাইন হয়ে যাবে।

মার্জিনঃ

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

 

পজিশনিংঃ

যে কোন উইজেটের সাপেক্ষে বা মূল লেয়াউটের সাপেক্ষে আমরা পজিশন সেট করে দিতে পারি। উপর থেকে ৫০ এবং সাইড থেকে ৫০ সেট করা মানে হচ্ছে উইজেটটি মধ্যখানে থাকবে। এটা হচ্ছে % ভ্যালু। উপর নিচ, আমরা যে কোন দিকে ভ্যালু কমাতে বাড়াতে পারব। 

 

যে কোন উইজেটের নিজস্ব ডাইমেনশনঃ 

আমরা যে কোন উইজেটের সাইজ সেট করে দিতে পারি। যেমন Fixed, Any Size অথবা Wrap Content.

 এই আইকন মানে হচ্ছে Fixed ভ্যালু। যেমন ফিক্সড হাইট বা ফিক্সড ওয়াইড। একই ভাবে  এর মানে হচ্ছে Any Size এবং  হচ্ছে Wrap Content সাইন।

 

Auto Connect:

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

Inference:

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

অ্যান্ড্রয়েড স্টুডিও ২.৩ তে কনস্ট্রেইন্ট লেয়াউটের ডেপেনডেন্সি যুক্ত করা থাকে। এর আগের ভার্সনে নিজ থেকে যুক্ত করে নিতে হবে।

compile ‘com.android.support.constraint:constraint-layout:1.0.1’

এ ছাড়া আপনি চাইলে যে কোন লেয়াউটকে কনস্ট্রেইন্ট লেয়াউটে কনভার্ট করে নিতে পারবেন। ডিজাইন মুডে বাম দিকের নিচে Component tree থেকে কনভার্ট করার অপশন পাওয়া যাবে। 

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

 

এবার নিজে নিজে চেষ্টা করে নিচের ইমেজের মত ডিজাইনটি কনস্ট্রেইন্ট লেয়াউট ব্যবহার করে ইমপ্লিমেন্ট করার চেষ্টা করতে পারেনঃ

 

না পারলে গুগলের CodeLabs থেকে সোর্স কোড ও বিস্তারিত জেনে নিতে পারেন।  এই পোস্টের ব্যবহৃত বেশির ভাগ ইমেজ গুগলের Codelabs থেকে নেওয়া।

Leave a Reply