সীমাবদ্ধতা এবং সংশোধনকারী আদেশ

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

এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে চেইনড মডিফায়ার সীমাবদ্ধতাগুলিকে প্রভাবিত করে এবং ফলস্বরূপ, কম্পোজেবলের পরিমাপ এবং স্থাপন করা হয়।

UI ট্রিতে সংশোধক

সংশোধকগুলি কীভাবে একে অপরকে প্রভাবিত করে তা বোঝার জন্য, UI ট্রিতে তারা কীভাবে উপস্থিত হয় তা কল্পনা করা সহায়ক, যা রচনা পর্যায়ে উত্পন্ন হয়। আরও তথ্যের জন্য, রচনা বিভাগটি দেখুন।

UI ট্রিতে, আপনি লেআউট নোডগুলির জন্য মোড়ক নোড হিসাবে পরিবর্তনকারীদের কল্পনা করতে পারেন:

কম্পোজেবল এবং মডিফায়ারের জন্য কোড, এবং একটি UI ট্রি হিসাবে তাদের ভিজ্যুয়াল উপস্থাপনা।
চিত্র 1. মডিফায়ার UI ট্রিতে লেআউট নোডগুলি মোড়ানো।

একটি কম্পোজেবলে একাধিক মডিফায়ার যোগ করলে মডিফায়ারের একটি চেইন তৈরি হয়। আপনি যখন একাধিক মডিফায়ারকে চেইন করেন, তখন প্রতিটি মডিফায়ার নোড বাকি চেইন এবং লেআউট নোডকে এর মধ্যে মুড়ে দেয় । উদাহরণস্বরূপ, আপনি যখন একটি clip এবং একটি size পরিবর্তনকারীকে চেইন করেন, তখন clip সংশোধক নোডটি size পরিবর্তনকারী নোডকে মোড়ানো হয়, যা তারপরে Image লেআউট নোডটিকে মোড়ানো হয়।

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

চিত্র 2-এ দেখানো হয়েছে, Image এবং Text কম্পোজেবলের বাস্তবায়নে একটি একক লেআউট নোড মোড়ানো মডিফায়ারের একটি চেইন থাকে।

Row এবং Column বাস্তবায়ন হল লেআউট নোড যা বর্ণনা করে কিভাবে তাদের বাচ্চাদের লেআউট করতে হয়।

আগে থেকে ট্রি স্ট্রাকচার, কিন্তু এখন প্রতিটি নোড একটি সাধারণ লেআউট, এটির চারপাশে অনেকগুলি মডিফায়ার মোড়ানো নোড রয়েছে।
চিত্র 2. চিত্র 1-এর মতো একই গাছের গঠন, কিন্তু UI ট্রিতে সংযোজনযোগ্য উপাদানগুলিকে মডিফায়ারের চেইন হিসাবে কল্পনা করা হয়েছে।

সংক্ষিপ্ত করতে:

  • সংশোধক একটি একক সংশোধক বা লেআউট নোড মোড়ানো।
  • লেআউট নোড একাধিক চাইল্ড নোড লেআউট করতে পারে।

নিম্নোক্ত বিভাগগুলি বর্ণনা করে যে কীভাবে এই মানসিক মডেলটি মডিফায়ার চেইনিং সম্পর্কে যুক্তির জন্য ব্যবহার করতে হয় এবং কীভাবে এটি কম্পোজেবলের আকারকে প্রভাবিত করে।

লেআউট পর্বে সীমাবদ্ধতা

লেআউট ফেজ প্রতিটি লেআউট নোডের প্রস্থ, উচ্চতা এবং x, y স্থানাঙ্ক খুঁজে পেতে একটি তিন-পদক্ষেপ অ্যালগরিদম অনুসরণ করে:

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

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

সীমাবদ্ধতার প্রকার

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

  • আবদ্ধ : নোডের সর্বোচ্চ এবং সর্বনিম্ন প্রস্থ এবং উচ্চতা রয়েছে।
