שינוי ממשק המשתמש של הניווט

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

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

פקדי ממשק משתמש במפה

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

ה-method setCustomControl מספקת מיקומים כמו שמוגדר ב-CustomControlPosition טיפוסים בני מנייה (enum):

  • SECONDARY_HEADER (מופיעה בפריסה לאורך בלבד)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

בתמונה מוצגות דוגמאות למיקומים שונים של פקד בממשק המשתמש, שמיידע את הנהג לגבי מיקום הנוסע.

מיקומי בקרה בהתאמה אישית

הוספת כותרת משנית מותאמת אישית

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

המיקום של הכותרת המשנית בהתאמה אישית מיישר את הקצה העליון שלה עם הקצה התחתון של הכותרת הראשית. המיקום הזה נתמך רק בportrait mode. ב-landscape mode, הכותרת המשנית לא זמינה והפריסה לא משתנה.

  1. יוצרים תצוגה של Android באמצעות אלמנט מותאם אישית של ממשק המשתמש או עם ViewGroup.
  2. אפשר לנפח את ה-XML או ליצור מופע בהתאמה אישית כדי להוסיף מופע של התצוגה ככותרת משנית.
  3. השתמש ב-NavigationView.setCustomControl או ב-SupportNavigationFragment.setCustomControl עם CustomControlPosition בתור SECONDARY_ שנפתח.

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

     mNavFragment.setCustomControl(getLayoutInflater().
       inflate(R.layout.your_custom_control, null),
       CustomControlPosition.SECONDARY_HEADER);
    

הסרת כותרת משנית

כדי להסיר את הכותרת המשנית ולחזור לתוכן ברירת המחדל, משתמשים בשיטה setCustomControl.

כדי להסיר אותה, צריך להגדיר את התצוגה לערך null.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

הוספת פקד מותאם אישית לתחתית של תצוגת הניווט

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

  1. יוצרים תצוגה של Android שכוללת את הרכיב בממשק המשתמש או את קבוצת התצוגות המפורטות שרוצים להוסיף.
  2. יוצרים את תצוגת הניווט או את המקטע.
  3. צריך לקרוא לשיטה setCustomControl בתצוגת הניווט או בקטע המקטע, ומציינים את אמצעי הבקרה והמיקום שבו רוצים להשתמש.

הדוגמה הבאה מראה View בהתאמה אישית שנוסף ל-SupportNavigationFragment:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment)
  getFragmentManager().findFragmentById(R.id.navigation_fragment);

// Create the custom control view.
MyCustomView myCustomView = new MyCustomView();

// Add the custom control to the bottom end corner of the layout.
mNavFragment.setCustomControl(myCustomView, CustomControlPosition.
  BOTTOM_END_BELOW);

הסרת בקרה בהתאמה אישית

כדי להסיר את הפקד בהתאמה אישית, משתמשים בשיטה setCustomControl ומציינים את המיקום של הפקד שרוצים להסיר.

במיקום התצוגה, מגדירים את הערך null.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

אביזרים לממשק המשתמש של מפות

ה-SDK של הניווט ל-Android מספק אביזרים לממשק המשתמש שמופיעים במהלך הניווט, בדומה לאלה שמופיעים באפליקציה של מפות Google ל-Android. ניתן לך לשנות את הרשאות הגישה או המראה של אמצעי הבקרה האלה, כמו שמתואר בקטע הזה. השינויים שתבצעו כאן ישתקפו בנסיעה הבאה של הנהג/ת.

בדף כללי המדיניות מפורטות הנחיות לגבי שינויים מותרים בממשק המשתמש של הניווט.

הצגת הקוד

שינוי כותרת הניווט

משתמשים ב-SupportNavigationFragment.setStylingOptions() או ב-NavigationView.setStylingOptions() כדי לשנות את העיצוב של כותרת הניווט ואת אינדיקטור הפנייה הבאה שמופיע מתחת לכותרת, אם הוא זמין.

ניתן להגדיר את המאפיינים הבאים:

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

הדוגמה הבאה מציגה איך להגדיר את אפשרויות הסגנון:

private SupportNavigationFragment mNavFragment;
mNavFragment = (SupportNavigationFragment) getFragmentManager()
  .findFragmentById(R.id.navigation_fragment);

// Set the styling options on the fragment.
mNavFragment.setStylingOptions(new StylingOptions()
  .primaryDayModeThemeColor(0xff1A237E)
  .secondaryDayModeThemeColor(0xff3F51B5)
  .primaryNightModeThemeColor(0xff212121)
  .secondaryNightModeThemeColor(0xff424242)
  .headerLargeManeuverIconColor(0xffffff00)
  .headerSmallManeuverIconColor(0xffffa500)
  .headerNextStepTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerNextStepTextColor(0xff00ff00)
  .headerNextStepTextSize(20f)
  .headerDistanceTypefacePath("/system/fonts/NotoSerif-Italic.ttf")
  .headerDistanceValueTextColor(0xff00ff00)
  .headerDistanceUnitsTextColor(0xff0000ff)
  .headerDistanceValueTextSize(20f)
  .headerDistanceUnitsTextSize(18f)
  .headerInstructionsTypefacePath("/system/fonts/NotoSerif-BoldItalic.ttf")
  .headerInstructionsTextColor(0xffffff00)
  .headerInstructionsFirstRowTextSize(24f)
  .headerInstructionsSecondRowTextSize(20f)
  .headerGuidanceRecommendedLaneColor(0xffffa500));

