เลือกแพลตฟอร์ม: Android iOS JavaScript

การจัดรูปแบบที่กำหนดเอง

ตัวอย่างการปรับแต่งภาพ

คุณปรับแต่งสี การพิมพ์ ระยะห่าง เส้นขอบ และมุมของคอมโพเนนต์ UI Kit ของ Places ต่อไปนี้ได้

• คอมโพเนนต์รายละเอียดสถานที่
• คอมโพเนนต์การค้นหาสถานที่
• คอมโพเนนต์ Place Autocomplete พื้นฐาน
• วิดเจ็ต Place Autocomplete ของชุดเครื่องมือที่ไม่ใช่ UI

ชุดเครื่องมือ UI ของ Places มีแนวทางระบบการออกแบบสำหรับการปรับแต่งภาพโดยอิงตาม Material Design โดยประมาณ (มีการแก้ไขบางอย่างที่เฉพาะเจาะจงสำหรับ Google Maps) ดูข้อมูลอ้างอิงของ Material Design สำหรับสีและการพิมพ์ โดยค่าเริ่มต้น สไตล์จะเป็นไปตามภาษาการออกแบบภาพของ Google Maps

สำคัญ: เมื่อทำการแก้ไขภาพ คุณต้องปฏิบัติตามข้อกำหนดการระบุแหล่งที่มาของ Google Maps

เมื่อสร้างอินสแตนซ์ของ Fragment คุณจะระบุธีมที่ลบล้างแอตทริบิวต์รูปแบบเริ่มต้นได้ แอตทริบิวต์ธีมที่ไม่ได้ลบล้างจะใช้รูปแบบเริ่มต้น

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

สำคัญ: Places UI Kit มีธีมมืดให้โดยค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการสร้างธีมมืด ให้เพิ่มรายการสำหรับสีใน values-night/colors.xml

คุณปรับแต่งสไตล์ต่อไปนี้ได้

แอตทริบิวต์ธีม	การใช้งาน
สี
placesColorSurface	พื้นหลังของคอนเทนเนอร์และกล่องโต้ตอบ
placesColorOutlineDecorative	เส้นขอบคอนเทนเนอร์
placesColorPrimary	ลิงก์ สัญญาณบอกสถานะการโหลด ไอคอนภาพรวม
placesColorOnSurface	ส่วนหัว เนื้อหาของกล่องโต้ตอบ
placesColorOnSurfaceVariant	ข้อมูลสถานที่
placesColorSecondaryContainer	พื้นหลังของปุ่ม
placesColorOnSecondaryContainer	ข้อความและไอคอนของปุ่ม
placesColorNeutralContainer	ป้ายวันที่รีวิว รูปร่างตัวยึดตำแหน่งการโหลด
placesColorOnNeutralContainer	วันที่ตรวจสอบ ข้อผิดพลาดในการโหลด
placesColorPositiveContainer	ป้ายที่ชาร์จ EV ที่พร้อมให้บริการ
placesColorOnPositiveContainer	เนื้อหาป้ายที่ชาร์จ EV ที่พร้อมใช้งาน
placesColorPositive	ป้ายกำกับ "เปิด" ของสถานที่
placesColorNegative	ป้ายกำกับ "ปิด" ของสถานที่
placesColorInfo	ไอคอนทางเข้าที่รองรับเก้าอี้รถเข็น
placesColorButtonBorder	ปุ่มเปิดใน Maps และปุ่มตกลง
การออกแบบตัวอักษร
placesTextAppearanceBodySmall	ข้อมูลสถานที่
placesTextAppearanceBodyMedium	ข้อมูลสถานที่ เนื้อหาของกล่องโต้ตอบ
placesTextAppearanceLabelMedium	เนื้อหาป้าย
placesTextAppearanceLabelLarge	เนื้อหาปุ่ม
placesTextAppearanceHeadlineMedium	ส่วนหัวของกล่องโต้ตอบ
placesTextAppearanceDisplaySmall	ชื่อสถานที่
placesTextAppearanceTitleSmall	ชื่อสถานที่
การเว้นวรรค
placesSpacingExtraSmall
placesSpacingSmall
placesSpacingMedium
placesSpacingLarge
placesSpacingExtraLarge
placesSpacingTwoExtraLarge
การวัดผล
placesBorderWidth	คอนเทนเนอร์
placesBorderWidthButton
รูปร่าง
placesCornerRadius	คอนเทนเนอร์
placesCornerRadiusButton	ปุ่มเปิดใน Maps และปุ่มตกลง (ไม่รวมปุ่มไอคอนกลม)
placesCornerRadiusThumbnail	รูปภาพขนาดย่อของสถานที่
placesCornerRadiusCollageOuter	ภาพคอลลาจ
placesCornerRadiusCard	การ์ดสถานที่ การ์ดรีวิวจากผู้ใช้
placesCornerRadiusDialog	กล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
การระบุแหล่งที่มาของแบรนด์ Google Maps
placesColorAttributionLightTheme	ปุ่มการระบุแหล่งที่มาและการเปิดเผยข้อมูลของ Google Maps ในธีมสว่าง (Enums สำหรับสีขาว สีเทา และสีดำ)
placesColorAttributionDarkTheme	ปุ่มการระบุแหล่งที่มาและการเปิดเผยข้อมูลของ Google Maps ในธีมมืด (การแจงนับสำหรับสีขาว สีเทา และสีดำ)

สีการระบุแหล่งที่มา

การระบุแหล่งที่มา

ข้อกำหนดในการให้บริการของ Google Maps กำหนดให้คุณต้องใช้สีแบรนด์สีใดสีหนึ่งจาก 3 สีสำหรับการระบุแหล่งที่มาของ Google Maps การระบุแหล่งที่มานี้ต้องมองเห็นได้และเข้าถึงได้เมื่อมีการเปลี่ยนแปลงการปรับแต่ง

เรามีสีแบรนด์ 3 สีให้เลือก ซึ่งตั้งค่าแยกกันสำหรับธีมสว่างและธีมมืดได้

• ธีมสว่าง: placesColorAttributionLight ที่มีค่า enum สำหรับสีขาว เทา และดำ
• ธีมมืด: placesColorAttributionDark มีค่า enum สำหรับสีขาว เทา และดำ

ตัวอย่าง

ตัวอย่างโค้ดนี้แสดงวิธีสร้างธีมที่ลบล้างแอตทริบิวต์รูปแบบเริ่มต้น แอตทริบิวต์ธีมที่ไม่ได้ลบล้างจะใช้รูปแบบเริ่มต้น

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

ตัวอย่างทั้งหมดของแต่ละคอมโพเนนต์

• ตัวอย่างการจัดรูปแบบคอมโพเนนต์รายละเอียดสถานที่
• ตัวอย่างการจัดรูปแบบคอมโพเนนต์การค้นหาสถานที่
• ตัวอย่างการจัดรูปแบบคอมโพเนนต์ Place Autocomplete พื้นฐาน