একটি পাত্রের মধ্যে বিভিন্ন আকারের আবদ্ধ সীমাবদ্ধতা।
চিত্র 3. আবদ্ধ সীমাবদ্ধতা।
  • সীমাহীন : নোড কোন আকারে সীমাবদ্ধ নয়। সর্বাধিক প্রস্থ এবং উচ্চতা সীমা অসীম সেট করা হয়.
সীমাহীন সীমাবদ্ধতা যার প্রস্থ এবং উচ্চতা অসীমতে সেট করা আছে। সীমাবদ্ধতা ধারক অতিক্রম প্রসারিত.
চিত্র 4. সীমাহীন সীমাবদ্ধতা।
  • সঠিক : নোডটিকে একটি সঠিক আকারের প্রয়োজনীয়তা অনুসরণ করতে বলা হয়। সর্বনিম্ন এবং সর্বোচ্চ সীমা একই মান সেট করা হয়.
সঠিক সীমাবদ্ধতা যা কন্টেইনারের মধ্যে একটি সঠিক আকারের প্রয়োজনীয়তা মেনে চলে।
চিত্র 5. সঠিক সীমাবদ্ধতা।
  • সংমিশ্রণ : নোডটি পূর্ববর্তী সীমাবদ্ধতার প্রকারের সংমিশ্রণ অনুসরণ করে। উদাহরণস্বরূপ, একটি সীমাবদ্ধতা একটি সীমাহীন সর্বাধিক উচ্চতার অনুমতি দেওয়ার সময় প্রস্থকে আবদ্ধ করতে পারে, বা একটি সঠিক প্রস্থ সেট করে তবে একটি আবদ্ধ উচ্চতা প্রদান করতে পারে।
দুটি পাত্র যা আবদ্ধ এবং সীমাহীন সীমাবদ্ধতা এবং সঠিক প্রস্থ এবং উচ্চতার সমন্বয় দেখায়।
চিত্র 6. আবদ্ধ এবং সীমাহীন সীমাবদ্ধতা এবং সঠিক প্রস্থ এবং উচ্চতার সমন্বয়।

পরবর্তী বিভাগে বর্ণনা করা হয়েছে কিভাবে এই সীমাবদ্ধতাগুলি একজন পিতামাতা থেকে একটি সন্তানের কাছে চলে যায়।

পিতামাতা থেকে সন্তানের কাছে কীভাবে সীমাবদ্ধতাগুলি প্রেরণ করা হয়

লেআউট পর্বে সীমাবদ্ধতায় বর্ণিত অ্যালগরিদমের প্রথম ধাপের সময়, UI ট্রিতে সীমাবদ্ধতাগুলি পিতামাতা থেকে সন্তানের কাছে পাঠানো হয়।

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

একটি উচ্চ স্তরে, অ্যালগরিদম নিম্নলিখিত উপায়ে কাজ করে:

  1. এটি আসলে যে আকারটি দখল করতে চায় তা নির্ধারণ করতে, UI গাছের রুট নোড তার বাচ্চাদের পরিমাপ করে এবং একই সীমাবদ্ধতাগুলি তার প্রথম সন্তানের কাছে ফরোয়ার্ড করে।
  2. যদি শিশুটি এমন একটি সংশোধক হয় যা পরিমাপকে প্রভাবিত করে না, তবে এটি সীমাবদ্ধতাগুলিকে পরবর্তী সংশোধকের কাছে প্রেরণ করে। পরিমাপকে প্রভাবিত করে এমন একটি সংশোধক না পৌঁছালে সীমাবদ্ধতাগুলি সংশোধক শৃঙ্খলে যেমন-ই চলে যায়। সীমাবদ্ধতাগুলি তারপর সেই অনুযায়ী পুনরায় আকার দেওয়া হয়।
  3. একবার একটি নোড পৌঁছে গেলে যেখানে কোনও সন্তান নেই (একটি "লিফ নোড" হিসাবে উল্লেখ করা হয়), এটি পাস করা সীমাবদ্ধতার উপর ভিত্তি করে এর আকার নির্ধারণ করে এবং এই সমাধান করা আকারটি তার পিতামাতার কাছে ফেরত দেয়।
  4. পিতামাতা এই সন্তানের পরিমাপের উপর ভিত্তি করে তার সীমাবদ্ধতাগুলিকে মানিয়ে নেয় এবং এই সামঞ্জস্যপূর্ণ সীমাবদ্ধতার সাথে তার পরবর্তী সন্তানকে ডাকে।
  5. একবার অভিভাবকের সমস্ত সন্তান পরিমাপ করা হলে, অভিভাবক নোড তার নিজের আকারের উপর সিদ্ধান্ত নেয় এবং তার নিজের পিতামাতার সাথে যোগাযোগ করে।
  6. এইভাবে, পুরো গাছটি প্রথমে গভীরতা অতিক্রম করা হয়। অবশেষে, সমস্ত নোড তাদের আকারের উপর সিদ্ধান্ত নিয়েছে, এবং পরিমাপ পদক্ষেপ সম্পন্ন হয়েছে।

