কম্পোজে উইন্ডো ইনসেট

অ্যান্ড্রয়েড প্ল্যাটফর্ম সিস্টেম UI আঁকার জন্য দায়ী, যেমন স্ট্যাটাস বার এবং নেভিগেশন বার। ব্যবহারকারী কোন অ্যাপ ব্যবহার করছেন তা নির্বিশেষে এই সিস্টেম UI প্রদর্শিত হয়। WindowInsets সিস্টেম UI সম্পর্কে তথ্য প্রদান করে যাতে আপনার অ্যাপটি সঠিক এলাকায় আঁকা হয় এবং আপনার UI সিস্টেম UI দ্বারা অস্পষ্ট না হয়।

সিস্টেম বারের পিছনে আঁকতে প্রান্ত থেকে প্রান্তে যাওয়া
চিত্র 1. সিস্টেম বারের পিছনে আঁকতে প্রান্ত থেকে প্রান্তে যাচ্ছে

ডিফল্টরূপে, আপনার অ্যাপের UI স্ট্যাটাস বার এবং নেভিগেশন বারের মতো সিস্টেম UI-এর মধ্যে রাখা সীমাবদ্ধ। এটি নিশ্চিত করে যে আপনার অ্যাপের বিষয়বস্তু সিস্টেম UI উপাদান দ্বারা অস্পষ্ট নয়।

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

এই অঞ্চলগুলিতে প্রদর্শনের জন্য নির্বাচন করা এবং সিস্টেম UI এর পিছনে সামগ্রী প্রদর্শন করাকে বলা হয় প্রান্ত থেকে প্রান্তে । এই পৃষ্ঠায়, আপনি বিভিন্ন ধরণের ইনসেট সম্পর্কে শিখবেন, কীভাবে এজ-টু-এজ যেতে অপ্ট-ইন করবেন এবং কীভাবে আপনার UI অ্যানিমেট করতে এবং আপনার অ্যাপের অস্পষ্ট অংশগুলি এড়াতে ইনসেট API ব্যবহার করবেন।

ইনসেট মৌলিক

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

সিস্টেম UI এর আকার এবং এটি কোথায় স্থাপন করা হয়েছে সে সম্পর্কে তথ্য ইনসেটের মাধ্যমে নির্দিষ্ট করা হয়।

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

এই অন্তর্নির্মিত Android ইনসেট প্রকারগুলি WindowInsets এর মাধ্যমে উপলব্ধ:

WindowInsets.statusBars

স্ট্যাটাস বার বর্ণনাকারী ইনসেট। এগুলি হল শীর্ষ সিস্টেম UI বার যাতে বিজ্ঞপ্তি আইকন এবং অন্যান্য সূচক রয়েছে৷

WindowInsets.statusBarsIgnoringVisibility

যখন তারা দৃশ্যমান হয় তখন স্ট্যাটাস বার ইনসেট করে। যদি স্ট্যাটাস বারগুলি বর্তমানে লুকানো থাকে (ইমারসিভ পূর্ণ স্ক্রীন মোডে প্রবেশ করার কারণে), তাহলে প্রধান স্ট্যাটাস বার ইনসেটগুলি খালি থাকবে, কিন্তু এই ইনসেটগুলি খালি থাকবে না।

WindowInsets.navigationBars

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

WindowInsets.navigationBarsIgnoringVisibility

ন্যাভিগেশন বার যখন তারা দৃশ্যমান হয় তার জন্য ইনসেট করে। যদি নেভিগেশন বারগুলি বর্তমানে লুকানো থাকে (ইমারসিভ পূর্ণ স্ক্রিন মোডে প্রবেশ করার কারণে), তবে প্রধান নেভিগেশন বার ইনসেটগুলি খালি থাকবে, তবে এই ইনসেটগুলি খালি থাকবে না।

WindowInsets.captionBar

উপরের শিরোনাম দণ্ডের মতো একটি ফ্রিফর্ম উইন্ডোতে থাকলে সিস্টেম UI উইন্ডোর সাজসজ্জার বর্ণনা দেয় ইনসেট।

