Compose-এ, আপনি একটি কম্পোজেবলের চেহারা ও অনুভূতি পরিবর্তন করার জন্য একাধিক মডিফায়ার একসাথে চেইন করতে পারেন। এই মডিফায়ার চেইনগুলো কম্পোজেবলে পাঠানো কনস্ট্রেইন্টগুলোকে প্রভাবিত করতে পারে, যা এর প্রস্থ এবং উচ্চতার সীমা নির্ধারণ করে।
এই পৃষ্ঠায় বর্ণনা করা হয়েছে কিভাবে চেইনড মডিফায়ারগুলো কনস্ট্রেইন্টকে এবং ফলস্বরূপ, কম্পোজেবলগুলোর পরিমাপ ও স্থাপনকে প্রভাবিত করে।
UI ট্রিতে মডিফায়ার
মডিফায়ারগুলো কীভাবে একে অপরকে প্রভাবিত করে তা বোঝার জন্য, কম্পোজিশন পর্যায়ে তৈরি হওয়া UI ট্রি-তে সেগুলোর উপস্থিতি কল্পনা করা সহায়ক। আরও তথ্যের জন্য, কম্পোজিশন বিভাগটি দেখুন।
UI ট্রি-তে, আপনি মডিফায়ারগুলোকে লেআউট নোডগুলোর জন্য র্যাপার নোড হিসেবে কল্পনা করতে পারেন:
একটি কম্পোজেবলে একাধিক মডিফায়ার যোগ করলে মডিফায়ারের একটি চেইন তৈরি হয়। যখন আপনি একাধিক মডিফায়ারকে চেইন করেন, তখন প্রতিটি মডিফায়ার নোড চেইনের বাকি অংশ এবং লেআউট নোডকে এর ভেতরে জড়িয়ে রাখে । উদাহরণস্বরূপ, যখন আপনি একটি clip এবং একটি size মডিফায়ারকে চেইন করেন, তখন clip মডিফায়ার নোডটি size মডিফায়ার নোডকে জড়িয়ে রাখে, যা পরবর্তীতে Image লেআউট নোডকে জড়িয়ে রাখে।
লেআউট পর্যায়ে, ট্রি-কে চালনা করার অ্যালগরিদমটি একই থাকে, কিন্তু প্রতিটি মডিফায়ার নোডও পরিদর্শন করা হয়। এইভাবে, একটি মডিফায়ার তার দ্বারা আবৃত মডিফায়ার বা লেআউট নোডের আকারের প্রয়োজনীয়তা এবং অবস্থান পরিবর্তন করতে পারে।
চিত্র ২-এ যেমন দেখানো হয়েছে, Image এবং Text কম্পোজেবলগুলোর বাস্তবায়ন একটিমাত্র লেআউট নোডকে ঘিরে থাকা মডিফায়ারের একটি শৃঙ্খল নিয়ে গঠিত।
Row এবং Column এর ইমপ্লিমেন্টেশনগুলো হলো লেআউট নোড, যা তাদের চাইল্ড নোডগুলোকে কীভাবে বিন্যস্ত করতে হবে তা বর্ণনা করে।
সংক্ষেপে:
- মডিফায়ারগুলো একটি একক মডিফায়ার বা লেআউট নোডকে আবৃত করে।
- লেআউট নোড একাধিক চাইল্ড নোড বিন্যস্ত করতে পারে।
নিম্নলিখিত বিভাগগুলিতে বর্ণনা করা হয়েছে কীভাবে এই মানসিক মডেলটি ব্যবহার করে মডিফায়ার চেইনিং সম্পর্কে যুক্তি দেওয়া যায় এবং এটি কীভাবে কম্পোজেবলের আকারকে প্রভাবিত করে।
লেআউট পর্যায়ে সীমাবদ্ধতা
লেআউট পর্যায়টি প্রতিটি লেআউট নোডের প্রস্থ, উচ্চতা এবং x, y স্থানাঙ্ক খুঁজে বের করার জন্য একটি তিন-ধাপের অ্যালগরিদম অনুসরণ করে:
- চাইল্ড পরিমাপ করুন : একটি নোড তার চাইল্ডদের পরিমাপ করে, যদি থাকে।
- নিজস্ব আকার নির্ধারণ : সেই পরিমাপগুলোর উপর ভিত্তি করে একটি নোড তার নিজের আকার নির্ধারণ করে।
- চাইল্ড নোডের অবস্থান : প্রতিটি চাইল্ড নোডকে একটি নোডের নিজের অবস্থানের সাপেক্ষে স্থাপন করা হয়।
অ্যালগরিদমের প্রথম দুটি ধাপে Constraints নোডগুলোর জন্য সঠিক আকার খুঁজে পেতে সাহায্য করে। কনস্ট্রেইন্টগুলো একটি নোডের প্রস্থ এবং উচ্চতার সর্বনিম্ন ও সর্বোচ্চ সীমা নির্ধারণ করে দেয়। যখন নোডটি তার আকার নির্ধারণ করে, তখন তার পরিমাপকৃত আকারটি অবশ্যই এই পরিসরের মধ্যে থাকতে হবে।
সীমাবদ্ধতার প্রকারভেদ
একটি সীমাবদ্ধতা নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:
- সীমাবদ্ধ : নোডটির একটি সর্বোচ্চ ও সর্বনিম্ন প্রস্থ এবং উচ্চতা রয়েছে।
- অসীম : নোডটি কোনো আকারে সীমাবদ্ধ নয়। এর সর্বোচ্চ প্রস্থ এবং উচ্চতার সীমা অসীম নির্ধারণ করা হয়েছে।
- সুনির্দিষ্ট : নোডটিকে একটি সুনির্দিষ্ট আকারের শর্ত অনুসরণ করতে বলা হয়েছে। এর সর্বনিম্ন এবং সর্বোচ্চ সীমা একই মানে নির্ধারণ করা হয়েছে।
- সংমিশ্রণ : নোডটি পূর্ববর্তী সীমাবদ্ধতার ধরণগুলোর একটি সংমিশ্রণ অনুসরণ করে। উদাহরণস্বরূপ, একটি সীমাবদ্ধতা প্রস্থকে সীমাবদ্ধ করার পাশাপাশি একটি অসীম সর্বোচ্চ উচ্চতার অনুমতি দিতে পারে, অথবা একটি নির্দিষ্ট প্রস্থ নির্ধারণ করে একটি সীমাবদ্ধ উচ্চতা প্রদান করতে পারে।
পরবর্তী অংশে বর্ণনা করা হয়েছে কিভাবে এই সীমাবদ্ধতাগুলো প্যারেন্ট থেকে চাইল্ডে স্থানান্তরিত হয়।
কীভাবে সীমাবদ্ধতাগুলি প্যারেন্ট থেকে চাইল্ডে স্থানান্তরিত হয়
"লেআউট পর্যায়ে সীমাবদ্ধতা" অংশে বর্ণিত অ্যালগরিদমের প্রথম ধাপে, UI ট্রি-তে সীমাবদ্ধতাগুলো প্যারেন্ট থেকে চাইল্ডে প্রেরণ করা হয়।
যখন একটি প্যারেন্ট নোড তার চাইল্ডদের পরিমাপ করে, তখন এটি প্রতিটি চাইল্ডকে এই সীমাবদ্ধতাগুলো প্রদান করে, যাতে তারা জানতে পারে যে তাদের আকার কতটা বড় বা ছোট হতে পারবে। এরপর, যখন এটি নিজের আকার নির্ধারণ করে, তখন এটি তার প্যারেন্টদের দ্বারা প্রদত্ত সীমাবদ্ধতাগুলোও মেনে চলে।
সাধারণভাবে, অ্যালগরিদমটি নিম্নলিখিত উপায়ে কাজ করে:
- প্রকৃতপক্ষে এটি যে আকারটি দখল করতে চায় তা নির্ধারণ করার জন্য, UI ট্রি-এর রুট নোডটি তার চাইল্ডদের পরিমাপ করে এবং একই সীমাবদ্ধতাগুলো তার প্রথম চাইল্ডের কাছে পাঠিয়ে দেয়।
- যদি চাইল্ড মডিফায়ারটি এমন হয় যা পরিমাপকে প্রভাবিত করে না, তবে এটি কনস্ট্রেইন্টগুলো পরবর্তী মডিফায়ারের কাছে পাঠিয়ে দেয়। পরিমাপকে প্রভাবিত করে এমন কোনো মডিফায়ারে না পৌঁছানো পর্যন্ত কনস্ট্রেইন্টগুলো মডিফায়ার চেইন বরাবর অপরিবর্তিতভাবে প্রেরিত হতে থাকে। এরপর কনস্ট্রেইন্টগুলোর আকার সেই অনুযায়ী পরিবর্তন করা হয়।
- যখন এমন কোনো নোডে পৌঁছানো যায় যার কোনো চাইল্ড নেই (যাকে "লিফ নোড" বলা হয়), তখন এটি প্রদত্ত সীমাবদ্ধতার উপর ভিত্তি করে নিজের আকার নির্ধারণ করে এবং এই নির্ধারিত আকারটি তার প্যারেন্টের কাছে ফেরত পাঠায়।
- প্যারেন্ট এই চাইল্ডের পরিমাপের উপর ভিত্তি করে তার সীমাবদ্ধতাগুলো পরিবর্তন করে এবং এই পরিবর্তিত সীমাবদ্ধতাগুলোসহ তার পরবর্তী চাইল্ডকে কল করে।
- একবার কোনো প্যারেন্টের সমস্ত চাইল্ড পরিমাপ করা হয়ে গেলে, প্যারেন্ট নোডটি তার নিজের আকার নির্ধারণ করে এবং তা তার নিজের প্যারেন্টকে জানিয়ে দেয়।
- এইভাবে, সম্পূর্ণ ট্রি-টি গভীরতা অনুসারে পরিভ্রমণ করা হয়। অবশেষে, সমস্ত নোড তাদের আকার নির্ধারণ করে ফেলে এবং পরিমাপের ধাপটি সম্পন্ন হয়।
একটি বিশদ উদাহরণের জন্য, Constraints and modifier order ভিডিওটি দেখুন।
সীমাবদ্ধতাকে প্রভাবিত করে এমন সংশোধক
পূর্ববর্তী বিভাগে আপনি শিখেছেন যে কিছু মডিফায়ার কনস্ট্রেইন্টের আকারকে প্রভাবিত করতে পারে। নিম্নলিখিত বিভাগগুলিতে সেই নির্দিষ্ট মডিফায়ারগুলি বর্ণনা করা হয়েছে যেগুলি কনস্ট্রেইন্টকে প্রভাবিত করে।
size পরিবর্তনকারী
size মডিফায়ারটি কন্টেন্টের পছন্দসই আকার নির্ধারণ করে।
উদাহরণস্বরূপ, নিম্নলিখিত UI ট্রি-টি 300dp বাই 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মডিফায়ারটি300বাই200এর সঠিক সীমাবদ্ধতার সীমাও আউটপুট হিসেবে দেবে, যা কার্যকরভাবেsizeমডিফায়ারে প্রদত্ত মানটিকে উপেক্ষা করবে। -
Imageএই সীমানা অনুসরণ করে এবং300বাই200আকারের একটি সাইজ রিপোর্ট করে, যা ট্রি-এর একেবারে উপর পর্যন্ত প্রেরণ করা হয়।
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
এই কোড স্নিপেটটি নিম্নলিখিত আউটপুট তৈরি করে:
Image কেন্দ্রে স্থাপন করা হয়েছে এবং এর আকার 50dp তে নির্ধারণ করা হয়েছে।-
fillMaxSizeমডিফায়ারটি কনস্ট্রেইন্টগুলোকে এমনভাবে পরিবর্তন করে যাতে সর্বনিম্ন প্রস্থ এবং উচ্চতা উভয়ই সর্বোচ্চ মানে সেট হয় — অর্থাৎ প্রস্থে300dpএবং উচ্চতায়200dp। -
wrapContentSizeমডিফায়ারটি সর্বনিম্ন সীমাবদ্ধতাগুলো রিসেট করে। তাই,fillMaxSizeএর ফলে যেখানে নির্দিষ্ট সীমাবদ্ধতা তৈরি হতো,wrapContentSizeসেটিকে পুনরায় সীমিত সীমাবদ্ধতায় ফিরিয়ে আনে । এর ফলে পরবর্তী নোডটি আবার পুরো জায়গাটি নিতে পারে, অথবা পুরো জায়গার চেয়ে ছোটও হতে পারে। -
sizeমডিফায়ারটি সর্বনিম্ন ও সর্বোচ্চ সীমা50এ সীমাবদ্ধতা নির্ধারণ করে। -
Image50বাই50আকারে পরিণত হয় এবং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মডিফায়ারটি120dpবাই120dpমাপের একটি ক্যানভাসের উপর কাজ করে। এটি ওই মাপের একটি বৃত্তাকার মাস্ক তৈরি করে। - এরপর
paddingমডিফায়ারটি এর কন্টেন্টকে চারপাশ থেকে10dpকরে ভেতরে ঢুকিয়ে দেয়, যার ফলেImageক্যানভাস সাইজ কমে100dpবাই100dpহয়ে যায়। -
Imageসেই ছোট ক্যানভাসে আঁকা হয়। ছবিটি120dpর মূল বৃত্তের উপর ভিত্তি করে ছেঁটে ফেলা হয়, তাই আউটপুটটি গোলাকার হয় না।