استخدام خيار تصميم حالة مرئية

يحدّد النوع حالة مرئية معيّنة للوحة، ما يتيح للوحة واحدة أن تتضمّن عدة تمثيلات مرئية مختلفة، مثل حالة مفتوحة أو مغلقة. استخدام XML لضبط خيار المنتج استخدِم علامة فرعية ضمن العنصر <Panel>.

تحتوي كل علامة <Variant> على سمة id إلزامية لتحديدها بشكلٍ فريد. يمكن أن تشير العلامة أيضًا إلى خيار منتج رئيسي لاكتساب السمات. تتيح آلية التوريث هذه تحديد السمات المشتركة بكفاءة على مستوى خيارات متعدّدة.

سمات XML

لتحديد الحالات وعمليات الانتقال، استخدِم هذه السمات مع العلامة <TaskPanel> أو <DecorPanel>.

السمة الحالة الوصف
id إلزامي المعرّف الفريد لخيارات المنتج. يُستخدَم هذا المعرّف للإشارة إلى خيار المنتج في عمليات الانتقال أو كقيمة defaultVariant للوحة.
parent اختياري تحدّد هذه السمة معرّف خيار منتج آخر يجب أن يرث الخيار الحالي سماته. إذا لم يتم تحديد سمة بشكل صريح في خيار المنتج الحالي، سيتم استخدام القيمة المحدّدة في خيار المنتج الرئيسي.

عناصر XML الفرعية

استخدِم هذه العناصر الاختيارية لتحديد الخصائص المرئية للوحة عندما تكون في حالة هذا النوع.

العنصر الفرعي الوصف
<Visibility> تحدّد هذه السمة ما إذا كانت اللوحة مرئية أو مخفية، وتحتوي على السمة isVisible (قيمة منطقية).
<Alpha> تحدّد هذه السمة مستوى شفافية اللوحة، وتحتوي على السمة alpha (عدد عائم، من 0.0 إلى 1.0).
<Layer> تضبط هذه السمة ترتيب اللوحة على المحور Z بالنسبة إلى اللوحات الأخرى، وتحتوي على السمة layer (عدد صحيح). يتم رسم القيم الأعلى في الأعلى.
<Focus> تحدّد هذه السمة ما إذا كان بإمكان اللوحة اكتساب التركيز أثناء الانتقال، وتحتوي على السمة onTransition (منطقية).
<Bounds>

تحدّد هذه السمة مساحة مستطيلة (الموضع والحجم) للوحة على الشاشة. يتم التحكّم في هذه المنطقة من خلال سمات مثل left وtop وbottom وwidth وheight.

  • تحدّد left وright المسافة من الحافة اليمنى للشاشة.
  • تحدّد top وbottom المسافة من الحافة العلوية للشاشة.
  • تحدّد width وheight عرض المستطيل وارتفاعه، ولا تكون مطلوبة إلا عندما لا يتم تحديد كل من left وright (أو top وbottom).
  • يمكن تحديد dimensions بالبكسل أو وحدات البكسل المستقلة عن الكثافة أو النسب المئوية أو مراجع الموارد.

عند استخدام النسب المئوية، يمكنك استخدام سمات الإزاحة لتطبيق تعديلات ثابتة على الحدود المستندة إلى النسب المئوية، مثل leftOffset وtopOffset وrightOffset وbottomOffset.

على سبيل المثال، لتحديد أنّ اللوحة تشغل% 100 من ارتفاع الشاشة مع استبعاد شريط التنقّل ذي الارتفاع الثابت في أسفل الشاشة، اضبط الارتفاع على% 100 و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) ويشير إلى سمة خيار منتج (معرّف خيار منتج آخر). تحدّد هذه 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>
السابق
ضبط لوحة
التالي
ضبط الانتقالات