WindowInsets.captionBarIgnoringVisibility

ক্যাপশন বার যখন দৃশ্যমান হয় তার জন্য ইনসেট করে। যদি ক্যাপশন বারগুলি বর্তমানে লুকানো থাকে, তাহলে প্রধান ক্যাপশন বার ইনসেটগুলি খালি থাকবে, কিন্তু এই ইনসেটগুলি খালি থাকবে না৷

WindowInsets.systemBars

সিস্টেম বার ইনসেটগুলির মিলন, যার মধ্যে স্ট্যাটাস বার, নেভিগেশন বার এবং ক্যাপশন বার অন্তর্ভুক্ত।

WindowInsets.systemBarsIgnoringVisibility

যখন তারা দৃশ্যমান হয় তখন সিস্টেম বার ইনসেট করে। যদি সিস্টেম বারগুলি বর্তমানে লুকানো থাকে (ইমারসিভ পূর্ণ স্ক্রীন মোডে প্রবেশ করার কারণে), তাহলে প্রধান সিস্টেম বার ইনসেটগুলি খালি থাকবে, কিন্তু এই ইনসেটগুলি খালি থাকবে না৷

WindowInsets.ime

সফ্টওয়্যার কীবোর্ডের নিচের অংশে কতটা জায়গা আছে তা বর্ণনা করে ইনসেটগুলি।

WindowInsets.imeAnimationSource

বর্তমান কীবোর্ড অ্যানিমেশনের আগে সফ্টওয়্যার কীবোর্ড যে পরিমাণ স্থান দখল করেছিল তা বর্ণনা করে ইনসেটগুলি৷

WindowInsets.imeAnimationTarget

বর্তমান কীবোর্ড অ্যানিমেশনের পরে সফ্টওয়্যার কীবোর্ড যে পরিমাণ স্থান দখল করবে তা বর্ণনা করে ইনসেটগুলি৷

WindowInsets.tappableElement

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

WindowInsets.tappableElementIgnoringVisibility

ট্যাপযোগ্য উপাদানটি কখন দৃশ্যমান হয় তার জন্য ইনসেট করে। যদি ট্যাপযোগ্য উপাদানগুলি বর্তমানে লুকানো থাকে (ইমারসিভ পূর্ণ স্ক্রিন মোডে প্রবেশ করার কারণে), তাহলে প্রধান ট্যাপযোগ্য উপাদান ইনসেটগুলি খালি থাকবে, তবে এই ইনসেটগুলি খালি থাকবে না।

WindowInsets.systemGestures

ইনসেটগুলি ইনসেটের পরিমাণ প্রতিনিধিত্ব করে যেখানে সিস্টেম নেভিগেশনের জন্য অঙ্গভঙ্গিগুলিকে বাধা দেবে৷ অ্যাপগুলি Modifier.systemGestureExclusion এর মাধ্যমে সীমিত পরিমাণে এই অঙ্গভঙ্গিগুলি পরিচালনা করার জন্য ম্যানুয়ালি নির্দিষ্ট করতে পারে৷

WindowInsets.mandatorySystemGestures

সিস্টেমের অঙ্গভঙ্গির একটি উপসেট যা সবসময় সিস্টেম দ্বারা পরিচালনা করা হবে এবং যা Modifier.systemGestureExclusion এর মাধ্যমে অপ্ট আউট করা যাবে না।

WindowInsets.displayCutout

ডিসপ্লে কাটআউট (খাঁজ বা পিনহোল) দিয়ে ওভারল্যাপিং এড়ানোর জন্য প্রয়োজনীয় ব্যবধানের পরিমাণ প্রতিনিধিত্বকারী ইনসেটগুলি।

WindowInsets.waterfall

একটি জলপ্রপাত প্রদর্শনের বাঁকা এলাকা প্রতিনিধিত্বকারী ইনসেট। একটি জলপ্রপাত ডিসপ্লেতে পর্দার প্রান্ত বরাবর বাঁকা এলাকা রয়েছে যেখানে স্ক্রীনটি ডিভাইসের পাশে মোড়ানো শুরু করে।

