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

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

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

XML বৈশিষ্ট্যাবলী

অবস্থা এবং রূপান্তর সংজ্ঞায়িত করতে, এই বৈশিষ্ট্যগুলি <TaskPanel> অথবা <DecorPanel> ট্যাগের সাথে ব্যবহার করুন।

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

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

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

শিশু উপাদান বিবরণ
<Visibility> প্যানেলটি দৃশ্যমান নাকি লুকানো এবং একটি isVisible অ্যাট্রিবিউট (বুলিয়ান) আছে কিনা তা নির্দিষ্ট করে।
<Alpha> প্যানেলের স্বচ্ছতার স্তর নির্দিষ্ট করে; একটি alpha বৈশিষ্ট্য ধারণ করে (float, 0.0 থেকে 1.0)।
<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 ডান দিকের ইনসেটটি নির্দিষ্ট করে। উদাহরণস্বরূপ, একটি শূন্য ডান ইনসেট নির্দেশ করে যে ডান দিকে কোনও ইনসেট নেই।
  • top উপরের দিকের ইনসেটটি নির্দিষ্ট করে।
  • bottom নিচের দিকের ইনসেটটি নির্দেশ করে। উদাহরণস্বরূপ, একটি শূন্য ডান ইনসেট নির্দেশ করে যে ডান দিকে কোনও ইনসেট নেই।
<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 এই বিশেষায়িত এক্সটেনশনটি একটি ক্রমাগত ভগ্নাংশ মানের (0 থেকে 1) উপর ভিত্তি করে তৈরি যা ক্রমাগত ইনপুট দ্বারা চালিত মসৃণ, গতিশীল ট্রানজিশনের জন্য অনুমতি দেয়, যেমন ড্র্যাগ অপারেশন যখন প্যানেলের অবস্থা ড্র্যাগ পরিমাণের সাথে গতিশীলভাবে পরিবর্তিত হয়।

XML বৈশিষ্ট্যাবলী

KeyFrameVariant কোনও বৈশিষ্ট্য নেই। <KeyFrameVariant> ট্যাগে KeyFrameVariant সংজ্ঞায়িত করার জন্য প্রয়োজনীয় তথ্য থাকে।

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

KeyFrameVariant এক বা একাধিক <KeyFrame> চাইল্ড ট্যাগ থাকে। প্রতিটি <KeyFrame> একটি framePosition অ্যাট্রিবিউট (0-100) থাকে এবং এটি একটি variant অ্যাট্রিবিউট (অন্য ভেরিয়েন্টের ID) নির্দেশ করে। এই 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>
পূর্ববর্তী
একটি প্যানেল কনফিগার করুন
পরবর্তী
ট্রানজিশন কনফিগার করুন