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

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

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

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

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

  • 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

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

  • 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

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

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

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

এই পৃষ্ঠাটি বর্ণনা করে কিভাবে শৃঙ্খলিত সংশোধক সীমাবদ্ধতাগুলিকে প্রভাবিত করে এবং ফলস্বরূপ, কম্পোজেবলের পরিমাপ এবং বসানো।

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

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

  • 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

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

  • 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

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

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

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

এই পৃষ্ঠাটি বর্ণনা করে কিভাবে শৃঙ্খলিত সংশোধক সীমাবদ্ধতাগুলিকে প্রভাবিত করে এবং ফলস্বরূপ, কম্পোজেবলের পরিমাপ এবং বসানো।

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 মডিফায়ার আগত সীমাবদ্ধতাগুলি প্রতিস্থাপন করে এবং আপনার সঠিক সীমা হিসাবে নির্দিষ্ট করা আকারটি পাস করে।

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

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

width এবং height সংশোধক

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

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

sizeIn মডিফায়ার

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

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

উদাহরণ

এই বিভাগটি শৃঙ্খলাবদ্ধ সংশোধকগুলির সাথে বেশ কয়েকটি কোড স্নিপেটগুলি থেকে আউটপুট দেখায় এবং ব্যাখ্যা করে। 

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

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

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

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

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

  • 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

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

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