এই ধরনের তিনটি "নিরাপদ" ইনসেট প্রকার দ্বারা সংক্ষিপ্ত করা হয় যা নিশ্চিত করে যে বিষয়বস্তু অস্পষ্ট নয়:

অন্তর্নিহিত প্ল্যাটফর্ম ইনসেটগুলির উপর ভিত্তি করে এই "নিরাপদ" ইনসেট প্রকারগুলি বিভিন্ন উপায়ে সামগ্রীকে রক্ষা করে:

  • কোন সিস্টেম UI এর নিচে আঁকা উচিত নয় এমন সামগ্রী রক্ষা করতে WindowInsets.safeDrawing ব্যবহার করুন। এটি ইনসেটগুলির সবচেয়ে সাধারণ ব্যবহার: সিস্টেম UI (হয় আংশিকভাবে বা সম্পূর্ণ) দ্বারা অস্পষ্ট বিষয়বস্তু অঙ্কন প্রতিরোধ করতে।
  • অঙ্গভঙ্গি সহ বিষয়বস্তু রক্ষা করতে WindowInsets.safeGestures ব্যবহার করুন। এটি সিস্টেমের অঙ্গভঙ্গিগুলিকে অ্যাপের অঙ্গভঙ্গির সাথে সংঘর্ষে এড়ায় (যেমন নীচের শীট, ক্যারোসেল বা গেমগুলিতে)।
  • WindowInsets.safeContent ব্যবহার করুন WindowInsets.safeDrawing এবং WindowInsets.safeGestures এর সংমিশ্রণ হিসাবে কনটেন্টের কোনও ভিজ্যুয়াল ওভারল্যাপ নেই এবং কোনও অঙ্গভঙ্গি ওভারল্যাপ নেই।

ইনসেট সেটআপ

আপনার অ্যাপটি কোথায় বিষয়বস্তু আঁকে তার উপর সম্পূর্ণ নিয়ন্ত্রণের অনুমতি দিতে, এই সেটআপ পদক্ষেপগুলি অনুসরণ করুন৷ এই পদক্ষেপগুলি ছাড়া, আপনার অ্যাপটি সিস্টেম UI এর পিছনে কালো বা শক্ত রঙ আঁকতে পারে, বা সফ্টওয়্যার কীবোর্ডের সাথে সিঙ্ক্রোনাসভাবে অ্যানিমেট করতে পারে না।

  1. Activity.onCreateenableEdgeToEdge() কল করুন। এই কলটি অনুরোধ করে যে আপনার অ্যাপটি সিস্টেম UI এর পিছনে প্রদর্শিত হবে৷ UI সামঞ্জস্য করতে কীভাবে সেই ইনসেটগুলি ব্যবহার করা হয় তা আপনার অ্যাপের নিয়ন্ত্রণে থাকবে।
  2. আপনার কার্যকলাপের AndroidManifest.xml এন্ট্রিতে android:windowSoftInputMode="adjustResize" সেট করুন। এই সেটিংটি আপনার অ্যাপটিকে সফ্টওয়্যার IME-এর আকার ইনসেট হিসাবে গ্রহণ করার অনুমতি দেয়, যেটি আপনি আপনার অ্যাপে IME প্রদর্শিত এবং অদৃশ্য হয়ে গেলে যথাযথভাবে সামগ্রী প্যাড করতে এবং লেআউট করতে ব্যবহার করতে পারেন৷

    <!-- in your AndroidManifest.xml file: -->
    <activity
      android:name=".ui.MainActivity"
      android:label="@string/app_name"
      android:windowSoftInputMode="adjustResize"
      android:theme="@style/Theme.MyApplication"
      android:exported="true">
    

এপিআই রচনা করুন

