แอปใน 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>
หากต้องการแก้ไขปัญหานี้ ให้ใช้เลย์เอาต์ใน ไลบรารี Wear OS UI ที่รองรับอุปกรณ์ทรงกลม
- คุณสามารถใช้
BoxInsetLayout
เพื่อป้องกันไม่ให้มุมมองถูกครอบตัดใกล้กับขอบของหน้าจอกลม - คุณใช้แพ็กเกจ
WearableRecyclerView
ได้ เพื่อสร้างเค้าโครงแบบโค้งเมื่อคุณต้องการแสดงและจัดการ รายการแนวตั้งที่ปรับให้เหมาะสมกับหน้าจอกลม
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบแอป โปรดอ่าน หลักเกณฑ์การออกแบบของ Wear OS
ใช้ BoxInsetLayout
![](https://developer.android.com/static/wear/images/02_uilib.png?authuser=7&hl=th)
รูปที่ 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