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

يحدّد خيار المنتج حالة مرئية معيّنة للوحة، ما يسمح للوحة واحدة بعرض تمثيلات مرئية متعدّدة ومختلفة، مثل حالة مفتوحة أو مغلقة. استخدِم 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> يحدّد نصف قطر زوايا اللوحة، ما يسمح بإنشاء زوايا مستديرة ويحتوي على سمة radius (عدد صحيح). الزاوية الحادة هي القيمة التلقائية وليس من الضروري تحديدها.
<Insets>

يحدّد الحواف الداخلية (المساحة المتروكة) للوحة. يحتوي على سمات left وtop و right وbottom. يتم إرسال هذه الحواف الداخلية إلى التطبيقات التي يتم تشغيلها داخل اللوحة.

  • تحدّد السمة 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>
السابق
ضبط لوحة
التالي
ضبط الانتقالات