Compose-এ, কম্পোজ করার উপযুক্ত আইটেমের লুক ও ফিল পরিবর্তন করতে, আপনি একাধিক মডিফায়ার একসাথে চেইন করতে পারবেন। এইসব মডিফায়ার চেইন, কম্পোজ করার উপযুক্ত আইটেমে পাস করা বিধিনিষেধকে প্রভাবিত করতে পারে। এগুলি প্রস্থ ও উচ্চতার সীমা নির্ধারণ করে।
এই পৃষ্ঠায় চেইন করা মডিফায়ার কীভাবে সীমাবদ্ধতাকে প্রভাবিত করে এবং এর ফলে কম্পোজ করার উপযুক্ত আইটেমের মাপ ও প্লেসমেন্ট কীভাবে প্রভাবিত হয় তা বর্ণনা করা হয়েছে।
UI ট্রি-তে মডিফায়ার
মডিফায়ারগুলি একে অপরের উপর কীভাবে প্রভাব ফেলে তা বুঝতে, কম্পোজিশন ফেজে জেনারেট করা UI ট্রি-তে সেগুলি কীভাবে দেখা যায় তা ভিজ্যুয়ালাইজ করা সহায়ক। আরও তথ্যের জন্য, কম্পোজিশন বিভাগ দেখুন।
UI ট্রি-তে, আপনি লেআউট নোডের জন্য র্যাপার নোড হিসেবে মডিফায়ারকে ভিউজুয়ালাইজ করতে পারবেন:
কোনও কম্পোজ করার উপযুক্ত আইটেমে একাধিক মডিফায়ার যোগ করলে মডিফায়ারের একটি চেইন তৈরি হয়। আপনি
একাধিক মডিফায়ার চেইন করলে, প্রতিটি মডিফায়ার নোড বাকি চেইন
ও লেআউট নোডকে নিজের মধ্যে র্যাপ করে নেয়। যেমন, আপনি যখন clip এবং একটি
size মডিফায়ার চেইন করেন, তখন clip মডিফায়ার নোড size মডিফায়ার নোডকে র্যাপ করে,
যা তারপরে Image লেআউট নোডকে র্যাপ করে।
লেআউট ফেজে, ট্রি ওয়াক করা অ্যালগরিদম একই থাকে, কিন্তু প্রতিটি মডিফায়ার নোডও ভিজিট করা হয়। এইভাবে, কোনও মডিফায়ার, সেটির র্যাপ করা মডিফায়ার বা লেআউট নোডের সাইজ সংক্রান্ত প্রয়োজনীয়তা ও প্লেসমেন্ট পরিবর্তন করতে পারে।
২ নম্বর ছবিতে দেখানো হয়েছে যে Image ও Text কম্পোজ করার পদ্ধতি
নিজেদের মধ্যে মডিফায়ারের একটি চেইন নিয়ে গঠিত যা একটি লেআউট নোডকে র্যাপ করে।
Row ও Column-এর প্রয়োগ হল লেআউট নোড যা বর্ণনা করে কীভাবে
তাদের চাইল্ড লেআউট করতে হয়।
সংক্ষেপে:
- মডিফায়ার একটি মডিফায়ার বা লেআউট নোডকে র্যাপ করে।
- লেআউট নোড একাধিক চাইল্ড নোড লেআউট করতে পারে।
নিম্নলিখিত বিভাগগুলি থেকে আপনি জানতে পারবেন যে কীভাবে এই মেন্টাল মডেল ব্যবহার করে মডিফায়ার চেইনিং সম্পর্কে যুক্তি দেওয়া যায় এবং কীভাবে এটি কম্পোজ করার উপযুক্ত আইটেমের সাইজকে প্রভাবিত করে।
লেআউট ফেজে সীমাবদ্ধতা
লেআউট ফেজ প্রতিটি লেআউট নোডের প্রস্থ, উচ্চতা এবং x, y কোঅর্ডিনেট খুঁজে পেতে তিনটি ধাপের অ্যালগরিদম অনুসরণ করে:
- বাচ্চাদের পরিমাপ করা: কোনও নোড তার চিলড্রেনদের পরিমাপ করে, যদি থাকে।
- নিজের সাইজ নির্ধারণ করা: সেইসব পরিমাপের উপর ভিত্তি করে, কোনও নোড নিজের সাইজ নির্ধারণ করে।
- চাইল্ড নোড প্লেস করা: প্রতিটি চাইল্ড নোডকে নোডের নিজস্ব পজিশনের সাথে সম্পর্কিত হিসেবে প্লেস করা হয়।
Constraints অ্যালগরিদমের প্রথম দুটি
ধাপে নোডের জন্য সঠিক সাইজ খুঁজে পেতে সাহায্য করে। সীমাবদ্ধতা কোনও
নোডের প্রস্থ ও উচ্চতার সর্বনিম্ন ও সর্বাধিক সীমা নির্ধারণ করে। নোড যখন এর সাইজ নির্ধারণ করে, তখন এর পরিমাপ করা সাইজ
এই সাইজ রেঞ্জের মধ্যে থাকতে হবে।
বিধিনিষেধের ধরন
সীমাবদ্ধতা নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:
- বাউন্ডেড: নোডের সর্বাধিক ও সর্বনিম্ন প্রস্থ ও দৈর্ঘ্য আছে।
- সীমাবদ্ধ নয়: নোডটি কোনও সাইজের মধ্যে সীমাবদ্ধ নয়। সর্বাধিক প্রস্থ ও উচ্চতার সীমা অসীম হিসেবে সেট করা আছে।
- নির্দিষ্ট: নোডকে নির্দিষ্ট সাইজ সংক্রান্ত প্রয়োজনীয়তা মেনে চলতে বলা হয়। সর্বনিম্ন ও সর্বোচ্চ সীমা একই ভ্যালুতে সেট করা আছে।
- কম্বিনেশন: নোডটি পূর্ববর্তী সীমাবদ্ধতার ধরনের কম্বিনেশন অনুসরণ করে। যেমন, কোনও সীমাবদ্ধতা প্রস্থকে বেঁধে রাখতে পারে, তবে সীমাহীন সর্বাধিক উচ্চতা নির্ধারণ করতে পারে অথবা একটি নির্দিষ্ট প্রস্থ সেট করতে পারে, তবে একটি সীমাবদ্ধ উচ্চতা প্রদান করতে পারে।
পরবর্তী বিভাগে বর্ণনা করা হয়েছে যে কীভাবে এই বিধিনিষেধগুলি কোনও পেরেন্ট থেকে চাইল্ডে পাস করা হয়।
অভিভাবক থেকে সন্তানের কাছে কীভাবে বিধিনিষেধ পাস করা হয়
লেআউটের সীমাবদ্ধতা ফেজে বর্ণিত অ্যালগরিদমের প্রথম ধাপে, UI ট্রি-তে অভিভাবক থেকে সন্তানের মধ্যে সীমাবদ্ধতা পাস করা হয়।
কোনও পেরেন্ট নোড তার চাইল্ড নোডকে পরিমাপ করলে, প্রতিটি চাইল্ড নোডকে এইসব সীমাবদ্ধতা প্রদান করে যাতে তারা বুঝতে পারে যে তাদের কত বড় বা ছোট হতে দেওয়া হবে। তারপরে, এটি যখন নিজের সাইজ নির্ধারণ করে, তখন এটি সেইসব সীমাবদ্ধতাও মেনে চলে যা এর নিজের অভিভাবকরা পাস করে।
মোটামুটিভাবে, অ্যালগরিদম নিম্নলিখিত উপায়ে কাজ করে:
- প্রকৃতপক্ষে কতটা জায়গা দখল করতে চায় তা নির্ধারণ করতে, UI ট্রি-এর রুট নোড এর চাইল্ড নোডকে পরিমাপ করে এবং একই সীমাবদ্ধতা এর প্রথম চাইল্ড নোডে ফরোয়ার্ড করে।
- বাচ্চা যদি এমন মডিফায়ার হয় যা পরিমাপকে প্রভাবিত করে না, তাহলে এটি পরবর্তী মডিফায়ারে সীমাবদ্ধতা ফরওয়ার্ড করে। যেসব মডিফায়ার পরিমাপকে প্রভাবিত করে, সেগুলি না পাওয়া পর্যন্ত মডিফায়ার চেনে অপরিবর্তিত অবস্থায় সীমাবদ্ধতাগুলি পাস করা হয়। তারপরে, সীমাবদ্ধতাগুলি সেই অনুযায়ী আবার সাইজ করা হয়।
- কোনও নোডে পৌঁছে গেলে, সেটির কোনও চাইল্ড নোড না থাকলে (সেটিকে "লিফ নোড" বলা হয়), সেটি পাস-ইন করা সীমাবদ্ধতার উপর ভিত্তি করে নিজের সাইজ নির্ধারণ করে এবং এই সমাধান করা সাইজটি সেটির পেরেন্ট নোডে রিটার্ন করে।
- এই সন্তানের পরিমাপের উপর ভিত্তি করে পেরেন্ট তার সীমাবদ্ধতা মানিয়ে নেয় এবং এইসব মানিয়ে নেওয়া সীমাবদ্ধতা সহ তার পরবর্তী সন্তানকে কল করে।
- কোনও অভিভাবকের সব সন্তানের পরিমাপ করা হয়ে গেলে, অভিভাবক নোড নিজের সাইজ নিজে থেকেই নির্ধারণ করে এবং সেটি নিজের অভিভাবককে জানায়।
- এইভাবে, সম্পূর্ণ ট্রি ডেপথ-ফার্স্ট পদ্ধতিতে ট্রাভার্স করা হয়। অবশেষে, সব নোড তাদের সাইজ সম্পর্কে সিদ্ধান্ত নিয়েছে এবং পরিমাপের ধাপটি সম্পূর্ণ হয়েছে।
বিস্তারিত উদাহরণের জন্য, বাধ্যবাধকতা ও মডিফায়ার অর্ডার ভিডিও দেখুন।
কনস্ট্রেন্টের উপর প্রভাব ফেলে এমন মডিফায়ার
আপনি আগের বিভাগে জেনেছেন যে কিছু মডিফায়ার সীমাবদ্ধতা সাইজকে প্রভাবিত করতে পারে। নিম্নলিখিত বিভাগে নির্দিষ্ট মডিফায়ার সম্পর্কে বর্ণনা করা হয়েছে যেগুলি সীমাবদ্ধতার উপর প্রভাব ফেলে।
size মডিফায়ার
size মডিফায়ার কন্টেন্টের পছন্দের সাইজ ঘোষণা করে।
যেমন, নিম্নলিখিত UI ট্রি 300dp
by 200dp কন্টেনারে রেন্ডার করা উচিত। সীমাবদ্ধতাগুলি আবদ্ধ, যা 100dp এবং
300dp-এর মধ্যে প্রস্থ এবং 100dp এবং 200dp-এর মধ্যে উচ্চতা নির্ধারণ করে:
size মডিফায়ার, এর কাছে পাঠানো ভ্যালুর সাথে ম্যাচ করার জন্য ইনকামিং সীমাবদ্ধতা অ্যাডজাস্ট করে।
এই উদাহরণে, ভ্যালু হল 150dp:
size মডিফায়ার 150dp-এ সীমাবদ্ধতা অ্যাডজাস্ট করছে।প্রস্থ ও দৈর্ঘ্য যদি সবচেয়ে ছোট সীমাবদ্ধতার সীমার চেয়ে ছোট হয় অথবা সবচেয়ে বড় সীমাবদ্ধতার সীমার চেয়ে বড় হয়, তাহলে মডিফায়ারটি পাস করা সীমাবদ্ধতার সাথে যতটা সম্ভব মিলে যায়, তবে এর সাথে সাথে পাস করা সীমাবদ্ধতাও মেনে চলে:
size মডিফায়ারটি পাস করা সীমাবদ্ধতা যতখানি সম্ভব
মেনে চলে।মনে রাখবেন, একাধিক size মডিফায়ার চেইন করা যায় না। প্রথম size
মডিফায়ার ন্যূনতম ও সর্বাধিক সীমাবদ্ধতা, দুটিকেই একটি নির্দিষ্ট ভ্যালুতে সেট করে। এমনকি যদি
দ্বিতীয় সাইজ মডিফায়ারটি ছোট বা বড় সাইজের অনুরোধ করে, তবুও এটিকে পাস করা
নির্দিষ্ট বাউন্ড মেনে চলতে হবে, তাই এটি সেইসব ভ্যালু ওভাররাইড করবে না:
size মডিফায়ারের একটি চেইন, যেখানে (50dp)-এ পাস করা দ্বিতীয় ভ্যালু
প্রথম ভ্যালুকে (100dp) ওভাররাইড করে না।requiredSize মডিফায়ার
ইনকামিং সীমাবদ্ধতা ওভাররাইড করার জন্য আপনার
নোডের প্রয়োজন হলে, size-এর পরিবর্তে requiredSize মডিফায়ার ব্যবহার করুন। requiredSize মডিফায়ার ইনকামিং
কনস্ট্রেন্টকে পাল্টে দেয় এবং আপনি যে সাইজ নির্দিষ্ট করেন সেটি সঠিক বাউন্ড হিসেবে পাস করে।
সাইজটি যখন ট্রি-তে আবার পাস করা হয়, তখন চাইল্ড নোডটি উপলভ্য স্পেসে সেন্টার করা হবে:
requiredSize মডিফায়ার size মডিফায়ারেরwidth ও height মডিফায়ার
size মডিফায়ার, সীমাবদ্ধতার প্রস্থ ও উচ্চতা, দু'টিকেই অ্যাডজাস্ট করে। width মডিফায়ারের সাহায্যে আপনি
একটি নির্দিষ্ট প্রস্থ সেট করতে পারবেন, তবে উচ্চতা অনির্ধারিত রাখতে পারবেন।
একইভাবে, height মডিফায়ার ব্যবহার করে, আপনি একটি নির্দিষ্ট উচ্চতা সেট করতে পারবেন, কিন্তু প্রস্থ
নির্ধারণ না করেই ছেড়ে দিতে পারবেন:
width মডিফায়ার ও height মডিফায়ার যথাক্রমে নির্দিষ্ট প্রস্থ
ও উচ্চতা সেট করে।sizeIn মডিফায়ার
sizeIn মডিফায়ার আপনাকে প্রস্থ ও উচ্চতার জন্য
নির্দিষ্ট সর্বনিম্ন ও সর্বাধিক সীমাবদ্ধতা সেট করতে দেয়। সীমাবদ্ধতার উপর আরও সূক্ষ্ম নিয়ন্ত্রণ পেতে চাইলে sizeIn মডিফায়ার ব্যবহার করুন
।
minWidth, maxWidth, minHeight ও
maxHeight সেট করা sizeIn মডিফায়ার।উদাহরণ
এই বিভাগে, চেইন করা মডিফায়ার সহ বিভিন্ন কোড স্নিপেট থেকে পাওয়া আউটপুট দেখানো ও ব্যাখ্যা করা হয়েছে।
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
এই স্নিপেট থেকে নিম্নলিখিত আউটপুট পাওয়া যায়:
Image মডিফায়ার চেনের ফলাফল হিসেবে সর্বাধিক সাইজ পূরণ করে।fillMaxSizeমডিফায়ার, সর্বনিম্ন প্রস্থ ও উচ্চতা উভয়কেই সর্বাধিক ভ্যালুতে সেট করার জন্য সীমাবদ্ধতা পরিবর্তন করে — প্রস্থে300dpও উচ্চতায়200dp।sizeমডিফায়ার50dpসাইজ ব্যবহার করতে চাইলেও, এটিকে এখনও ইনকামিং ন্যূনতম সীমাবদ্ধতা মেনে চলতে হবে। তাইsizeমডিফায়ারটি200-এর মাধ্যমে300-এর সঠিক সীমাবদ্ধতাও আউটপুট করবে, এর ফলেsizeমডিফায়ারে দেওয়া ভ্যালুকে উপেক্ষা করা হবে।Imageএই সীমার মধ্যে থাকে এবং300x200সাইজের রিপোর্ট করে, যা ট্রিয়ের সব লেভেলে পাস করা হয়।
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
এই স্নিপেট থেকে নিম্নলিখিত আউটপুট পাওয়া যায়:
Imageটি মাঝখানে রাখা হয়েছে এবং এর সাইজ 50dp
fillMaxSizeমডিফায়ারটি, প্রস্থ ও উচ্চতা উভয়ই সর্বাধিক ভ্যালুতে সেট করার জন্য সীমাবদ্ধতা অ্যাডজাস্ট করে — প্রস্থে300dpএবং উচ্চতায়200dp।wrapContentSizeমডিফায়ার ন্যূনতম সীমাবদ্ধতা রিসেট করে। তাই,fillMaxSize-এর ফলে নির্দিষ্ট সীমাবদ্ধতা তৈরি হলেও,wrapContentSizeসেটিকে আবার রিসেট করে সীমিত সীমাবদ্ধতায় পরিবর্তন করে দেয়। নিম্নলিখিত নোড এখন আবার সম্পূর্ণ জায়গা জুড়ে থাকতে পারে অথবা সম্পূর্ণ জায়গার চেয়ে ছোট হতে পারে।sizeমডিফায়ারটি50-এর সর্বনিম্ন ও সর্বাধিক সীমার মধ্যে সীমাবদ্ধতা সেট করে।Image-এর রেজোলিউশন50x50এবংsizeমডিফায়ার সেটি ফরওয়ার্ড করে।wrapContentSizeমডিফায়ারের একটি বিশেষ প্রপার্টি আছে। এটি নিজের চাইল্ড নেয় এবং সেটিকে উপলভ্য ন্যূনতম বাউন্ডের কেন্দ্রে রাখে যা এর কাছে পাঠানো হয়েছে। তাই, এটি তার পেরেন্টকে যে সাইজ জানায় তা হল সেটিতে পাস করা ন্যূনতম বাউন্ডের সমান।
মাত্র তিনটি মডিফায়ার একত্রিত করে, আপনি কম্পোজ করার উপযুক্ত আইটেমের সাইজ নির্ধারণ করতে এবং সেটির পেরেন্ট এলিমেন্টের মধ্যে সেটিকে সেন্টার করতে পারবেন।
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
এই স্নিপেট থেকে নিম্নলিখিত আউটপুট পাওয়া যায়:
clipমডিফায়ার সীমাবদ্ধতা পরিবর্তন করে না।paddingমডিফায়ার সর্বাধিক সীমাবদ্ধতা কমায়।sizeমডিফায়ার সব বিধিনিষেধকে100dp-এ সেট করে।Imageসেইসব সীমাবদ্ধতা মেনে চলে এবং100dp-এর সাইজ রিপোর্ট করে100dp।paddingমডিফায়ারটিImage-এর দেওয়া সাইজের সব দিকে10dpযোগ করে, তাই প্যাডিং সহ লেআউটটি120dp-এর প্রস্থ ও উচ্চতা রিপোর্ট করে।- এখন, ড্রয়িং ফেজে,
clipমডিফায়ার120dpx120dpক্যানভাসের উপর কাজ করে। এটি সেই সাইজের একটি বৃত্তাকার মাস্ক তৈরি করে। paddingমডিফায়ারটি তারপরে সব দিক থেকে10dpকরে কন্টেন্ট ইনসেট করে, যাImage-এর ক্যানভাসের সাইজ100dpকরে100dpকমিয়ে দেয়।- সেই ছোট ক্যানভাসে
Imageআঁকা হয়।120dp-এর মূল বৃত্তের উপর ভিত্তি করে ছবিটি ক্লিপ করা হয়েছে, তাই আউটপুটটি বৃত্তাকার নয়।