แก้ไข UI การนําทาง

เมื่อใช้ Navigation SDK สำหรับ Android คุณจะสามารถแก้ไขประสบการณ์ของผู้ใช้ด้วย แผนที่ของคุณได้โดยกำหนดการควบคุมและองค์ประกอบ UI ในตัวที่ปรากฏ แผนที่ นอกจากนี้ คุณยังปรับลักษณะที่ปรากฏของ UI การนำทางได้อีกด้วย แนะนำ ไปยังหน้านโยบายสำหรับ หลักเกณฑ์เกี่ยวกับการแก้ไขที่ยอมรับได้ใน UI การนำทาง

เอกสารนี้อธิบายวิธีการแก้ไขอินเทอร์เฟซผู้ใช้ของแผนที่ได้ 2 วิธี ดังนี้

ตัวควบคุม UI ของแผนที่

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

setCustomControl วิธีการ ให้ตำแหน่งตามที่ระบุไว้ใน CustomControlPosition enum:

  • SECONDARY_HEADER (ปรากฏในโหมดแนวตั้งเท่านั้น)
  • BOTTOM_START_BELOW
  • BOTTOM_END_BELOW

เช่น รูปภาพด้านล่างแสดงตัวอย่างตำแหน่งต่างๆ ของตัวควบคุม UI ที่แจ้งตำแหน่งของผู้ขับขี่รถโดยสารร่วมกันระหว่างการรับรถ

การควบคุมที่กำหนดเอง
ตำแหน่ง

เพิ่มส่วนหัวรองที่กำหนดเอง

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

ตำแหน่งส่วนหัวรองที่กำหนดเองปรับแนวขอบด้านบนให้ตรงกับขอบด้านล่างของ ส่วนหัวหลัก รองรับตำแหน่งนี้เฉพาะใน portrait mode ใน landscape mode ส่วนหัวรองไม่พร้อมใช้งานและเลย์เอาต์ไม่มี เปลี่ยน

  1. สร้างมุมมอง Android ที่มีเอลิเมนต์ UI ที่กำหนดเองหรือ ViewGroup
  2. ขยาย XML ให้สูงเกินจริง หรือสร้างอินสแตนซ์มุมมองที่กำหนดเองเพื่อรับอินสแตนซ์ของ เพื่อเพิ่มเป็นส่วนหัวรอง
  3. ใช้ NavigationView.setCustomControl หรือ SupportNavigationFragment.setCustomControl ที่มี CustomControlPosition เป็น SECONDARY_HEADER

    ตัวอย่างด้านล่างสร้างส่วนย่อยและเพิ่มการควบคุมที่กำหนดเองในส่วน ตำแหน่งส่วนหัวรอง

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

นำส่วนหัวรองออก

หากต้องการนำส่วนหัวรองออกและกลับไปยังเนื้อหาเริ่มต้น ให้ใช้เมธอด setCustomControl วิธี

ตั้งค่ามุมมองเป็น null เพื่อนำมุมมองออก

mNavFragment.setCustomControl(null, CustomControlPosition.SECONDARY_HEADER);

เพิ่มการควบคุมที่กำหนดเองไว้ที่ด้านล่างของมุมมองการนำทาง

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

  1. สร้างมุมมอง Android ที่มีเอลิเมนต์ UI หรือกลุ่มมุมมองที่ต้องการเพิ่ม
  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);

อุปกรณ์เสริม UI แผนที่

Navigation SDK สำหรับ Android มีอุปกรณ์เสริม UI ที่ปรากฏระหว่าง การนำทางที่คล้ายกับการนำทางใน Google แผนที่สำหรับแอปพลิเคชัน Android คุณปรับระดับการมองเห็นหรือลักษณะการมองเห็นของตัวควบคุมเหล่านี้ได้ตาม ที่อธิบายไว้ในส่วนนี้ การเปลี่ยนแปลงที่คุณทำที่นี่จะแสดงในระหว่าง เซสชันการนำทาง

โปรดดูที่นโยบาย หน้าเพื่อดูแนวทางเกี่ยวกับ การแก้ไข UI การนำทางที่ยอมรับได้

ดูโค้ด

แก้ไขส่วนหัวของการนำทาง

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

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

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

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

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));

เปิดใช้ไฟจราจรและป้ายหยุด

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

โดยค่าเริ่มต้น ไฟจราจรและป้ายหยุดจะปิดอยู่ใน SDK การนำทาง หากต้องการเปิดใช้ฟีเจอร์นี้ ให้โทร DisplayOptions สำหรับแต่ละฟีเจอร์แยกกัน

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

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

ขณะนี้ Navigation SDK สำหรับ Android ใช้ Google Maps API สำหรับเครื่องหมาย ไปที่หน้า เอกสารประกอบ Maps API เพื่อดูข้อมูลเพิ่มเติม

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

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

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

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

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

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

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

คุณจะควบคุมลักษณะการทำงานของโหมดกลางคืนแบบเป็นโปรแกรมได้ ใช้ NavigationView.setForceNightMode() หรือ SupportNavigationFragment.setForceNightMode() เพื่อเปิดหรือปิดโหมดกลางคืน หรือให้การนำทาง 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();
}

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

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

ค่าการแจงนับคำอธิบาย
AlternateRoutesStrategy.SHOW_ALL ค่าเริ่มต้น แสดงเส้นทางเลือกได้สูงสุด 2 เส้นทาง
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);