একবার আপনার কার্যকলাপ সমস্ত ইনসেট পরিচালনার নিয়ন্ত্রণ নিয়ে নিলে, আপনি কন্টেন্ট যাতে অস্পষ্ট না হয় এবং ইন্টারঅ্যাক্টেবল উপাদানগুলি সিস্টেম UI এর সাথে ওভারল্যাপ না হয় তা নিশ্চিত করতে আপনি কম্পোজ API ব্যবহার করতে পারেন। এই APIগুলি ইনসেট পরিবর্তনগুলির সাথে আপনার অ্যাপের লেআউটকেও সিঙ্ক্রোনাইজ করে৷

উদাহরণস্বরূপ, এটি আপনার সম্পূর্ণ অ্যাপের সামগ্রীতে ইনসেটগুলি প্রয়োগ করার সবচেয়ে মৌলিক পদ্ধতি:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    enableEdgeToEdge()

    setContent {
        Box(Modifier.safeDrawingPadding()) {
            // the rest of the app
        }
    }
}

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

এই সমস্ত ইনসেট প্রকারগুলি API 21 এ ব্যাকপোর্ট করা IME অ্যানিমেশনগুলির সাথে স্বয়ংক্রিয়ভাবে অ্যানিমেটেড হয়৷ এক্সটেনশনের মাধ্যমে, এই ইনসেটগুলি ব্যবহার করে আপনার সমস্ত লেআউটগুলিও ইনসেট মান পরিবর্তনের সাথে সাথে স্বয়ংক্রিয়ভাবে অ্যানিমেটেড হয়৷

আপনার কম্পোজযোগ্য লেআউটগুলি সামঞ্জস্য করতে এই ইনসেট প্রকারগুলি ব্যবহার করার দুটি প্রাথমিক উপায় রয়েছে: প্যাডিং সংশোধক এবং ইনসেট আকার সংশোধক৷

প্যাডিং মডিফায়ার

Modifier.windowInsetsPadding(windowInsets: WindowInsets) প্রদত্ত উইন্ডো ইনসেটগুলিকে প্যাডিং হিসাবে প্রয়োগ করে, ঠিক Modifier.padding এর মত কাজ করে। উদাহরণস্বরূপ, Modifier.windowInsetsPadding(WindowInsets.safeDrawing) সমস্ত 4 দিকে প্যাডিং হিসাবে নিরাপদ অঙ্কন ইনসেটগুলি প্রয়োগ করে।

সবচেয়ে সাধারণ ইনসেট ধরনের জন্য বেশ কিছু অন্তর্নির্মিত ইউটিলিটি পদ্ধতি রয়েছে। Modifier.safeDrawingPadding() হল এরকম একটি পদ্ধতি, যা Modifier.windowInsetsPadding(WindowInsets.safeDrawing) এর সমতুল্য। অন্যান্য ইনসেট ধরনের জন্য অনুরূপ পরিবর্তনকারী আছে.

ইনসেট আকার সংশোধক

নিম্নলিখিত সংশোধকগুলি উপাদানের আকারকে ইনসেটগুলির আকার হিসাবে সেট করে উইন্ডো ইনসেটের পরিমাণ প্রয়োগ করে:

Modifier.windowInsetsStartWidth(windowInsets: WindowInsets)

windowInsets এর প্রারম্ভিক দিকটি প্রস্থ হিসাবে প্রয়োগ করে (যেমন Modifier.width )

Modifier.windowInsetsEndWidth(windowInsets: WindowInsets)

প্রস্থ হিসাবে windowInsets এর শেষ দিক প্রয়োগ করে (যেমন Modifier.width )

Modifier.windowInsetsTopHeight(windowInsets: WindowInsets)

windowInsets এর উপরের দিকটি উচ্চতা হিসাবে প্রয়োগ করে (যেমন Modifier.height )

Modifier.windowInsetsBottomHeight(windowInsets: WindowInsets)

windowInsets-এর নীচের দিকটি উচ্চতা হিসাবে প্রয়োগ করে (যেমন Modifier.height )

এই সংশোধকগুলি বিশেষত একটি Spacer আকার দেওয়ার জন্য দরকারী যা ইনসেটের স্থান নেয়:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}