একটি গভীর উদাহরণের জন্য, সীমাবদ্ধতা এবং সংশোধনকারী অর্ডার ভিডিও দেখুন।

সংশোধক যা সীমাবদ্ধতাকে প্রভাবিত করে

আপনি পূর্ববর্তী বিভাগে শিখেছেন যে কিছু সংশোধক সীমাবদ্ধতার আকারকে প্রভাবিত করতে পারে। নিম্নলিখিত বিভাগগুলি নির্দিষ্ট সংশোধকদের বর্ণনা করে যা সীমাবদ্ধতাকে প্রভাবিত করে।

size পরিবর্তনকারী

size পরিবর্তনকারী সামগ্রীর পছন্দসই আকার ঘোষণা করে।

উদাহরণস্বরূপ, নিম্নলিখিত UI ট্রিটি 200dp দ্বারা 300dp এর একটি পাত্রে রেন্ডার করা উচিত। সীমাবদ্ধতাগুলি আবদ্ধ, 100dp এবং 300dp এর মধ্যে প্রস্থ এবং 100dp এবং 200dp মধ্যে উচ্চতাকে অনুমতি দেয়:

একটি লেআউট নোড মোড়ানো আকার সংশোধক সহ একটি UI গাছের একটি অংশ, এবং একটি পাত্রে আকার পরিবর্তনকারী দ্বারা সেট করা আবদ্ধ সীমাবদ্ধতার উপস্থাপনা।
চিত্র 7. UI ট্রিতে আবদ্ধ সীমাবদ্ধতা এবং একটি পাত্রে এর উপস্থাপনা।

size সংশোধক আগত সীমাবদ্ধতাকে মানিয়ে নেয় যাতে এটিতে পাস করা মানটি মেলে। এই উদাহরণে, মান হল 150dp :

চিত্র 7 এর মতই, সাইজ মডিফায়ার ব্যতীত ইনকামিং সীমাবদ্ধতাগুলিকে এটিতে পাস করা মানটির সাথে মেলে।
চিত্র 8. size সংশোধক 150dp এ সীমাবদ্ধতা সামঞ্জস্য করে।

যদি প্রস্থ এবং উচ্চতা ক্ষুদ্রতম সীমাবদ্ধতার চেয়ে ছোট হয়, বা সবচেয়ে বড় সীমাবদ্ধতার চেয়ে বড় হয়, তাহলে সংশোধকটি পাস করা সীমাবদ্ধতাগুলির সাথে যতটা ঘনিষ্ঠভাবে মেলে এবং এখনও পাস করা সীমাবদ্ধতাগুলি মেনে চলে:

দুটি UI গাছ এবং পাত্রে তাদের সংশ্লিষ্ট উপস্থাপনা। প্রথমটিতে, দ আকার সংশোধক অন্তর্নিহিত সীমাবদ্ধতা গ্রহণ করে; দ্বিতীয়টিতে, আকার পরিবর্তনকারীর সাথে মানিয়ে নেয় যতটা সম্ভব ঘনিষ্ঠভাবে খুব বড় সীমাবদ্ধতা, যার ফলে সীমাবদ্ধতাগুলি ধারকটি পূরণ করে।
চিত্র 9. size সংশোধক যতটা সম্ভব ঘনিষ্ঠভাবে পাস করা সীমাবদ্ধতা মেনে চলে।

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

