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

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

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

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

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

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

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

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

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

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

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

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

  1. יוצרים Android View עם הרכיב המותאם אישית של ממשק המשתמש או עם 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. קוראים ל-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);

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

ערכת הניווט 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 לסמנים. מידע נוסף זמין במסמכים בנושא 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() עם אחד מערכי המספור הבאים:

ערך המספורתיאור
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);