จัดการรูปร่างต่างๆ ของนาฬิกา

แอปใน 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

รูปที่ 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