การควบคุมสื่อ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
หน้าจอตัวควบคุมสื่อมีความสำคัญอย่างยิ่งในการช่วยให้ผู้ใช้ควบคุมสื่อที่กำลังฟังอยู่ได้
สร้างตัวควบคุมสื่อโดยใช้เลย์เอาต์ 5 ปุ่มเพื่อยืนยัน
ว่าตรงตามเป้าหมายการแตะขั้นต่ำ ในหน้าจอขนาดใหญ่กว่า 225 dp ขึ้นไป
คุณสามารถเพิ่มคุณค่าได้โดยใส่ปุ่มทางลัดสำหรับการดำเนินการที่สำคัญ เช่น
คิวการเล่น
ส่วนเลย์เอาต์
หน้าจอการควบคุมสื่อเป็นหน้าจอที่มีความสูงคงที่ โดยประกอบด้วยส่วนแนวตั้ง 3 ส่วน
ซึ่งมีเลย์เอาต์และการทำงานที่ปรับเปลี่ยนตามพื้นที่โฆษณาที่แตกต่างกัน
- ส่วนบน: มีรายละเอียดสื่อ
- ส่วนกลาง: ตัวควบคุมสื่อ
- ส่วนล่าง: ปุ่มรองที่กำหนดค่าได้
ข้อควรพิจารณาสำหรับหน้าจอขนาดใหญ่
การดัดแปลงสำหรับหน้าจอขนาดใหญ่สำหรับสื่อจะเน้นเฉพาะหน้าจอตัวควบคุมสื่อ
องค์ประกอบอื่นๆ ทั้งหมดจะอยู่ในรายการชิป ปุ่ม และกล่องโต้ตอบ หรืออยู่ใน
รายละเอียดรายการของลักษณะการทำงานของหน้าจอขนาดใหญ่
คุณเพิ่มคุณค่าได้โดยใส่ปุ่มทางลัดสำหรับการดำเนินการที่สำคัญ เช่น คิวการเล่น การใช้เมนูแบบล้นจะช่วยยืนยันว่าฟังก์ชันเพิ่มเติมยังคงสอดคล้องกันและเข้าถึงได้ไม่ว่าหน้าจอจะมีขนาดเท่าใด
ส่วนด้านล่างจะมีช่องสำหรับปุ่มเพิ่มอีก 1 ช่องหลังจากจุดพักที่ 225 dp
ทำให้จำนวนปุ่มสูงสุดเป็น 2 ปุ่มในหน้าจอขนาดเล็กและ 3 ปุ่มใน
หน้าจอขนาดใหญ่
การควบคุมหลัก
โดยปกติแล้วตัวควบคุมหลักจะเป็นปุ่มเล่นและหยุดชั่วคราว หลังจากเบรกพอยต์ 225 dp
การควบคุมจะปรับขนาดจาก 64dp เป็น 80dp ซึ่งจะเพิ่มเป้าหมายการแตะ
สำหรับการควบคุมทั้งหมดภายใน
หน้าจอขนาดเล็ก (เล็กกว่า 225 dp)
- วงกลมแสดงความคืบหน้า = 64 x 64 dp / 3 dp stroke
- ปุ่ม = 54 x 54 dp / ขนาดไอคอน 26
หน้าจอขนาดใหญ่ (225 dp ขึ้นไป)
- วงกลมแสดงความคืบหน้า = 80 x 80 dp / เส้นขีด 4 dp
- ปุ่ม = 70 x 70 dp / ขนาดไอคอน 32
หากต้องการปฏิบัติตามหลักการขนาดเป้าหมายการสัมผัส ให้แสดงเฉพาะเลย์เอาต์ 2 ปุ่มก่อน
เบรกพอยต์ 225 dp และเลย์เอาต์ 3 ปุ่มหลังจากนั้น
ตัวอย่างต่อไปนี้แสดงการกำหนดค่าปุ่มต่างๆ
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
เลย์เอาต์ 1 ปุ่มที่มีรายการเพิ่มเติม หน้าจอขนาดเล็ก (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72.5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
เลย์เอาต์ 1 ปุ่มที่มีรายการเพิ่มเติม หน้าจอขนาดใหญ่ (225 dp)
เลย์เอาต์ 2 ปุ่มที่มีการล้นบนหน้าจอขนาดเล็ก (192 dp)
เลย์เอาต์ 2 ปุ่มที่มีการล้น หน้าจอขนาดใหญ่ (225 dp)
เลย์เอาต์ 2 ปุ่ม (สูงสุด) ที่มีรายการล้น หน้าจอขนาดเล็ก (192 dp)
เลย์เอาต์ 3 ปุ่มที่มีเมนูแบบล้น หน้าจอขนาดใหญ่ (225 dp)
ลักษณะการทำงานของมาร์คี
ส่วนหัวได้รับการอัปเดตหลายอย่างเพื่อปรับปรุงความสามารถในการอ่านและประสบการณ์การใช้งานโดยทั่วไป ดังนี้
- ขอบด้านบน 12% ในหน้าจอขนาดเล็กและ 13.2% ในหน้าจอขนาดใหญ่
- ระยะขอบด้านข้างสำหรับชื่อเพลง 17.6%
- ขอบชื่อศิลปิน 12.5% ในหน้าจอขนาดเล็กและ 14.5% ในหน้าจอขนาดใหญ่
- ชื่อศิลปินจะถูกตัดทอน และใช้การไล่ระดับสี 8 dp สำหรับชื่อเพลงที่เลื่อนได้
หากมีไอคอน ระบบจะเว้นช่องว่างเพิ่มเติม 8 dp เพื่อคั่นชื่อเพลง
กับไอคอน (ไอคอนจะไม่เลื่อนไปพร้อมกับชื่อเพลง)
มีไอคอน
ชื่อเพลงแบบไม่เลื่อน (สั้น) ในหน้าจอขนาดเล็ก (192 dp)
ชื่อเพลงแบบไม่เลื่อน (สั้น) บนหน้าจอขนาดใหญ่ (225 dp)
ชื่อเพลงแบบเลื่อน (ยาว) (จัดชิดซ้าย) บนหน้าจอขนาดเล็ก (192 dp)
เลื่อนชื่อเพลง (ยาว) (จัดชิดซ้าย) บนหน้าจอขนาดใหญ่ (225 dp)
ชื่อเพลงแบบเลื่อน (ยาว) (จัดกึ่งกลาง) บนหน้าจอขนาดเล็ก (192 dp)
เลื่อนชื่อเพลง (ยาว) (จัดกึ่งกลาง) บนหน้าจอขนาดใหญ่ขึ้น (225 dp)
ไม่มีไอคอน
ชื่อเพลงแบบไม่เลื่อน (สั้น) ในหน้าจอขนาดเล็ก (192 dp)
ชื่อเพลงแบบไม่เลื่อน (สั้น) บนหน้าจอขนาดใหญ่ (225 dp)
ชื่อเพลง (ยาว) จัดชิดซ้าย / ไม่เลื่อนบนหน้าจอขนาดเล็ก (192 dp)
ชื่อเพลง (ยาว) จัดชิดซ้าย / ไม่เลื่อนบนหน้าจอขนาดใหญ่ (225 dp)
ชื่อเพลงแบบเลื่อน (ยาว) (จัดกึ่งกลาง) บนหน้าจอขนาดเล็ก (192 dp)
เลื่อนชื่อเพลง (ยาว) (จัดกึ่งกลาง) บนหน้าจอขนาดใหญ่ขึ้น (225 dp)
เป้าหมายการแตะ
ตัวควบคุมหลักและปุ่มด้านล่างใช้พื้นที่ที่มีอยู่เพื่อเพิ่มเป้าหมายการแตะให้ได้มากที่สุด
ขนาดเป้าหมายการแตะขั้นต่ำคือ 48 x 48 dp ในอุปกรณ์ Wear OS โดยมี
ไอคอนและปุ่มที่จัดแนวไว้ตรงกลางเป้าหมายการแตะ
การควบคุมหลัก
หน้าจอขนาดเล็ก (192dp):
- การควบคุมหลัก = 64 x 64 dp
- การควบคุมด้านข้าง = 64 x 64 dp
หน้าจอขนาดใหญ่ (225dp):
- การควบคุมหลัก = 80 x 80 dp
- การควบคุมด้านข้าง = 72.5 x 80 dp
การควบคุมด้านล่าง
หน้าจอขนาดเล็ก (192 dp) ที่มีปุ่มได้สูงสุด 2 ปุ่ม
ทั้ง 2 ปุ่ม = 68 x 60 dp
หน้าจอขนาดใหญ่ (225 dp) ที่มีปุ่มสูงสุด 3 ปุ่ม
ปุ่มทั้งหมด = 58 x 72.5 dp
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
