একটি ভিজ্যুয়াল অবস্থা ডিজাইন করতে একটি বৈকল্পিক ব্যবহার করুন

ভ্যারিয়েন্ট একটি প্যানেলের জন্য একটি নির্দিষ্ট ভিজ্যুয়াল অবস্থা নির্ধারণ করে, যার ফলে একটি প্যানেলেই একাধিক স্বতন্ত্র ভিজ্যুয়াল উপস্থাপনা থাকতে পারে, যেমন খোলা বা বন্ধ অবস্থা। ভ্যারিয়েন্ট কনফিগার করতে XML ব্যবহার করুন। <Panel> এলিমেন্টের মধ্যে একটি সাব-ট্যাগ ব্যবহার করুন।

প্রতিটি <Variant> ট্যাগের একটি আবশ্যিক id অ্যাট্রিবিউট থাকে, যা এটিকে স্বতন্ত্রভাবে শনাক্ত করে। প্রোপার্টি উত্তরাধিকারসূত্রে পাওয়ার জন্য ট্যাগটি কোনো প্যারেন্ট ভ্যারিয়েন্টকেও উল্লেখ করতে পারে। এই ইনহেরিটেন্স পদ্ধতিটি একাধিক ভ্যারিয়েন্টের মধ্যে সাধারণ প্রোপার্টিগুলোর কার্যকর সংজ্ঞায়নের সুযোগ করে দেয়।

XML অ্যাট্রিবিউট

স্টেট ও ট্রানজিশন নির্ধারণ করতে <TaskPanel> বা <DecorPanel> ট্যাগের সাথে এই অ্যাট্রিবিউটগুলো ব্যবহার করুন।

বৈশিষ্ট্য অবস্থা বর্ণনা
id বাধ্যতামূলক ভেরিয়েন্টটির অনন্য শনাক্তকারী। এই আইডিটি ট্রানজিশনে ভেরিয়েন্টটিকে উল্লেখ করতে অথবা কোনো প্যানেলের defaultVariant হিসেবে ব্যবহৃত হয়।
parent ঐচ্ছিক অন্য একটি ভ্যারিয়েন্টের আইডি নির্দিষ্ট করে, যেখান থেকে বর্তমান ভ্যারিয়েন্টটি প্রোপার্টি উত্তরাধিকার সূত্রে পাবে। যদি কোনো প্রোপার্টি বর্তমান ভ্যারিয়েন্টে স্পষ্টভাবে সংজ্ঞায়িত না থাকে, তবে এটি তার প্যারেন্ট ভ্যারিয়েন্টে সংজ্ঞায়িত মানটি ব্যবহার করে।

XML চাইল্ড এলিমেন্ট

প্যানেলটি যখন এই ভ্যারিয়েন্টের অবস্থায় থাকবে, তখন এর দৃশ্যগত বৈশিষ্ট্যগুলো নির্দিষ্ট করতে এই ঐচ্ছিক উপাদানগুলো ব্যবহার করুন।

শিশু উপাদান বর্ণনা
<Visibility> প্যানেলটি দৃশ্যমান না অদৃশ্য তা নির্দিষ্ট করে এবং এতে একটি isVisible অ্যাট্রিবিউট (বুলিয়ান) থাকে।
<Alpha> প্যানেলের স্বচ্ছতার মাত্রা নির্দিষ্ট করে; এতে একটি alpha অ্যাট্রিবিউট (ফ্লোট, ০.০ থেকে ১.০) থাকে।
<Layer> অন্যান্য প্যানেলের সাপেক্ষে প্যানেলটির Z-ক্রম নির্ধারণ করে; এতে একটি layer অ্যাট্রিবিউট (পূর্ণসংখ্যা) থাকে। উচ্চতর মানগুলো উপরে অঙ্কিত হয়।
<Focus> ট্রানজিশনের সময় প্যানেলটি ফোকাস পাবে কিনা তা নির্দিষ্ট করে; এতে একটি onTransition অ্যাট্রিবিউট (বুলিয়ান) থাকে।
<Bounds>

স্ক্রিনে প্যানেলটির আয়তাকার এলাকা (অবস্থান এবং আকার) নির্ধারণ করে। এই এলাকাটি বাম, উপর, নীচে, প্রস্থ এবং উচ্চতার মতো অ্যাট্রিবিউট দ্বারা নিয়ন্ত্রিত হয়।

  • left এবং right স্ক্রিনের বাম প্রান্ত থেকে দূরত্ব নির্দেশ করে।
  • top এবং bottom স্ক্রিনের উপরের প্রান্ত থেকে দূরত্ব নির্দেশ করে।
  • width এবং height একটি আয়তক্ষেত্রের প্রস্থ ও উচ্চতা নির্দিষ্ট করে এবং এটি কেবল তখনই প্রয়োজন হয় যখন left ও right (বা top ও bottom ) উভয়ই নির্দিষ্ট করা থাকে না।
  • dimensions পিক্সেল, ডিপি, শতাংশ বা রিসোর্স রেফারেন্সের মাধ্যমে নির্দিষ্ট করা যেতে পারে।

