שימוש בווריאציה לעיצוב מצב ויזואלי

וריאציה מגדירה מצב חזותי ספציפי לחלונית, ומאפשרת לחלונית אחת להציג כמה ייצוגים חזותיים שונים, כמו מצב פתוח או סגור. משתמשים ב-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 בפיקסלים, ב-DP, באחוזים או בהפניות למשאבים.

כשמשתמשים באחוזים, אפשר להשתמש במאפייני היסט כדי להחיל התאמות קבועות על הגבולות מבוססי-האחוזים – leftOffset,‏ topOffset,‏ rightOffset ו-bottomOffset.

לדוגמה, כדי להגדיר שחלונית תתפוס 100% מגובה המסך, בלי לכלול סרגל ניווט עם גובה קבוע בתחתית, צריך להגדיר את הגובה ל-100% ואת bottomOffset לגובה הקבוע של סרגל הניווט. פעולה כזו תגרום לקצה התחתון של החלונית להימשך כלפי מעלה.
<SafeBounds> המאפיין הזה מציין אזור בטוח בגבולות של החלונית שלא חופף לחלקים חתוכים או לשוליים של המסך, כדי להדגיש את התאימות לאפליקציות שמוצגות בתוכו. המאפיינים שלה דומים לאלה של <Bounds>.
<Corner> מגדיר את הרדיוס של פינות החלונית, ומאפשר פינות מעוגלות. מכיל מאפיין רדיוס (מספר שלם). פינה חדה היא ברירת המחדל ואין צורך להגדיר אותה.
<Insets>

מציינת את השוליים הפנימיים (padding) של הלוח. הוא מכיל מאפיינים של צד שמאל, צד עליון, צד ימין וצד תחתון. ההוספות האלה מדווחות לאפליקציות שהופעלו בחלונית.

  • ‫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>
הקודם
הגדרת חלונית
הבא
הגדרת מעברים