از یک متغیر برای طراحی حالت بصری استفاده کنید

یک متغیر (variant) یک حالت بصری خاص برای یک پنل تعریف می‌کند و به یک پنل واحد اجازه می‌دهد چندین نمایش بصری متمایز، مانند حالت باز یا بسته، داشته باشد. از XML برای پیکربندی متغیر (variant) استفاده کنید. از یک زیربرچسب درون یک عنصر <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 می‌توان بر حسب پیکسل، DP، درصد یا ارجاع به منابع مشخص کرد.

هنگام استفاده از درصدها، می‌توانید از ویژگی‌های offset برای اعمال تنظیمات ثابت روی مرزهای مبتنی بر درصد استفاده کنید - leftOffset ، topOffset ، rightOffset و bottomOffset .

برای مثال، برای اینکه مشخص شود یک پنل ۱۰۰٪ ارتفاع صفحه نمایش را اشغال می‌کند و نوار ناوبری با ارتفاع ثابت در پایین را شامل نمی‌شود، ارتفاع را روی ۱۰۰٪ و bottomOffset روی ارتفاع ثابت نوار ناوبری تنظیم کنید. انجام این کار لبه پایینی پنل را به سمت بالا می‌کشد.

<SafeBounds> یک ناحیه امن در محدوده پنل مشخص می‌کند که با برش‌های نمایشگر یا حاشیه‌های داخلی همپوشانی ندارد تا سازگاری برنامه‌های ترسیم شده در داخل آن را برجسته کند. ویژگی‌های آن مشابه <Bounds> است.
<Corner> شعاع گوشه‌های پنل را تعریف می‌کند و امکان گرد کردن گوشه‌ها را فراهم می‌کند و شامل یک ویژگی شعاع (عدد صحیح) است. گوشه تیز پیش‌فرض است و نیازی به تعریف آن نیست.
<Insets>

فاصله‌های داخلی (padding) را برای پنل مشخص می‌کند. شامل ویژگی‌های left، top، right و bottom است. این فاصله‌های داخلی به برنامه‌هایی که درون پنل اجرا می‌شوند، گزارش می‌شوند.

  • left درج در سمت چپ را مشخص می‌کند.
  • برای مثال، مقدار right برای inset سمت راست نشان می‌دهد که هیچ insetی در سمت راست وجود ندارد.
  • top میزان درج (inset) در سمت بالا را مشخص می‌کند.
  • 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) است که امکان انتقال‌های روان و پویا را که توسط ورودی پیوسته هدایت می‌شوند، فراهم می‌کند، مانند عملیات کشیدن (drag) که در آن حالت پنل به صورت پویا با مقدار کشیدن تغییر می‌کند.

ویژگی‌های XML

KeyFrameVariant هیچ ویژگی‌ای ندارد. برچسب <KeyFrameVariant> حاوی اطلاعات مورد نیاز برای تعریف یک KeyFrameVariant است.

عناصر فرزند XML

KeyFrameVariant شامل یک یا چند تگ فرزند <KeyFrame> است. هر <KeyFrame> دارای یک ویژگی framePosition (0-100) است و به یک ویژگی variant (شناسه یک 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>
قبلی
پیکربندی یک پنل
بعدی
پیکربندی انتقال‌ها