ปรับแต่งอินเทอร์เฟซผู้ใช้ของการนำทาง

คุณสามารถปรับแต่งองค์ประกอบของอินเทอร์เฟซผู้ใช้การนำทางและแผนที่ รวมถึงเพิ่มตัวทำเครื่องหมายที่กำหนดเองลงในแผนที่ได้ โปรดดูที่หน้านโยบายเพื่อดูหลักเกณฑ์เกี่ยวกับการแก้ไขที่ยอมรับได้ใน UI ของการนำทาง

ดูรหัส

ปรับแต่งส่วนหัวของการนำทาง

ใช้ NavigationFragment.setStylingOptions() หรือ NavigationView.setStylingOptions() เพื่อเปลี่ยนธีมของส่วนหัวการนำทางและสัญญาณบอกสถานะสำหรับเลี้ยวถัดไปซึ่งปรากฏใต้ส่วนหัว หากมี

คุณตั้งค่าแอตทริบิวต์ต่อไปนี้ได้

ประเภทแอตทริบิวต์Attributes
สีพื้นหลัง
  • โหมดวันหลัก - สีเวลากลางวันของส่วนหัวของการนำทาง
  • โหมดวันรอง - สีเวลากลางวันของสัญญาณบอกสถานะเลี้ยวถัดไป
  • โหมดกลางคืนหลัก - สีเวลากลางคืนของส่วนหัวของการนำทาง
  • โหมดกลางคืนรอง - สีเวลากลางคืนของสัญญาณบอกสถานะเลี้ยวถัดไป
องค์ประกอบของข้อความสำหรับวิธีการ
  • สีของข้อความ
  • แบบอักษร
  • ขนาดข้อความของแถวแรก
  • ขนาดข้อความของแถวที่ 2
องค์ประกอบของข้อความสำหรับขั้นตอนถัดไป
  • แบบอักษร
  • สีข้อความของค่าระยะทาง
  • ขนาดข้อความของค่าระยะทาง
  • สีข้อความของหน่วยระยะทาง
  • ขนาดข้อความของหน่วยระยะทาง
ไอคอนบังคับทิศทาง
  • สีของไอคอนเคลื่อนที่ขนาดใหญ่
  • สีของไอคอนเครื่องมือสลับขนาดเล็ก
คำแนะนำช่องทาง
  • สีของช่องทางที่แนะนำ

ตัวอย่างต่อไปนี้จะแสดงวิธีตั้งค่าตัวเลือกการจัดรูปแบบ

private NavigationFragment mNavFragment;
mNavFragment = (NavigationFragment) 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));

ปิดเลเยอร์การจราจร

ใช้ NavigationMap.setTrafficEnabled() เพื่อเปิดหรือปิดเลเยอร์การจราจรบนแผนที่ การตั้งค่านี้ส่งผลต่อตัวบ่งชี้ความหนาแน่นของการจราจรที่จะแสดงบนแผนที่โดยรวม แต่จะไม่ส่งผลต่อตัวบ่งชี้การจราจรบนเส้นทางที่แสดงโดยตัวนำทาง

private NavigationMap mMap;
// Get the map.
mMap = mNavFragment.getMap();
// Turn off the traffic layer on the map.
mMap.setTrafficEnabled(false);

เพิ่มเครื่องหมายที่กำหนดเอง

คุณสามารถเพิ่มเครื่องหมายที่กำหนดเองลงในแผนที่ เพื่อระบุจุดสนใจสำหรับแอปพลิเคชันหรือผู้ใช้ ตัวอย่างเช่น คุณอาจต้องการระบุจุดรับสินค้าที่จุดสิ้นสุดเส้นทาง ใช้ NavigationMap.addMarker() เพื่อเพิ่มเครื่องหมายและ NavigationMap.setOnMarkerClickListener() เพื่อฟังการแตะที่เครื่องหมาย

โค้ดด้านล่างใช้ไอคอนที่จัดเก็บไว้ในทรัพยากรที่วาดได้ของโปรเจ็กต์ R.drawable.ic_person_pin_48dp คุณสามารถใช้รูปภาพใดก็ได้ ที่เหมาะสมกับแอป

// Place a marker at the final destination.
if (mNavigator.getCurrentRouteSegment() != null) {
    LatLng destinationLatLng = mNavigator.getCurrentRouteSegment()
        .getDestinationLatLng();

    Bitmap destinationMarkerIcon = BitmapFactory.decodeResource(
            getResources(), R.drawable.ic_person_pin_48dp);

    mMap.addMarker(new MarkerOptions()
            .position(destinationLatLng)
            .icon(destinationMarkerIcon)
            .title("Destination marker"));

    // Listen for a tap on the marker.
    mMap.setOnMarkerClickListener(new NavigationMap.OnMarkerClickListener() {
        @Override
        public void onMarkerClick(Marker marker) {
            displayMessage("Marker tapped: "
                    + marker.getTitle() + ", at location "
                    + marker.getPosition().latitude + ", "
                    + marker.getPosition().longitude);
        }
    });
}

