יצירת כיתה לצפייה

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

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

  • עמידה בתקנים של Android.
  • מספקת מאפיינים מותאמים אישית שניתנים לעיצוב ועובדים עם פריסות XML ב-Android.
  • שליחת אירועי נגישות.
  • תואמות למספר פלטפורמות של Android.

ה-Framework של Android מספק קבוצה של מחלקות בסיס ותגי XML שעוזרים ליצור תצוגה שעומדת בכל הדרישות האלה. בשיעור הזה נסביר איך להשתמש ב-Android framework כדי ליצור את הפונקציונליות הבסיסית של מחלקת תצוגה.

מידע נוסף זמין במאמר רכיבי תצוגה מותאמים אישית.

יצירת מחלקת משנה של תצוגה

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

כדי לאפשר ל-Android Studio ליצור אינטראקציה עם התצוגה, צריך לספק לפחות בנאי שמקבל אובייקט Context ואובייקט AttributeSet כפרמטרים. הבונה הזה מאפשר לעורך הפריסה ליצור ולערוך מופע של התצוגה.

Kotlin

class PieChart(context: Context, attrs: AttributeSet) : View(context, attrs)

Java

class PieChart extends View {
    public PieChart(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

הגדרת מאפיינים מותאמים אישית

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

  • מגדירים מאפיינים מותאמים אישית לתצוגה שלכם ברכיב משאב <declare-styleable> .
  • מציינים ערכים למאפיינים בפריסת ה-XML.
  • אחזור ערכי מאפיינים בזמן ריצה.
  • מחילים את ערכי המאפיינים שאוחזרו על התצוגה.

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

כדי להגדיר מאפיינים מותאמים אישית, מוסיפים <declare-styleable> משאבים לפרויקט. מקובל להכניס את המשאבים האלה לקובץ res/values/attrs.xml. דוגמה לקובץ attrs.xml: 

<resources>
   <declare-styleable name="PieChart">
       <attr name="showText" format="boolean" />
       <attr name="labelPosition" format="enum">
           <enum name="left" value="0"/>
           <enum name="right" value="1"/>
       </attr>
   </declare-styleable>
</resources>

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

אחרי שמגדירים מאפיינים מותאמים אישית, אפשר להשתמש בהם בקובצי XML של פריסות, בדיוק כמו במאפיינים מובנים. ההבדל היחיד הוא שהמאפיינים המותאמים אישית שייכים למרחב שמות אחר. במקום להיות שייכים למרחב השמות http://schemas.android.com/apk/res/android, הם שייכים ל-http://schemas.android.com/apk/res/[your package name]. לדוגמה, כך משתמשים במאפיינים שהוגדרו עבור PieChart: 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:custom="http://schemas.android.com/apk/res-auto">
 <com.example.customviews.charting.PieChart
     custom:showText="true"
     custom:labelPosition="left" />
</LinearLayout>

כדי להימנע מחזרה על URI ארוך של מרחב שמות, בדוגמה נעשה שימוש בהוראה xmlns. ההוראה הזו מקצה את הכינוי custom למרחב השמות http://schemas.android.com/apk/res/com.example.customviews. אתם יכולים לבחור כל שם כינוי שתרצו למרחב השמות.

שימו לב לשם תג ה-XML שמוסיף את התצוגה המותאמת אישית לפריסה. זהו השם המלא של מחלקת התצוגה המותאמת אישית. אם מחלקת התצוגה היא מחלקה פנימית, צריך לציין את השם של המחלקה החיצונית של התצוגה. לדוגמה, למחלקה PieChart יש מחלקה פנימית בשם PieView. כדי להשתמש במאפיינים מותאמים אישית מהסיווג הזה, צריך להשתמש בתג com.example.customviews.charting.PieChart$PieView.

החלת מאפיינים מותאמים אישית

כשיוצרים תצוגה מפריסת XML, כל המאפיינים בתג ה-XML נקראים מחבילת המשאבים ומועברים לבונה של התצוגה כ-AttributeSet. אפשר לקרוא ערכים ישירות מ-AttributeSet, אבל יש לכך כמה חסרונות:

  • הפניות למשאבים בתוך ערכי מאפיינים לא מפוענחות.
  • הסגנונות לא מוחלים.

במקום זאת, מעבירים את AttributeSet אל obtainStyledAttributes(). השיטה הזו מחזירה מערך TypedArray של ערכים שכבר בוטלה ההפניה שלהם ועוצבו.

הקומפיילר של משאבי Android עושה הרבה בשבילכם כדי להקל על הקריאה ל-obtainStyledAttributes(). לכל משאב <declare-styleable> בספרייה res/, הקובץ R.java שנוצר מגדיר מערך של מזהי מאפיינים וקבוצה של קבועים שמגדירים את האינדקס של כל מאפיין במערך. משתמשים בקבועים שהוגדרו מראש כדי לקרוא את המאפיינים מ-TypedArray. כך מחלקה PieChart קוראת את המאפיינים שלה:

Kotlin

init {
    context.theme.obtainStyledAttributes(
            attrs,
            R.styleable.PieChart,
            0, 0).apply {

        try {
            mShowText = getBoolean(R.styleable.PieChart_showText, false)
            textPos = getInteger(R.styleable.PieChart_labelPosition, 0)
        } finally {
            recycle()
        }
    }
}

Java

public PieChart(Context context, AttributeSet attrs) {
   super(context, attrs);
   TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs,
        R.styleable.PieChart,
        0, 0);

   try {
       mShowText = a.getBoolean(R.styleable.PieChart_showText, false);
       textPos = a.getInteger(R.styleable.PieChart_labelPosition, 0);
   } finally {
       a.recycle();
   }
}

הערה: אובייקטים של TypedArray הם משאב משותף, ולכן צריך למחזר אותם אחרי השימוש.

הוספת נכסים ואירועים

מאפיינים הם דרך יעילה לשלוט בהתנהגות ובתצוגה של תצוגות, אבל אפשר לקרוא אותם רק כשהתצוגה מאותחלת. כדי לספק התנהגות דינמית, צריך לחשוף זוג של getter ו-setter של מאפיין לכל מאפיין מותאם אישית. בקטע הקוד הבא אפשר לראות איך PieChart חושף מאפיין בשם showText:

Kotlin

fun isShowText(): Boolean {
    return mShowText
}

fun setShowText(showText: Boolean) {
    mShowText = showText
    invalidate()
    requestLayout()
}

Java

public boolean isShowText() {
   return mShowText;
}

public void setShowText(boolean showText) {
   mShowText = showText;
   invalidate();
   requestLayout();
}

שימו לב ש-setShowText מתקשר ל-invalidate() ול-requestLayout(). הקריאות האלה חיוניות כדי לוודא שהתצוגה פועלת בצורה מהימנה. צריך לבטל את התוקף של התצוגה אחרי כל שינוי במאפיינים שלה שעשוי לשנות את המראה שלה, כדי שהמערכת תדע שהיא צריכה לצייר אותה מחדש. באופן דומה, צריך לבקש פריסה חדשה אם חל שינוי בנכס שעשוי להשפיע על הגודל או הצורה של התצוגה. שכחה של קריאות לשיטות האלה עלולה לגרום לבאגים שקשה למצוא.

תצוגות בהתאמה אישית צריכות גם לתמוך ב-event listeners כדי להעביר אירועים חשובים. לדוגמה, PieChart חושף אירוע מותאם אישית בשם OnCurrentItemChanged כדי להודיע למאזינים שהמשתמש סיובב את תרשים העוגה כדי להתמקד בפלח חדש.

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

תכנון לנגישות

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

  • מתייגים את שדות הקלט באמצעות המאפיין android:contentDescription.
  • שליחת אירועי נגישות על ידי קריאה ל-sendAccessibilityEvent() כשמתאים.
  • תמיכה בבקרים חלופיים, כמו כפתורי החיצים (D-pad) או כדור עקיבה.

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