UI ট্রিতে দুটি আকারের মডিফায়ারের একটি চেইন এবং একটি পাত্রে এর উপস্থাপনা, যা প্রথম মান পাসের ফলাফল এবং দ্বিতীয় মান নয়।
চিত্র 10. দুটি size সংশোধকগুলির একটি চেইন, যেখানে দ্বিতীয় মানটি ( 50dp ) এ পাস করেছে প্রথম মান ( 100dp )টিকে ওভাররাইড করে না।

requiredSize পরিবর্তনকারী

ইনকামিং সীমাবদ্ধতাগুলি ওভাররাইড করার জন্য আপনার নোডের প্রয়োজন হলে size পরিবর্তে requiredSize মডিফায়ার ব্যবহার করুন। requiredSize সাইজ সংশোধক ইনকামিং সীমাবদ্ধতাগুলি প্রতিস্থাপন করে এবং সঠিক সীমা হিসাবে আপনার নির্দিষ্ট করা আকারটি পাস করে।

যখন আকারটি গাছের ব্যাক আপ করা হয়, তখন চাইল্ড নোডটি উপলব্ধ স্থানে কেন্দ্রীভূত হবে:

একটি UI ট্রিতে শৃঙ্খলিত আকার এবং প্রয়োজনীয় আকার সংশোধক এবং সংশ্লিষ্ট একটি পাত্রে উপস্থাপনা। প্রয়োজনীয় সাইজ সংশোধক সীমাবদ্ধতা আকার পরিবর্তনকারীকে ওভাররাইড করে সীমাবদ্ধতা
চিত্র 11. requiredSize মডিফায়ার size মডিফায়ার থেকে ইনকামিং সীমাবদ্ধতা ওভাররাইড করে।

width এবং height সংশোধক

size সংশোধক সীমাবদ্ধতার প্রস্থ এবং উচ্চতা উভয়কেই মানিয়ে নেয়। width সংশোধনকারীর সাহায্যে, আপনি একটি নির্দিষ্ট প্রস্থ সেট করতে পারেন তবে উচ্চতাটি অনিশ্চিত রেখে যান। একইভাবে, height পরিবর্তনকারীর সাথে, আপনি একটি নির্দিষ্ট উচ্চতা সেট করতে পারেন, তবে প্রস্থটি অনিশ্চিত রেখে দিন:

দুটি UI গাছ, একটি প্রস্থ সংশোধক এবং এর ধারক উপস্থাপনা সহ এবং অন্যটি উচ্চতা সংশোধক এবং এর উপস্থাপনা সহ।
চিত্র 12. width সংশোধক এবং height সংশোধক যথাক্রমে একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা নির্ধারণ করে।

sizeIn মডিফায়ার

sizeIn মডিফায়ার আপনাকে প্রস্থ এবং উচ্চতার জন্য সঠিক ন্যূনতম এবং সর্বোচ্চ সীমাবদ্ধতা সেট করতে দেয়। sizeIn মডিফায়ার ব্যবহার করুন যদি আপনার সীমাবদ্ধতার উপর সূক্ষ্ম নিয়ন্ত্রণের প্রয়োজন হয়।

ন্যূনতম এবং সর্বোচ্চ প্রস্থ এবং উচ্চতা সেট সহ সাইজইন মডিফায়ার সহ একটি UI ট্রি, এবং একটি ধারক মধ্যে তার প্রতিনিধিত্ব.
চিত্র 13. minWidth , maxWidth , minHeight , এবং maxHeight সেট সহ sizeIn মডিফায়ার।

উদাহরণ

এই বিভাগটি চেইনড মডিফায়ার সহ বেশ কয়েকটি কোড স্নিপেট থেকে আউটপুট দেখায় এবং ব্যাখ্যা করে। 

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

এই স্নিপেট নিম্নলিখিত আউটপুট উত্পাদন করে:

একটি নীল বর্গক্ষেত্র যা তার মূল পাত্রে পূর্ণ করে।
চিত্র 14. সংশোধক চেইনের ফলে 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)
)
ConstraintsModifiersSnippets.kt

এই স্নিপেট নিম্নলিখিত আউটপুট উত্পাদন করে:

