העברת המיקוד לכתיבה

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

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

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

בדפים הבאים מוסבר איך להשתמש במיקוד באפליקציה:

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

סדר ברירת המחדל של מעבר בין רכיבים

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

יש כמה דרכים לנווט בממשק המשתמש, וחלקן מוכרות לרוב המשתמשים:

  • ‫TAB: ניווט חד-ממדי, קדימה או אחורה. הניווט באמצעות מקש Tab מעביר את המיקוד לרכיב הבא או הקודם בהיררכיה. כברירת מחדל, בכלי הכתיבה מוצגת ההצהרה בנושא Composables. אפשר להשיג ניווט חד-כיווני באמצעות המקש tab במקלדת או באמצעות המסגרת המסתובבת בשעון, ובחיפוש מיקוד כזה כל רכיב במסך יסומן.
  • מקשי החיצים: ניווט דו-ממדי, שמאלה, ימינה, למעלה או למטה. אפשר לנווט דו-ממדי באמצעות מקשי החיצים במקלדת או מקשי הניווט בטלוויזיה, וסדר המעבר בין הרכיבים מאפשר להגיע רק לרכיבים ברמה מסוימת. אפשר להשתמש בכפתור המרכזי של ה-D-Pad ובכפתור 'הקודם' כדי לרדת ולעלות לרמה אחרת.

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

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

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

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

ה-Composables מוצהרים בשני Rows, ורכיבי המיקוד מוצהרים לפי הסדר, מהראשון עד הרביעי. כשלוחצים על המקש tab, סדר המיקוד הוא כזה:

צילום מסך של רשימת לחצנים שמוצבים בשתי עמודות זו לצד זו בגורם צורה גדול יותר.
איור 2. רשימת לחצנים שמוצבים בשתי עמודות זו לצד זו בגורם צורה גדול יותר

בקטע הקוד שבהמשך, הפריטים מוצהרים ב-Columns ולא ב-Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

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

צילום מסך של רשימת לחצנים שמוצבים בשתי עמודות זו לצד זו בגורם צורה גדול יותר.
איור 3. רשימת לחצנים שמוצבים בשתי עמודות זו לצד זו בגורם צורה גדול יותר

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

הבא
שינוי סדר מעבר הפוקוס