השבתה של שכבת התנועה

משתמשים ב-GoogleMap.setTrafficEnabled() כדי להפעיל או להשבית את שכבת תעבורת הנתונים במפה. ההגדרה הזו משפיעה על האינדיקציות של צפיפות התנועה שמוצגות במפה באופן כללי. עם זאת, היא לא משפיעה על אינדיקציות התנועה במסלול שמתווה הנהג.

private GoogleMap mMap;
// Get the map, and when the async call returns, setTrafficEnabled
// (callback will be on the UI thread)
mMap = mNavFragment.getMapAsync(navMap -> navMap.setTrafficEnabled(false));

הפעלת רמזורים ותמרורים

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

כברירת מחדל, רמזורים ותמרורים מושבתים ב-Navigation SDK. כדי להפעיל את התכונה הזו, צריך לבצע קריאה אל DisplayOptions לכל תכונה בנפרד.

DisplayOptions displayOptions =
  new DisplayOptions().showTrafficLights(true).showStopSigns(true);

הוספת סמנים בהתאמה אישית

ה-SDK לניווט עבור Android משתמש כעת בממשקי ה-API של מפות Google עבור סמנים. למידע נוסף, כדאי לעיין במשאבי העזרה של Maps API.

טקסט צף

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

הצגת המהירות המותרת

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

// Display the Speed Limit icon
mNavFragment.setSpeedLimitIconEnabled(true);

סמל מגבלת המהירות מוסתר באופן זמני כשמוצג הלחצן 'מרכז העזרה'.

הגדרת מצב לילה

אפשר לשלוט באופן פרוגרמטי בהתנהגות של מצב לילה. להשתמש ב-NavigationView.setForceNightMode() או ב-SupportNavigationFragment.setForceNightMode() כדי להפעיל או לכבות את מצב הלילה, או לאפשר ל-Navigation SDK ל-Android לשלוט בו.

  • AUTO מאפשר ל-SDK של הניווט לקבוע את המצב המתאים בהתאם למיקום המכשיר ולזמן המקומי.
  • FORCE_NIGHT מאלצת הפעלה של מצב לילה.
  • הפקודה FORCE_DAY מאלצת הפעלה של מצב יום.

בדוגמה הבאה אפשר לראות אילוץ הפעלה של מצב לילה בתוך קטע ניווט:

// Force night mode on.
mNavFragment.setForceNightMode(FORCE_NIGHT);

הצגת רשימת המסלול

קודם כל יוצרים את התצוגה ומוסיפים אותה להיררכיה.

void setupDirectionsListView() {
  // Create the view.
  DirectionsListView directionsListView = new DirectionsListView(getApplicationContext());
  // Add the view to your view hierarchy.
  ViewGroup group = findViewById(R.id.directions_view);
  group.addView(directionsListView);

  // Add a button to your layout to close the directions list view.
  ImageButton button = findViewById(R.id.close_directions_button); // this button is part of the container we hide in the next line.
  button.setOnClickListener(
      v -> findViewById(R.id.directions_view_container).setVisibility(View.GONE));
}

הקפידו להעביר ל-DirectionsListView אירועים של מחזור חיים בדיוק כמו שהם מעבירים ל-NavigationView. למשל:

protected void onResume() {
  super.onResume();
  directionsListView.onResume();
}

הסתרת מסלולים חלופיים

כשממשק המשתמש עמוס במידע רב מדי, אפשר להפחית את העומס על ידי הצגת פחות מסלולים חלופיים מברירת המחדל (שני מסלולים), או על ידי אי הצגת מסלולים חלופיים בכלל. אפשר להגדיר את האפשרות הזו לפני אחזור הנתיבים על ידי קריאה ל-method RoutingOptions.alternateRoutesStrategy() עם אחד מערכי המספור הבאים:

ערך המספורתיאור
AlternateRoutesStrategy.SHOW_ALL ברירת מחדל. הצגת עד שני מסלולים חלופיים.
AlternateRoutesStrategy.SHOW_ONE הצגת מסלול חלופי אחד (אם יש מסלול זמין).
AlternateRoutesStrategy.SHOW_NONE הסתרת מסלולים חלופיים.

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

RoutingOptions routingOptions = new RoutingOptions();
routingOptions.alternateRoutesStrategy(AlternateRoutesStrategy.SHOW_NONE);
navigator.setDestinations(destinations, routingOptions, displayOptions);

סרגל ההתקדמות בנסיעה

סרגל ההתקדמות בנסיעה נוסף לניווט.

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

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

סרגל ההתקדמות בנסיעה מציג את מחווני הסטטוס הבאים:

  • המסלול שחלף – פרק הזמן שחלף בנסיעה.

  • המיקום הנוכחי – המיקום הנוכחי של הנהג בנסיעה.

  • סטטוס תנועה – הסטטוס של תנועה עתידית.

  • יעד סופי – יעד הנסיעה הסופי.

מפעילים את סרגל ההתקדמות של הנסיעה על ידי קריאה ל-method setTripProgressBarEnabled() ב-NavigationView או ב-SupportNavigationFragment. למשל:

// Enable the trip progress bar.
mNavFragment.setTripProgressBarEnabled(true);