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

וריאנט מגדיר מצב חזותי ספציפי של חלונית, ומאפשר לחלונית אחת להציג כמה ייצוגים חזותיים שונים, כמו מצב פתוח או סגור. משתמשים ב-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> מגדיר את הרדיוס של פינות החלונית, ומאפשר פינות מעוגלות. מכיל מאפיין radius (מספר שלם). פינה חדה היא ברירת המחדל ואין צורך להגדיר אותה.
<Insets>

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

  • ‫left מציין את השוליים הפנימיים בצד ימין.
  • ‫right מציין את השוליים הפנימיים בצד ימין. לדוגמה, אם מציינים אפס בערך של שוליים פנימיים ימניים, המשמעות היא שאין שוליים פנימיים בצד ימין.
  • ‫top מציין את השוליים הפנימיים בצד העליון.
  • ‫bottom מציין את השוליים הפנימיים בצד התחתון. לדוגמה, אם מציינים אפס בערך של right inset, המשמעות היא שאין שוליים פנימיים בצד ימין.
<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>
הקודם
הגדרת חלונית
הבא
הגדרת מעברים