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

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

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

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

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

ה-method‏ setCustomControl מספק את המיקומים כפי שמוגדרים ב-CustomControlPosition enum:

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

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

מיקומי פקדים בהתאמה אישית

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

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

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

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

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

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

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

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

כדי להסיר את התצוגה, מגדירים אותה כ-null.

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

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

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

  1. יוצרים תצוגת Android עם הרכיב בממשק המשתמש או עם קבוצת התצוגה המפורטת שרוצים להוסיף.
  2. יוצרים את תצוגת הניווט או את הפלח.
  3. קוראים ל-method‏ 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);

הסרת אמצעי בקרה מותאם אישית

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

מגדירים את התצוגה כ-null עבור המיקום הזה.

mNavFragment.setCustomControl(null, CustomControlPosition.BOTTOM_END_BELOW);

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

‏Navigation SDK for 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 לסמנים. מידע נוסף זמין במסמכים בנושא API של מפות Google.

טקסט צף

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

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

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

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

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

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

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

  • AUTO מאפשרת ל-Navigation 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() עם אחד מערכי המנייה הבאים:

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

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

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

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

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

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

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

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

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

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

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

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

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

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