একটি ছোট নীল বর্গক্ষেত্র তার মূল পাত্রের মধ্যে কেন্দ্রীভূত।
চিত্র 15. Image কেন্দ্রীভূত এবং আকার 50dp .
  • fillMaxSize মডিফায়ার ন্যূনতম প্রস্থ এবং উচ্চতা উভয়কেই সর্বাধিক মান - প্রস্থে 300dp এবং উচ্চতায় 200dp সেট করতে সীমাবদ্ধতাগুলিকে খাপ খায়।
  • wrapContentSize সংশোধক সর্বনিম্ন সীমাবদ্ধতা পুনরায় সেট করে। সুতরাং, fillMaxSize ফলে নির্দিষ্ট সীমাবদ্ধতা দেখা দিলে, wrapContentSize এটিকে আবার সীমাবদ্ধ সীমাবদ্ধতায় পুনরায় সেট করে । নিম্নলিখিত নোডটি এখন আবার পুরো স্থান নিতে পারে, বা পুরো স্থানের চেয়ে ছোট হতে পারে।
  • size সংশোধক সীমাবদ্ধতাগুলিকে সর্বনিম্ন এবং সর্বাধিক 50 সীমাতে সেট করে।
  • Image 50 বাই 50 আকারে সমাধান করে এবং size পরিবর্তনকারী সেটিকে এগিয়ে দেয়।
  • wrapContentSize সংশোধকের একটি বিশেষ সম্পত্তি আছে। এটি তার সন্তানকে নিয়ে যায় এবং এটিকে পাস করা উপলব্ধ সর্বনিম্ন সীমার কেন্দ্রে রাখে । এটি তার পিতামাতার সাথে যে আকারে যোগাযোগ করে তা এইভাবে এটিতে প্রবেশ করা ন্যূনতম সীমার সমান।

মাত্র তিনটি সংশোধক একত্রিত করে, আপনি কম্পোজেবলের জন্য একটি আকার সংজ্ঞায়িত করতে পারেন এবং এটিকে এর প্যারেন্টে কেন্দ্র করতে পারেন। 

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

এই স্নিপেট নিম্নলিখিত আউটপুট উত্পাদন করে:

একটি বৃত্তাকার আকৃতি যার কারণে ভুলভাবে ক্লিপ করা হয়েছে সংশোধক আদেশ।
চিত্র 16. মডিফায়ার অর্ডারের কারণে একটি ভুলভাবে ক্লিপ করা আকৃতি।
  • clip মডিফায়ার সীমাবদ্ধতা পরিবর্তন করে না।
  • padding মডিফায়ার সর্বোচ্চ সীমাবদ্ধতা কমিয়ে দেয়।
  • size সংশোধক 100dp তে সমস্ত সীমাবদ্ধতা সেট করে।
  • Image সেই সীমাবদ্ধতাগুলি মেনে চলে এবং 100dp দ্বারা 100dp আকারের রিপোর্ট করে৷
  • padding সংশোধক Image দ্বারা রিপোর্ট করা আকারের চারপাশে 10dp যোগ করে, তাই প্যাডিং সহ লেআউট 120dp এর প্রস্থ এবং উচ্চতা রিপোর্ট করে।
  • এখন, অঙ্কন পর্বে, clip মডিফায়ারটি 120dp বাই 120dp এর ক্যানভাসে কাজ করে। এটি সেই আকারের একটি বৃত্তের মুখোশ তৈরি করে।
  • তারপর padding মডিফায়ার তার বিষয়বস্তুকে সব দিকে 10dp দ্বারা ইনসেট করে, যা Image ক্যানভাসের আকারকে 100dp দ্বারা 100dp এ কমিয়ে দেয়।
  • Image সেই ছোট ক্যানভাসে আঁকা হয়েছে। ছবিটি 120dp এর মূল বৃত্তের উপর ভিত্তি করে ক্লিপ করা হয়েছে, তাই আউটপুটটি একটি অ-গোলাকার ফলাফল।
পূর্ববর্তী
লেআউট বেসিক
পরবর্তী
কাস্টম মডিফায়ার