ইনসেট খরচ

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

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

ফলস্বরূপ, নেস্টিং প্যাডিং মডিফায়ারগুলি স্বয়ংক্রিয়ভাবে প্রতিটি কম্পোজেবলে প্রয়োগ করা প্যাডিংয়ের পরিমাণ পরিবর্তন করে।

আগের মতো একই LazyColumn উদাহরণের দিকে তাকিয়ে, imePadding সংশোধক দ্বারা LazyColumn আকার পরিবর্তন করা হচ্ছে। LazyColumn ভিতরে, শেষ আইটেমটি সিস্টেম বারের নীচের উচ্চতা হিসাবে মাপ করা হয়:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}

যখন IME বন্ধ থাকে, imePadding() সংশোধক কোনো প্যাডিং প্রয়োগ করে না, যেহেতু IME-এর কোনো উচ্চতা নেই। যেহেতু imePadding() সংশোধক কোনো প্যাডিং প্রয়োগ করছে না, তাই কোনো ইনসেট ব্যবহার করা হচ্ছে না এবং Spacer উচ্চতা হবে সিস্টেম বারের নিচের দিকের মাপ।

যখন IME খোলে, IME IME এর আকারের সাথে মেলে অ্যানিমেট ইনসেট করে এবং imePadding() সংশোধক IME খোলার সাথে সাথে LazyColumn আকার পরিবর্তন করতে নীচের প্যাডিং প্রয়োগ করা শুরু করে। যেহেতু imePadding() সংশোধক নীচের প্যাডিং প্রয়োগ করা শুরু করে, এটি সেই পরিমাণ ইনসেটগুলিও গ্রহণ করতে শুরু করে। অতএব, Spacer উচ্চতা কমতে শুরু করে, কারণ সিস্টেম বারগুলির জন্য ফাঁকের অংশটি ইতিমধ্যেই imePadding() সংশোধক দ্বারা প্রয়োগ করা হয়েছে। একবার imePadding() সংশোধক সিস্টেম বারের চেয়ে বেশি পরিমাণে নীচের প্যাডিং প্রয়োগ করলে, Spacer উচ্চতা শূন্য হয়।

IME বন্ধ হয়ে গেলে, পরিবর্তনগুলি বিপরীতভাবে ঘটে: একবার imePadding() সিস্টেম বারগুলির নীচের দিকের চেয়ে কম প্রয়োগ করার পরে Spacer শূন্যের উচ্চতা থেকে প্রসারিত হতে শুরু করে, যতক্ষণ না শেষ পর্যন্ত Spacer নীচের দিকের উচ্চতার সাথে মেলে। IME সম্পূর্ণরূপে অ্যানিমেটেড হয়ে গেলে সিস্টেম বার করে।

চিত্র 2. TextField সহ এজ-টু-এজ অলস কলাম

এই আচরণটি সমস্ত windowInsetsPadding সংশোধকদের মধ্যে যোগাযোগের মাধ্যমে সম্পন্ন হয়, এবং অন্য কয়েকটি উপায়ে প্রভাবিত হতে পারে।

Modifier.consumeWindowInsets(insets: WindowInsets) এছাড়াও Modifier.windowInsetsPadding এর মতো একইভাবে ইনসেটগুলি ব্যবহার করে, কিন্তু এটি প্যাডিং হিসাবে ব্যবহৃত ইনসেটগুলিকে প্রয়োগ করে না। এটি ইনসেট সাইজ সংশোধকগুলির সাথে একত্রে কার্যকর, ভাইবোনদের বোঝাতে যে একটি নির্দিষ্ট পরিমাণ ইনসেট ইতিমধ্যেই গ্রহণ করা হয়েছে:

Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars))

    Column(
        Modifier.consumeWindowInsets(
            WindowInsets.systemBars.only(WindowInsetsSides.Vertical)
        )
    ) {
        // content
        Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
    }

    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars))
}