คุณระบุรูปภาพที่กำหนดเองเป็นเครื่องหมายได้ แต่ขณะนี้ SDK ยังไม่รองรับการติดป้ายกำกับรูปภาพเหล่านี้ด้วยข้อความ ดูข้อมูลเพิ่มเติมได้ที่การปรับแต่งเครื่องหมาย

ข้อความแบบลอย

คุณสามารถเพิ่มข้อความแบบลอยที่ตำแหน่งใดก็ได้ในแอปตราบใดที่ไม่ครอบคลุมการระบุแหล่งที่มาของ Google การนำทาง SDK ไม่รองรับการตรึงข้อความกับละติจูด/ลองจิจูดบนแผนที่หรือกับป้ายกำกับ ดูข้อมูลเพิ่มเติมได้ในหน้าต่างข้อมูล

แสดงขีดจำกัดความเร็ว

คุณแสดงหรือซ่อนไอคอนการจำกัดความเร็วได้แบบเป็นโปรแกรม ใช้ NavigationFragment.setSpeedLimitIconEnabled(), NavigationView.setSpeedLimitIconEnabled() หรือ SupportNavigationFragment.setSpeedLimitIconEnabled() เพื่อแสดงหรือซ่อนไอคอนขีดจำกัดความเร็ว เมื่อเปิดใช้ ไอคอนการจำกัดความเร็ว จะแสดงที่มุมด้านล่างในระหว่างการนำทาง ไอคอนแสดงขีดจำกัดความเร็วของถนนที่รถวิ่งอยู่ ไอคอนนี้จะปรากฏในตำแหน่งที่มีข้อมูลขีดจำกัดความเร็วที่เชื่อถือได้เท่านั้น

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

ไอคอนจำกัดความเร็วจะซ่อนไว้ชั่วคราวเมื่อปุ่มจัดกึ่งกลางใหม่ปรากฏขึ้น

ตั้งค่าโหมดกลางคืน

คุณควบคุมการทำงานของโหมดกลางคืนได้โดยใช้โปรแกรม ใช้ NavigationFragment.setForceNightMode(), NavigationView.setForceNightMode() หรือ SupportNavigationFragment.setForceNightMode() เพื่อเปิดหรือปิดโหมดกลางคืน หรือให้ Navigation SDK ควบคุม

  • AUTO ให้ SDK การนำทางกำหนดโหมดที่เหมาะสมตามตำแหน่งของอุปกรณ์และเวลาท้องถิ่น
  • FORCE_NIGHT บังคับให้เปิดโหมดกลางคืน
  • FORCE_DAY บังคับให้เปิดโหมดวัน

ตัวอย่างต่อไปนี้แสดงการบังคับให้เปิดโหมดกลางคืนภายในส่วนการนำทาง

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

แสดงรายการเส้นทาง

ขั้นแรก ให้สร้างข้อมูลพร็อพเพอร์ตี้และเพิ่มลงในลำดับชั้น

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 เช่นเดียวกับ NaviagtionView เช่น

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

ซ่อนเส้นทางอื่น

เมื่ออินเทอร์เฟซผู้ใช้เต็มไปด้วยข้อมูลมากเกินไป คุณสามารถลดความยุ่งเหยิงได้โดยการแสดงเส้นทางอื่นให้น้อยกว่าค่าเริ่มต้น (2 เส้นทาง) หรือไม่แสดงเส้นทางอื่นเลย คุณกำหนดค่าตัวเลือกนี้ได้ก่อนที่จะดึงข้อมูลเส้นทางด้วยการเรียกใช้เมธอด RoutingOptions.alternateRoutesStrategy() ด้วยค่าการแจกแจงค่าใดค่าหนึ่งต่อไปนี้

ค่าการแจงนับคำอธิบาย
AlternateRoutesStrategy.SHOW_ALL ค่าเริ่มต้น แสดงเส้นทางเลือกได้สูงสุด 2 เส้นทาง
AlternateRoutesStrategy.SHOW_ONE แสดงเส้นทางสำรอง 1 เส้นทาง (ถ้ามี)
AlternateRoutesStrategy.SHOW_NONE ซ่อนเส้นทางอื่น

ตัวอย่าง

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีซ่อนเส้นทางอื่นโดยสิ้นเชิง

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