כשמשתמש יוצר אינטראקציה עם האפליקציה, לרוב הוא עושה זאת על ידי נגיעה באלמנטים את המסך שלו. עם זאת, זוהי לא הדרך היחידה של אינטראקציה. צורות אחרות של האינטראקציה עשויה לכלול את סוגי האינטראקציות הבאים:
- משתמשי ChromeOS יכולים להשתמש במקשי החיצים במקלדת הפיזית כדי לנווט במסך.
- מישהו שמשחק במשחק יכול להשתמש בבקר המשחקים המצורף שלו כדי לנווט דרך התפריט של המשחק.
- משתמש באפליקציה לנייד עשוי לעבור בין אלמנטים באמצעות המקלדת שמופיעה במסך.
במקרים כאלו, חשוב לעקוב אחר הרכיב שפעיל בכל זמן נתון נקודת זמן, כלומר התמקדות. הרכיבים במסך צריכים להיות שממוקדות בסדר לוגי. ב-'Jetpack פיתוח נייטיב' יש דרך ברירת מחדל לטיפול בפוקוס הוא נכון ברוב המקרים. עם זאת, במקרים מסוימים ייתכן שתצטרכו לשנות בהתנהגות ברירת המחדל הזאת.
בדפים הבאים מוסבר איך להשתמש במיקוד באפליקציה:
- שינוי סדר המעבר למיקוד: הסבר איך לשנות את סדר ברירת המחדל של המיקוד, להוסיף קבוצות מיקוד ולהשבית את המיקוד של תוכן קומפוזבילי.
- שינוי התנהגות המיקוד: תיאור האופן שבו ניתן לבקש, לצלם ולשחרר מיקוד, ואיך להפנות את המיקוד בזמן כניסה למסך.
- תגובה למיקוד: מסביר איך להגיב לשינויים במיקוד, להוסיף סימנים ויזואליים לאלמנטים ולהבין את מצב המיקוד של אלמנט.
סדר המעבר של המיקוד המוגדר כברירת מחדל
לפני שנתעמק בהתנהגות ברירת המחדל של החיפוש למיקוד, חשוב
להבין את המושג רמה בהיררכיה: באופן כללי, אפשר
אומרים ששני Composables
נמצאים באותה רמה כשהם אחים, כלומר
שיש להם את אותם ההורים. לדוגמה, רכיבים בתוך Column
נמצאים ב-
אותה רמה. כשמעלים רמה, צריך לעבור מחשבון של ילד או ילדה ל-Composable
שלה
או, תוך שמירה על אותה דוגמה, חוזרים מפריט לColumn
מכיל אותה. ירידה ברמה היא ההיפך, מ-Column
של הפריטים הכלולים. אפשר להחיל את הקונספט הזה על כל Composable
שיכול להכיל Composables
אחרים.
הניווט בממשק המשתמש יכול להתרחש בכמה דרכים, ורוב המשתמשים כבר למדו:
- כרטיסיות: ניווט חד-ממדי, קדימה או חזרה. כרטיסייה
הניווט יתקדם לרכיב הבא או הקודם בהיררכיה. על ידי
כברירת מחדל, ההצעות לכתיבה יוצגו בהתאם להצהרה של
Composables
. חד-כיווני ניתן לנווט באמצעות מקשtab
במקלדת, או באמצעות החוגה מסגרת של שעון, וחיפוש ממוקד מהסוג הזה יבקר בכל אחד מהרכיבים מסך. - מקשי החיצים: ניווט דו-ממדי: מעבר שמאלה, ימינה, למעלה או למטה. ניתן להשיג ניווט דו-ממדי באמצעות מקשי החיצים (D-pad) בטלוויזיה או בחץ במקלדת, וסדר המעבר שלו מבקר רק ברכיבים ברמה. אפשר להשתמש בלחצני החיצים (D-pad) ובלחצן 'הקודם' כדי לרדת ולגבות רמה שונה.
ניקח לדוגמה את צילום המסך שלמטה, שבו יש ארבעה לחצנים, אחד למטה.
לצד השני, ואתם רוצים לעבור ביניהם לפי הסדר שבו הם יופיעו.
עם 'Jetpack פיתוח נייטיב', התהליך הזה פשוט וייחודי: ערכת הכלים מאפשרת לכם
לעבור בין כל תכנים קומפוזביליים בסדר אנכי מלמעלה למטה באמצעות
מקש tab
, או מקישים על החץ למעלה או למטה כדי להעביר את המיקוד.
![צילום מסך של רשימת לחצנים במאונך אחד מתחת לשני בגורם צורה קטן.](https://developer.android.com/static/develop/ui/compose/images/touchinput/focus_compact_screen.png?authuser=9&hl=he)
כשעוברים לפריסה מסוג אחר, השינויים קלים. אם
יש יותר מעמודה אחת, כמו הפריסה שלמטה, 'Jetpack פיתוח נייטיב' מאפשר
לנווט בהם בלי להוסיף שום קוד. אם לוחצים על 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
,
יוצרת את סדר המיקוד הבא:
![צילום מסך של רשימת לחצנים שמוצבים בשתי עמודות זה לצד זה בגורם צורה גדול יותר.](https://developer.android.com/static/develop/ui/compose/images/touchinput/focus_horizontal_navigation.gif?authuser=9&hl=he)
בקטע הקוד שלמטה, עליך להצהיר על הפריטים בColumns
ולא בRows
:
Row { Column { TextButton({ }) { Text("First field") } TextButton({ }) { Text("Second field") } } Column { TextButton({ }) { Text("Third field") } TextButton({ }) { Text("Fourth field") } } }
הפריסה הזו חוצה את הפריטים אנכית, מלמעלה למטה, מההתחלה של המסך לקראת סוף:
![צילום מסך של רשימת לחצנים שמוצבים בשתי עמודות זה לצד זה בגורם צורה גדול יותר.](https://developer.android.com/static/develop/ui/compose/images/touchinput/focus_vertical_navigation.gif?authuser=9&hl=he)
שתי הדוגמאות הקודמות מספקות, למרות שהן שונות בניווט חד-כיווני
את אותה חוויה כשמדובר בניווט דו-ממדי. בדרך כלל
מכיוון שלפריטים במסך יש מיקום גיאוגרפי זהה
דוגמאות. ניווט ישירות מה-Column
הראשון מעביר את המיקוד אל
השני, וניווט למטה מה-Row
הראשון מעביר את המיקוד לזה
מתחתיה.
מומלץ עבורך
- הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
- איך משנים את התנהגות המיקוד
- פריסת האילוצים במהלך הכתיבה
- פריסות זורות במצב 'כתיבה'