Modifier.consumeWindowInsets(paddingValues: PaddingValues) একটি WindowInsets আর্গুমেন্ট সহ সংস্করণের সাথে খুব অনুরূপ আচরণ করে, কিন্তু ব্যবহার করার জন্য একটি নির্বিচারে PaddingValues নেয়। এটি বাচ্চাদের জানানোর জন্য উপযোগী যখন প্যাডিং বা স্পেসিং ইনসেট প্যাডিং মডিফায়ারের পরিবর্তে অন্য কোনও প্রক্রিয়া দ্বারা প্রদান করা হয়, যেমন একটি সাধারণ Modifier.padding বা নির্দিষ্ট উচ্চতা স্পেসার:

@OptIn(ExperimentalLayoutApi::class)
Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) {
    // content
    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
}

যে ক্ষেত্রে কাঁচা উইন্ডো ইনসেটগুলি খরচ ছাড়াই প্রয়োজন হয়, সেক্ষেত্রে সরাসরি WindowInsets মানগুলি ব্যবহার করুন, অথবা WindowInsets.asPaddingValues() ব্যবহার করে ইনসেটগুলির একটি PaddingValues ফেরত দিতে হবে যা ব্যবহার দ্বারা প্রভাবিত হয় না৷ যাইহোক, নীচের সতর্কতার কারণে, যেখানেই সম্ভব উইন্ডো ইনসেট প্যাডিং মডিফায়ার এবং উইন্ডো ইনসেট সাইজ মডিফায়ার ব্যবহার করতে পছন্দ করুন।

ইনসেট এবং জেটপ্যাক রচনা পর্যায়গুলি

কম্পোজ ইনসেটগুলিকে আপডেট এবং অ্যানিমেট করার জন্য অন্তর্নিহিত AndroidX কোর APIগুলি ব্যবহার করে, যা অন্তর্নিহিত প্ল্যাটফর্ম APIগুলি ইনসেটগুলি পরিচালনা করে। সেই প্ল্যাটফর্মের আচরণের কারণে, জেটপ্যাক কম্পোজের পর্যায়গুলির সাথে ইনসেটগুলির একটি বিশেষ সম্পর্ক রয়েছে।

ইনসেটগুলির মান কম্পোজিশন পর্বের পরে আপডেট করা হয়, কিন্তু লেআউট পর্বের আগে । এর মানে হল যে কম্পোজিশনে ইনসেটগুলির মান পড়া সাধারণত ইনসেটগুলির একটি মান ব্যবহার করে যা এক ফ্রেম দেরিতে হয়। এই পৃষ্ঠায় বর্ণিত অন্তর্নির্মিত সংশোধকগুলি বিন্যাস পর্ব পর্যন্ত ইনসেটগুলির মানগুলি ব্যবহার করে বিলম্ব করার জন্য তৈরি করা হয়েছে, যা নিশ্চিত করে যে ইনসেট মানগুলি আপডেট করা হয়েছে একই ফ্রেমে ব্যবহার করা হয়েছে৷

WindowInsets সহ কীবোর্ড IME অ্যানিমেশন

আপনি একটি স্ক্রলিং কন্টেইনারে Modifier.imeNestedScroll() প্রয়োগ করতে পারেন যাতে কন্টেইনারের নীচে স্ক্রোল করার সময় IME স্বয়ংক্রিয়ভাবে খুলতে এবং বন্ধ করতে পারে।

class WindowInsetsExampleActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            MaterialTheme {
                MyScreen()
            }
        }
    }
}

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun MyScreen() {
    Box {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize() // fill the entire window
                .imePadding() // padding for the bottom for the IME
                .imeNestedScroll(), // scroll IME at the bottom
            content = { }
        )
        FloatingActionButton(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(16.dp) // normal 16dp of padding for FABs
                .navigationBarsPadding() // padding for navigation bar
                .imePadding(), // padding for when IME appears
            onClick = { }
        ) {
            Icon(imageVector = Icons.Filled.Add, contentDescription = "Add")
        }
    }
}

অ্যানিমেশন একটি কীবোর্ডের জন্য পথ তৈরি করতে উপরে এবং নীচে স্ক্রোল করা একটি UI উপাদান দেখাচ্ছে

