จัดการรูปร่างต่างๆ ของนาฬิกา
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ลองใช้วิธีเขียน
Jetpack Compose ใน Wear OS เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Wear OS
แอปใน Wear OS ใช้เทคนิคการจัดวางเดียวกับอุปกรณ์ Android เครื่องอื่นๆ แต่ต้องออกแบบโดยคำนึงถึงข้อจำกัดเฉพาะของนาฬิกา
หมายเหตุ: อย่าพอร์ตฟังก์ชันการทำงานและ UI จากแอปบนอุปกรณ์เคลื่อนที่ไปยัง Wear OS โดยคาดหวังว่าผู้ใช้จะได้รับประสบการณ์การใช้งานที่ดี
หากคุณออกแบบแอปสำหรับอุปกรณ์มือถือสี่เหลี่ยมผืนผ้า เนื้อหาที่อยู่ใกล้มุมของหน้าจออาจถูกครอบตัดในนาฬิกาทรงกลม หากคุณใช้รายการแนวตั้งที่เลื่อนได้ ปัญหานี้จะไม่ค่อยเกิดขึ้น เนื่องจากผู้ใช้สามารถเลื่อนเนื้อหาให้อยู่ตรงกลางได้ แต่สำหรับหน้าจอเดียว การใช้งานแบบนั้นอาจทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี
หากคุณใช้การตั้งค่าต่อไปนี้สำหรับเลย์เอาต์ ข้อความจะแสดงไม่ถูกต้องในอุปกรณ์ที่มีหน้าจอกลม
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="@string/very_long_hello_world"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
วิธีแก้ปัญหานี้คือใช้เลย์เอาต์ใน
ไลบรารี UI ของ Wear OS ที่รองรับอุปกรณ์ทรงกลม
- คุณสามารถใช้
BoxInsetLayout เพื่อไม่ให้ระบบครอบตัดมุมมองบริเวณขอบของหน้าจอกลม
- คุณสามารถใช้
WearableRecyclerView เพื่อสร้างเลย์เอาต์โค้งเมื่อต้องการแสดงและจัดการรายการแนวตั้งที่ปรับให้เหมาะกับหน้าจอกลม
อ่านข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบแอปได้ที่หลักเกณฑ์การออกแบบ Wear OS
ใช้ BoxInsetLayout
รูปที่ 2 ส่วนที่ยื่นออกมาของหน้าต่างบนหน้าจอกลม
คลาส
BoxInsetLayout ในไลบรารี UI ของ Wear OS ช่วยให้คุณกำหนดเลย์เอาต์ที่เหมาะกับหน้าจอกลม คลาสนี้ช่วยให้คุณจัดแนวมุมมองที่กึ่งกลางหรือใกล้กับขอบของหน้าจอได้อย่างง่ายดาย
สี่เหลี่ยมจัตุรัสสีเทาในรูปที่ 2 แสดงพื้นที่ที่ BoxInsetLayout สามารถวางมุมมองย่อยบนหน้าจอกลมโดยอัตโนมัติหลังจากใช้การฝังหน้าต่างที่จำเป็น หากต้องการแสดงภายในพื้นที่นี้ มุมมองย่อยต้องระบุแอตทริบิวต์ layout_boxedEdges ด้วยค่าต่อไปนี้
- อิโมจิจากการผสม
top, bottom,
left และ right เช่น ค่า "left|top" จะวางตำแหน่งขอบด้านซ้ายและด้านบนขององค์ประกอบย่อยภายในสี่เหลี่ยมจัตุรัสสีเทาในรูปที่ 2
- ค่า
"all" จะจัดวางเนื้อหาทั้งหมดของผู้เผยแพร่โฆษณาย่อยภายในสี่เหลี่ยมจัตุรัสสีเทาในรูปที่ 2 นี่เป็นแนวทางที่พบบ่อยที่สุดโดยมี ConstraintLayout อยู่ภายใน
เลย์เอาต์ที่แสดงในรูปที่ 2 ใช้องค์ประกอบ <BoxInsetLayout>
และใช้งานได้บนหน้าจอกลม
<androidx.wear.widget.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="15dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
app:layout_boxedEdges="all">
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="@string/sometext"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:background="@android:color/transparent"
android:layout_height="50dp"
android:layout_width="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:src="@drawable/cancel" />
<ImageButton
android:background="@android:color/transparent"
android:layout_height="50dp"
android:layout_width="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="@drawable/ok" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.wear.widget.BoxInsetLayout>
โปรดสังเกตส่วนต่างๆ ของเลย์เอาต์ที่ไฮไลต์เป็นตัวหนา
-
android:padding="15dp"
บรรทัดนี้จะกําหนดระยะห่างจากขอบให้กับองค์ประกอบ <BoxInsetLayout>
-
android:padding="5dp"
บรรทัดนี้กําหนดระยะห่างจากขอบให้กับองค์ประกอบ ConstraintLayout ภายใน
-
app:layout_boxedEdges="all"
บรรทัดนี้ช่วยให้มั่นใจว่าองค์ประกอบ ConstraintLayout และองค์ประกอบย่อยจะอยู่ในกล่องภายในพื้นที่ที่กําหนดโดยส่วนแทรกของหน้าต่างบนหน้าจอกลม
ใช้เลย์เอาต์แบบโค้ง
คลาส
WearableRecyclerView ในไลบรารี UI ของ Wear OS ช่วยให้คุณเลือกใช้เลย์เอาต์แบบโค้งที่เพิ่มประสิทธิภาพให้เหมาะกับหน้าจอกลม
หากต้องการเปิดใช้เลย์เอาต์โค้งสำหรับรายการที่เลื่อนได้ในแอป โปรดดูหัวข้อ
สร้างรายการใน Wear OS
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 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-26 UTC"],[],[],null,["# Handle different watch shapes\n\nTry the Compose way \nJetpack Compose on Wear OS is the recommended UI toolkit for Wear OS. \n[Try Compose on Wear OS →](/training/wearables/compose) \n\n\nApps on Wear OS use the same layout techniques as other Android devices\nbut need to be designed with watch-specific constraints.\n\n\n**Note:** Don't port the exact functionality and UI from a mobile app to Wear OS and expect\na good user experience.\n\n\nIf you design your app for a rectangular handheld device, content near the corners of the screen\nmight be cropped on round watches. If you are using a scrollable vertical list, this is less of\nan issue, as the user can scroll to center the content. However, for single screens, it can\nprovide a bad user experience.\n\n\nIf you use the following settings for your layout, text displays incorrectly on devices\nwith round screens: \n\n```xml\n\u003candroidx.constraintlayout.widget.ConstraintLayout\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n xmlns:tools=\"http://schemas.android.com/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\u003e\n\n \u003cTextView\n android:id=\"@+id/text\"\n android:layout_width=\"0dp\"\n android:layout_height=\"0dp\"\n android:text=\"@string/very_long_hello_world\"\n app:layout_constraintBottom_toBottomOf=\"parent\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toTopOf=\"parent\" /\u003e\n\n\u003c/androidx.constraintlayout.widget.ConstraintLayout\u003e\n```\n\n\nTo solve this problem, use layouts in the [Wear OS UI Library](/training/wearables/views) that support round devices.\n\n- You can use a [`BoxInsetLayout`](/reference/androidx/wear/widget/BoxInsetLayout) to prevent views from being cropped near the edges of round screens.\n- You can use a [WearableRecyclerView](/reference/androidx/wear/widget/WearableRecyclerView) to create a curved layout when you want to display and manipulate a vertical list of items optimized for round screens.\n\n\nFor more information about designing apps, read the\n[Wear OS design guidelines](/training/wearables/design).\n\nUse a BoxInsetLayout\n--------------------\n\n\n**Figure 2.** Window insets on a round screen.\n\n\nThe [`BoxInsetLayout`](/reference/androidx/wear/widget/BoxInsetLayout) class in the Wear OS UI Library lets\nyou define a layout that works for round screens. This class lets you\neasily align views on the center or near the edges of the screen.\n\n\nThe gray square in figure 2 shows the area where the `BoxInsetLayout`\ncan automatically place its child views on round screens after applying\nthe required window insets. To be displayed inside this area, child\nviews specify the `layout_boxedEdges` attribute with the following values:\n\n- A combination of `top`, `bottom`, `left`, and `right`. For example, a `\"left|top\"` value positions the child's left and top edges inside the gray square in figure 2.\n- The `\"all\"` value positions all the child's content inside the gray square in figure 2. This is the most common approach with a [`ConstraintLayout`](/reference/androidx/constraintlayout/widget/ConstraintLayout) inside.\n\n\nThe layout shown in figure 2 uses the `\u003cBoxInsetLayout\u003e`\nelement and works on round screens: \n\n```xml\n\u003candroidx.wear.widget.BoxInsetLayout\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n android:layout_height=\"match_parent\"\n android:layout_width=\"match_parent\"\n android:padding=\"15dp\"\u003e\n\n \u003candroidx.constraintlayout.widget.ConstraintLayout\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n android:padding=\"5dp\"\n app:layout_boxedEdges=\"all\"\u003e\n\n \u003cTextView\n android:layout_height=\"wrap_content\"\n android:layout_width=\"match_parent\"\n android:text=\"@string/sometext\"\n android:textAlignment=\"center\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n app:layout_constraintTop_toTopOf=\"parent\" /\u003e\n\n \u003cImageButton\n android:background=\"@android:color/transparent\"\n android:layout_height=\"50dp\"\n android:layout_width=\"50dp\"\n app:layout_constraintBottom_toBottomOf=\"parent\"\n app:layout_constraintStart_toStartOf=\"parent\"\n android:src=\"@drawable/cancel\" /\u003e\n\n \u003cImageButton\n android:background=\"@android:color/transparent\"\n android:layout_height=\"50dp\"\n android:layout_width=\"50dp\"\n app:layout_constraintBottom_toBottomOf=\"parent\"\n app:layout_constraintEnd_toEndOf=\"parent\"\n android:src=\"@drawable/ok\" /\u003e\n\n \u003c/androidx.constraintlayout.widget.ConstraintLayout\u003e\n\n\u003c/androidx.wear.widget.BoxInsetLayout\u003e\n```\n\n\nNotice the parts of the layout marked in bold:\n\n-\n `android:padding=\"15dp\"`\n\n\n This line assigns padding to the `\u003cBoxInsetLayout\u003e`\n element.\n-\n `android:padding=\"5dp\"`\n\n\n This line assigns padding to the inner `ConstraintLayout` element.\n-\n `app:layout_boxedEdges=\"all\"`\n\n\n This line ensures that the `ConstraintLayout` element\n and its children are boxed inside the area defined by the window\n insets on round screens.\n\nUse a curved layout\n-------------------\n\nThe [WearableRecyclerView](/reference/androidx/wear/widget/WearableRecyclerView) class in the Wear OS UI Library\nlets you opt-in to a curved layout optimized for round screens.\nTo enable a curved layout for scrollable lists in your\napp, see [Create lists on Wear OS](/training/wearables/ui/lists#creating)."]]