পার্সেন্টেজ ব্যবহার করার সময়, আপনি পার্সেন্টেজ-ভিত্তিক সীমানাগুলিতে নির্দিষ্ট সমন্বয় প্রয়োগ করতে অফসেট অ্যাট্রিবিউট— leftOffset , topOffset , rightOffset , এবং bottomOffset ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, নীচের একটি নির্দিষ্ট-উচ্চতার নেভিগেশন বার বাদ দিয়ে একটি প্যানেলকে স্ক্রিনের ১০০% উচ্চতা জুড়ে রাখতে চাইলে, উচ্চতা ১০০% এবং bottomOffset নেভিগেশন বারের নির্দিষ্ট উচ্চতায় সেট করুন। এটি করলে প্যানেলের নীচের প্রান্তটি উপরের দিকে উঠে আসে।

<SafeBounds> প্যানেলের সীমানার মধ্যে একটি নিরাপদ এলাকা নির্দিষ্ট করে, যা ডিসপ্লে কাটআউট বা ইনসেট দ্বারা ওভারল্যাপ হয় না, যাতে এর মধ্যে আঁকা অ্যাপগুলির সামঞ্জস্যতা জোরদার করা যায়। এর অ্যাট্রিবিউটগুলি <Bounds> এর অনুরূপ।
<Corner> প্যানেলের কোণাগুলোর ব্যাসার্ধ নির্ধারণ করে, যা গোলাকার কোণার সুযোগ দেয় এবং এতে একটি ব্যাসার্ধ অ্যাট্রিবিউট (পূর্ণসংখ্যা) থাকে। ডিফল্ট হিসেবে একটি তীক্ষ্ণ কোণা থাকে এবং তা নির্ধারণ করার প্রয়োজন হয় না।
<Insets>

প্যানেলের জন্য ইনসেট (প্যাডিং) নির্দিষ্ট করে। এতে লেফট, টপ, রাইট, বটম অ্যাট্রিবিউট রয়েছে। প্যানেলের মধ্যে চালু করা অ্যাপগুলোকে এই ইনসেটগুলো জানানো হয়।

  • left বাম দিকের ইনসেটকে বোঝায়।
  • right ডান দিকের ইনসেটকে বোঝায়। উদাহরণস্বরূপ, zero right inset বলতে বোঝায় ডান দিকে কোনো ইনসেট নেই।
  • top বলতে উপরের দিকের ভেতরের ফাঁকা অংশকে বোঝায়।
  • bottom নিচের দিকের ইনসেটকে বোঝানো হয়। উদাহরণস্বরূপ, zero right inset বলতে ডান দিকে কোনো ইনসেট না থাকাকে বোঝায়।
<Background> অ্যাপ পরিবর্তন করার সময় স্বচ্ছতা রোধ করার জন্য একটি ঐচ্ছিক ব্যাকগ্রাউন্ড ডেকোর প্যানেল যুক্ত করা হয়েছে। এটি এই ডেকোর লেয়ারের জন্য রঙ এবং আলফার মতো বৈশিষ্ট্যগুলো নির্ধারণ করে। ডেকোর লেয়ারের বৈশিষ্ট্যগুলো, যেমন বাউন্ডস এবং লেয়ার, আগে থেকে সেট করা না থাকলে ডিফল্টরূপে ভ্যারিয়েন্টের বৈশিষ্ট্যগুলো গ্রহণ করে।

নমুনা কোড 

<Variant id="@id/opened">
    <Visibility isVisible="true"/>
    <Bounds left="0dp"
            top="0dp"
            right="100%"
            bottom="100%"
            bottomOffset="100dp"/>
    <Alpha value="1.0"/>
    <Layer value="10"/>
    <Focus onTransition="true"/>
    <Corner radius="24dp"/>
    <Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
    <Background color="@color/app_background" alpha="0.9"/>
</Variant>

ভিজ্যুয়াল বৈশিষ্ট্যগুলি ইন্টারপোলেট করুন

ভিজ্যুয়াল প্রোপার্টি ইন্টারপোলেট করতে KeyFrameVariant ব্যবহার করুন। variant এই বিশেষায়িত এক্সটেনশনটি একটি অবিচ্ছিন্ন ভগ্নাংশ মানের (০ থেকে ১) উপর ভিত্তি করে তৈরি, যা অবিচ্ছিন্ন ইনপুটের মাধ্যমে মসৃণ ও ডাইনামিক ট্রানজিশন সম্ভব করে তোলে; যেমন একটি ড্র্যাগ অপারেশন, যেখানে ড্র্যাগের পরিমাণের সাথে প্যানেলের অবস্থা গতিশীলভাবে পরিবর্তিত হয়।

XML অ্যাট্রিবিউট

KeyFrameVariant কোনো অ্যাট্রিবিউট নেই। একটি KeyFrameVariant নির্ধারণ করার জন্য প্রয়োজনীয় তথ্য <KeyFrameVariant> ট্যাগটিতে থাকে।

XML চাইল্ড এলিমেন্ট

KeyFrameVariant মধ্যে এক বা একাধিক <KeyFrame> চাইল্ড ট্যাগ থাকে। প্রতিটি <KeyFrame> এর একটি framePosition অ্যাট্রিবিউট (০-১০০) থাকে এবং এটি একটি variant অ্যাট্রিবিউটকে (অন্য একটি ভ্যারিয়েন্টের আইডি) নির্দেশ করে। এই keyframes একটি অবিচ্ছিন্ন ট্রানজিশনের নির্দিষ্ট মুহূর্তে প্যানেলের অবস্থা নির্ধারণ করে।

নমুনা কোড 

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
পূর্ববর্তী
একটি প্যানেল কনফিগার করুন
পরবর্তী
ট্রানজিশন কনফিগার করুন