יצירת צללים ותצוגות בקליפ

אפשר לנסות את הדרך של כתיבת הודעה

‫Jetpack Compose היא ערכת הכלים המומלצת לבניית ממשק משתמש ב-Android. כאן מוסבר איך עובדים עם ערכות נושא בכתיבה.

Modifier.shadow() →

ב-Material Design מוצג גובה של רכיבי ממשק המשתמש. ההגבהה עוזרת למשתמשים להבין את החשיבות היחסית של כל רכיב ולהתמקד במשימה הנוכחית.

הגובה של תצוגה, שמיוצג על ידי מאפיין Z, קובע את המראה החזותי של הצל שלה. צפיות עם ערכי Z גבוהים יותר מטילות צללים גדולים יותר ורכים יותר, והן מסתירות צפיות עם ערכי Z נמוכים יותר. עם זאת, הערך Z של תצוגה לא משפיע על הגודל שלה.

הצללים מצוירים על ידי ההורה של התצוגה המוגבהת. הם כפופים לחיתוך של תצוגה רגילה, וכברירת מחדל הם נחתכים על ידי הרכיב העליון.

המאפיין הזה שימושי גם ליצירת אנימציות שבהן הווידג'טים עולים באופן זמני מעל מישור התצוגה בזמן ביצוע פעולות.

מידע נוסף זמין במאמר בנושא הגבהה ב-Material Design.

הקצאת גובה לתצוגות

הערך Z של צפייה כולל שני רכיבים:

• גובה: הרכיב הסטטי
• תרגום: הרכיב הדינמי שמשמש לאנימציות

Z = elevation + translationZ

הערכים של Z נמדדים ב-dp (פיקסלים שלא תלויים בדחיסות).

כדי להגדיר את הגובה (במצב מנוחה) של תצוגה, משתמשים במאפיין android:elevation בפריסת ה-XML. כדי להגדיר את הגובה של תצוגה בקוד של פעילות, משתמשים בשיטה View.setElevation().

כדי להגדיר את התרגום של תצוגה, משתמשים בשיטה View.setTranslationZ().

השיטות ViewPropertyAnimator.z() ו- ViewPropertyAnimator.translationZ() מאפשרות להוסיף אנימציה לגובה של תצוגות. מידע נוסף זמין במאמר בנושא אנימציה של מאפיינים במדריך למפתחים ובמאמר בנושא ViewPropertyAnimator בהפניה ל-API.

אפשר גם להשתמש ב-StateListAnimator כדי לציין את האנימציות האלה באופן הצהרתי. האפשרות הזו שימושית במיוחד במקרים שבהם שינויים במצב מפעילים אנימציות, למשל כשמשתמש מקיש על לחצן. מידע נוסף זמין במאמר הנפשת שינויים במצב של תצוגה באמצעות StateListAnimator.

התאמה אישית של הצללות ומתארים בתצוגה

הגבולות של הרקע של תצוגה קובעים את צורת ברירת המחדל של הצל שלה. קווי המתאר מייצגים את הצורה החיצונית של אובייקט גרפי ומגדירים את אזור האדווה למשוב על מגע.

נבחן את התצוגה הבאה, שמוגדרת עם רקע drawable:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

הרקע של הפריט הגרפי שניתן להזזה מוגדר כמלבן עם פינות מעוגלות:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

התצוגה מטילה צל עם פינות מעוגלות, מכיוון שהפריט הגרפי שניתן להזזה של הרקע מגדיר את קו המתאר של התצוגה. אם מספקים מתאר מותאם אישית, הוא מחליף את צורת ברירת המחדל של הצל של תצוגה.

כדי להגדיר מבנה מותאם אישית לתצוגה בקוד:

1. הארכת השיעור ViewOutlineProvider.
2. מחליפים את השיטה getOutline().
3. מקצים את ספק המתאר החדש לתצוגה באמצעות השיטה View.setOutlineProvider().

אפשר ליצור מתארים אובליים ומלבניים עם פינות מעוגלות באמצעות השיטות במחלקה Outline. ספק המתאר שמוגדר כברירת מחדל לתצוגות מקבל את המתאר מרקע התצוגה. כדי למנוע מתצוגה להטיל צל, מגדירים את ספק המתאר שלה ל-null.

צפיות בקליפים

תצוגות חיתוך מאפשרות לשנות את הצורה של תצוגה. אפשר לחתוך את התצוגות כדי לשמור על עקביות עם רכיבי עיצוב אחרים, או כדי לשנות את הצורה של תצוגה בתגובה לקלט של המשתמש. אפשר לחתוך תצוגה לאזור המתאר שלה באמצעות ה-method‏ View.setClipToOutline(). רק קווי מתאר שהם מלבנים, עיגולים ומלבנים עם פינות מעוגלות תומכים בחיתוך, כפי שנקבע על ידי השיטה Outline.canClip().

כדי לחתוך תצוגה לצורה של רכיב שאפשר לצייר, מגדירים את הרכיב כרקע של התצוגה – כמו בדוגמה הקודמת – וקוראים לשיטה View.setClipToOutline().

חיתוך של תצוגות הוא פעולה יקרה, לכן לא כדאי להנפיש את הצורה שמשמשת לחיתוך של תצוגה. כדי ליצור את האפקט הזה, משתמשים באנימציית חשיפה.