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

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

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

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

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

setCustomControl אמצעי תשלום מספקת מיקומים כפי שמוגדר בCustomControlPosition enum:

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

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

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

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

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

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

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

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

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

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

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

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

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

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

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

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

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

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

כברירת מחדל, רמזורים ותמרורי עצירה מושבתים 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 מאפשר ל-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();
}

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

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