চিত্র 1. IME অ্যানিমেশন

উপাদান 3 উপাদান জন্য ইনসেট সমর্থন

ব্যবহারের সুবিধার জন্য, অনেকগুলি অন্তর্নির্মিত উপাদান 3 কম্পোজেবল ( androidx.compose.material3 ) নিজেই ইনসেটগুলি পরিচালনা করে, কীভাবে উপাদানের বৈশিষ্ট্য অনুযায়ী আপনার অ্যাপে কম্পোজেবলগুলি স্থাপন করা হয় তার উপর ভিত্তি করে।

ইনসেট হ্যান্ডলিং composables

নীচে উপাদান উপাদানগুলির একটি তালিকা রয়েছে যা স্বয়ংক্রিয়ভাবে ইনসেটগুলি পরিচালনা করে৷

অ্যাপ বার

  • TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar : প্যাডিং হিসাবে সিস্টেম বারের উপরের এবং অনুভূমিক দিকগুলি প্রয়োগ করে যেহেতু এটি উইন্ডোর শীর্ষে ব্যবহৃত হয়৷
  • BottomAppBar : প্যাডিং হিসাবে সিস্টেম বারের নীচে এবং অনুভূমিক দিকগুলি প্রয়োগ করে।

বিষয়বস্তু পাত্রে

  • ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (একটি মোডাল নেভিগেশন ড্রয়ারের ভিতরের সামগ্রী): বিষয়বস্তুতে উল্লম্ব এবং স্টার্ট ইনসেট প্রয়োগ করে।
  • ModalBottomSheet : নিচের ইনসেট প্রয়োগ করে।
  • NavigationBar : নীচে এবং অনুভূমিক ইনসেটগুলি প্রয়োগ করে।
  • NavigationRail : উল্লম্ব এবং স্টার্ট ইনসেট প্রয়োগ করে।

ভারা

ডিফল্টরূপে, Scaffold আপনার ব্যবহার এবং ব্যবহার করার জন্য প্যারামিটার paddingValues হিসাবে ইনসেট প্রদান করে। Scaffold সামগ্রীতে ইনসেটগুলি প্রয়োগ করে না; এই দায়িত্ব আপনার। উদাহরণস্বরূপ, একটি Scaffold ভিতরে একটি LazyColumn সহ এই ইনসেটগুলি গ্রাস করতে:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        items(count = 100) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(50.dp)
                    .background(colors[it % colors.size])
            )
        }
    }
}

ডিফল্ট ইনসেট ওভাররাইড করুন

আপনি কম্পোজেবলের আচরণ কনফিগার করতে কম্পোজেবলে পাস করা windowInsets প্যারামিটার পরিবর্তন করতে পারেন। এই প্যারামিটারটি পরিবর্তে প্রয়োগ করার জন্য একটি ভিন্ন ধরনের উইন্ডো ইনসেট হতে পারে, অথবা একটি খালি উদাহরণ পাস করে নিষ্ক্রিয় করা যেতে পারে: WindowInsets(0, 0, 0, 0)

উদাহরণস্বরূপ, LargeTopAppBar এ ইনসেট হ্যান্ডলিং অক্ষম করতে, windowInsets প্যারামিটারটিকে একটি খালি উদাহরণে সেট করুন:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)

ভিউ সিস্টেম ইনসেটগুলির সাথে ইন্টারপ করুন

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

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

ডিফল্টরূপে, প্রতিটি ComposeView WindowInsetsCompat স্তরে সমস্ত ইনসেট ব্যবহার করে। এই ডিফল্ট আচরণ পরিবর্তন করতে, ComposeView.consumeWindowInsets সেট করুন false

সম্পদ

  • এখন অ্যান্ড্রয়েডে - একটি সম্পূর্ণ কার্যকরী অ্যান্ড্রয়েড অ্যাপ সম্পূর্ণরূপে কোটলিন এবং জেটপ্যাক কম্পোজ দিয়ে তৈরি৷
{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}