แสดงแอป Android เป็น 3 มิติด้วย XR

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

แอป Android บนอุปกรณ์เคลื่อนที่หรือหน้าจอขนาดใหญ่แบบ 2 มิติจะทำงานใน Android XR โดยค่าเริ่มต้น โดยแสดงเป็นแผง 2 มิติภายในพื้นที่ 3 มิติ คุณสามารถเพิ่มฟีเจอร์ XR แบบสมจริงเพื่อปรับปรุงแอป Android 2 มิติที่มีอยู่ โดยเปลี่ยนจากประสบการณ์การใช้งานบนหน้าจอแบนไปเป็นสภาพแวดล้อม 3 มิติแบบไดนามิก

โปรดคำนึงถึงหลักการสำคัญต่อไปนี้เมื่อนําแอป Android ไปใช้กับ XR

• ความสามารถเชิงพื้นที่: Android XR มีฟีเจอร์เชิงพื้นที่ที่หลากหลายสำหรับแอปของคุณ แต่คุณไม่จำเป็นต้องใช้ความสามารถทุกรายการ ใช้ไอคอนอย่างมีกลยุทธ์เพื่อเสริมลำดับชั้น เลย์เอาต์ และเส้นทางของผู้ใช้ ลองใช้สภาพแวดล้อมที่กําหนดเองและแผงหลายรายการเพื่อสร้างประสบการณ์ที่สมจริง โปรดดูคําแนะนําในการออกแบบ UI เชิงพื้นที่เพื่อพิจารณาการผสานรวมองค์ประกอบเชิงพื้นที่ที่เหมาะสมที่สุด
• UI แบบปรับขนาดได้: XR ช่วยให้คุณออกแบบ UI ที่กว้างขวางซึ่งปรับให้เข้ากับผืนผ้าใบแบบไม่สิ้นสุดและหน้าต่างที่ปรับขนาดได้อย่างอิสระได้อย่างยืดหยุ่น ข้อควรพิจารณาที่สำคัญอย่างหนึ่งคือการใช้คำแนะนำด้านการออกแบบหน้าจอขนาดใหญ่เพื่อเพิ่มประสิทธิภาพเลย์เอาต์ของแอปสำหรับสภาพแวดล้อมที่กว้างใหญ่นี้ แม้ว่าตอนนี้แอปของคุณจะใช้งานได้บนอุปกรณ์เคลื่อนที่เท่านั้น คุณก็ยังคงใช้สภาพแวดล้อมที่น่าสนใจเพื่อปรับปรุงประสบการณ์ของผู้ใช้ได้ แต่ UI ที่เพิ่มประสิทธิภาพสำหรับหน้าจอขนาดใหญ่เป็นหนึ่งในวิธีที่ดีที่สุดในการเพิ่มประสิทธิภาพแอปสำหรับ Android XR
• เฟรมเวิร์ก UI: เราขอแนะนำให้สร้าง UI ด้วย Jetpack Compose สำหรับ XR หากปัจจุบันแอปของคุณใช้ Views อยู่ โปรดดูการทํางานกับ Views ใน XR เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ประโยชน์จากความสามารถในการทำงานร่วมกันของ Compose เมื่อทํางานกับ Views หรือประเมินการทํางานกับไลบรารี Jetpack SceneCore โดยตรง
• การเผยแพร่ใน Play Store: ตรวจสอบว่าแอปที่ปรับปรุงแล้วสำหรับ XR ค้นพบได้ใน Play Store โดยทำดังนี้
  • ลองปรับปรุงแอปโดยนำข้อกำหนดฟีเจอร์ที่ไม่จำเป็นออก
  • ตรวจสอบว่าไม่ได้เลือกไม่ใช้การเผยแพร่ XR จาก Google Play Console เพื่อป้องกันไม่ให้แอปถูกยกเว้นจากผลการค้นหาของ Play Store

<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

เคล็ดลับในการแปลงคอมโพเนนต์ UI 2 มิติเป็น 3 มิติ

การทำตามเคล็ดลับเหล่านี้จะช่วยให้แอปของคุณได้รับการเพิ่มประสิทธิภาพสำหรับ XR

• ให้ความสำคัญกับการรองรับหน้าจอขนาดใหญ่: ตรวจสอบว่า UI ของแอปเป็นไปตามหลักการการออกแบบหน้าจอขนาดใหญ่ เพื่อให้มั่นใจว่าข้อความและเนื้อหาจะอ่านได้ง่ายที่สุดในสภาพแวดล้อม XR ที่กว้างขวาง
• ใช้ฟีเจอร์เชิงพื้นที่อย่างมีกลยุทธ์: ระบุช่วงเวลาสําคัญในเส้นทางของผู้ใช้แอปที่การนําฟีเจอร์เชิงพื้นที่มาใช้จะช่วยปรับปรุงประสบการณ์และใช้ประโยชน์จากความสามารถเฉพาะของแพลตฟอร์ม
• วางแผงพื้นที่โดยคำนึงถึงความสะดวกสบายของผู้ใช้: เมื่อออกแบบเลย์เอาต์ด้วยแผงพื้นที่ ให้วางแผงดังกล่าวในตำแหน่งที่ห่างจากผู้ใช้ในลักษณะที่ผู้ใช้รู้สึกสบาย เพื่อไม่ให้ผู้ใช้รู้สึกอึดอัดหรือรู้สึกว่าแผงอยู่ใกล้เกินไป
• ใช้ UI แบบปรับเปลี่ยนได้สำหรับเลย์เอาต์เชิงพื้นที่: ใช้แนวคิด UI แบบปรับเปลี่ยนได้ เช่น แผงและการแสดงข้อมูลแบบเป็นขั้นๆ เพื่อแยกเลย์เอาต์ออกเป็นแผงเชิงพื้นที่หลายแผงอย่างมีประสิทธิภาพ ซึ่งจะเพิ่มประสิทธิภาพการแสดงข้อมูล
• ใช้องค์ประกอบที่วนรอบสำหรับองค์ประกอบและรูปแบบถาวร: สงวนองค์ประกอบที่วนรอบไว้สำหรับองค์ประกอบ UX ถาวรและตามบริบท เช่น การนำทางและการควบคุม จำกัดการใช้ภาพจากกล้องที่โคจรเพื่อรักษาความชัดเจนและหลีกเลี่ยงความกระจัดกระจาย
• ใช้การยกระดับอย่างเหมาะสม: ใช้การยกระดับเชิงพื้นที่กับคอมโพเนนต์ชั่วคราวที่อยู่กับที่และไม่เลื่อนไปพร้อมกับเนื้อหา หลีกเลี่ยงการยกระดับพื้นที่ขนาดใหญ่เพื่อป้องกันไม่ให้ภาพดูไม่สบายตาและรักษาลําดับชั้นภาพให้สมดุล
• สร้างด้วย Material Design: หากสร้างด้วยคอมโพเนนต์ Material Design และเลย์เอาต์แบบปรับเปลี่ยนได้เวอร์ชันอัลฟ่าล่าสุด คุณสามารถเพิ่ม Wrapper "EnableXrComponentOverrides" เพื่อเลือกใช้การเปลี่ยนแปลง XR ในแอปได้ อ่านข้อมูลเพิ่มเติมได้ในเอกสารประกอบ Material Design สำหรับ XR

Jetpack Compose สำหรับ XR เปิดตัวคอมโพเนนต์ใหม่ที่จัดการการเพิ่มประสิทธิภาพ XR ให้คุณ เช่น คุณสามารถใช้ SpatialPopup และ SpatialDialog เพื่อแทนที่ 2D คอมโพเนนต์เหล่านี้จะปรากฏเป็น UI 2 มิติทั่วไปเมื่อ UI เชิงพื้นที่ไม่พร้อมใช้งาน และจะแสดง UI เชิงพื้นที่ของแอปเมื่อสามารถแสดงได้ การใช้งานนั้นง่ายดายเพียงทำการเปลี่ยนแปลงบรรทัดเดียวเพื่อแทนที่องค์ประกอบ UI 2 มิติที่เกี่ยวข้อง

แปลงกล่องโต้ตอบเป็น SpatialDialog

// Previous approach
Dialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}
SpatialDialog.kt

แปลงป๊อปอัปเป็น SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}
SpatialPopup.kt

ยกระดับองค์ประกอบ UI 2 มิติ

เมื่อคุณต้องการยกระดับ UI ด้วยการควบคุมที่ละเอียดยิ่งขึ้น เรามี SpatialElevation ให้คุณยกระดับคอมโพสิชันในแอปให้อยู่เหนือแผงเชิงพื้นที่ในแกน Z ที่คุณตั้งค่าไว้ด้วย SpatialElevationLevel วิธีนี้จะช่วยดึงดูดความสนใจของผู้ใช้ สร้างลําดับชั้นที่ดียิ่งขึ้น และปรับปรุงความอ่านง่าย ดังที่แสดงในตัวอย่างต่อไปนี้

// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(spatialElevationLevel = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}
SpatialElevation.kt

ประเด็นสำคัญเกี่ยวกับรหัส

• อย่าจัดวางหรือยกระดับพื้นที่และระนาบขนาดใหญ่ เช่น ชีตด้านล่างและชีตด้านข้าง
• อย่ายกระดับองค์ประกอบ UI ที่เลื่อนไปพร้อมกับเนื้อหา

ย้ายข้อมูลคอมโพเนนต์ 2 มิติไปยังออบบิเทอร์

องค์ประกอบที่ลอยอยู่คือองค์ประกอบที่ลอยอยู่ซึ่งมักจะมีการควบคุมที่ผู้ใช้โต้ตอบได้ คุณสามารถยึดดาวเทียมไว้กับแผงเชิงพื้นที่หรือเอนทิตีอื่นๆ เช่น เลย์เอาต์เชิงพื้นที่ ไอคอนช่วยให้เนื้อหามีพื้นที่มากขึ้นและช่วยให้ผู้ใช้เข้าถึงฟีเจอร์ต่างๆ ได้อย่างรวดเร็วโดยไม่บดบังเนื้อหาหลัก

โค้ดตัวอย่างต่อไปนี้แสดงวิธีย้ายข้อมูลคอมโพเนนต์ UI 2 มิติไปยัง ORBITER

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Top
) {
    NavigationRail()
}
Orbiter.kt

ประเด็นสำคัญเกี่ยวกับยานอวกาศโคจร

• ออบิเทอร์เป็นคอมโพเนนต์ที่ออกแบบมาเพื่อแนบองค์ประกอบ UI ที่มีอยู่กับแผงเชิงพื้นที่
• ดูหลักเกณฑ์การออกแบบแอป Android XR เพื่อตรวจสอบว่าต้องย้ายองค์ประกอบใดสำหรับอุปกรณ์แบบหมุนรอบตัว และรูปแบบใดที่ควรหลีกเลี่ยง
• เราขอแนะนำให้ปรับแต่งคอมโพเนนต์การนำทางเพียงไม่กี่รายการ เช่น แถบนำทาง แถบแอปด้านบน หรือแถบแอปด้านล่าง
• ดาวเทียมจะไม่แสดงขึ้นเมื่อไม่ได้เปิดใช้ UI แบบพื้นที่ เช่น จะไม่แสดงในพื้นที่ทำงานในบ้านหรือในอุปกรณ์ต่างๆ เช่น โทรศัพท์ แท็บเล็ต และอุปกรณ์แบบพับได้

ย้ายข้อมูลคอมโพเนนต์ 2 มิติไปยังแผงเชิงพื้นที่

แผงเชิงพื้นที่เป็นองค์ประกอบพื้นฐานของ UI ของแอป Android XR

แผงทำหน้าที่เป็นคอนเทนเนอร์สำหรับองค์ประกอบ UI, คอมโพเนนต์แบบอินเทอร์แอกทีฟ และเนื้อหาที่สมจริง เมื่อออกแบบ คุณสามารถเพิ่มคอมโพเนนต์ เช่น วงโคจรสำหรับการควบคุมของผู้ใช้ และยกระดับองค์ประกอบ UI ขึ้นเพื่อดึงดูดความสนใจไปที่การโต้ตอบที่เฉพาะเจาะจง

ประเด็นสำคัญเกี่ยวกับรหัส

• โปรดดูหลักเกณฑ์การออกแบบแอป Android XR เพื่อตรวจสอบองค์ประกอบที่จะย้ายไปยังแผง และดูรูปแบบที่ควรหลีกเลี่ยง
• ทําตามแนวทางปฏิบัติแนะนําสําหรับตําแหน่งแผงพื้นที่ ดังนี้
  • แผงควรแสดงตรงกลางห่างจากดวงตาของผู้ใช้ 1.5 เมตร
  • เนื้อหาควรปรากฏตรงกลางในมุมมอง 41° ของผู้ใช้
• แผงจะยังคงอยู่ในตำแหน่งเดิมเมื่อผู้ใช้เลื่อน การยึดตําแหน่งใช้ได้กับการส่งผ่านเท่านั้น
• ใช้มุมมน 32 dp ที่ระบบแนะนำสำหรับแผง
• เป้าหมายการแตะควรมีขนาด 56 dp และไม่เล็กกว่า 48 dp
• รักษาสัดส่วนคอนทราสต์เพื่อให้อ่านได้ง่าย โดยเฉพาะในกรณีที่ใช้พื้นหลังแบบโปร่งใส
• ปฏิบัติตามหลักการเกี่ยวกับสีของการออกแบบ Android และใช้ระบบสีของ Material Design เพื่อใช้ธีมมืดและธีมสว่างในแอป
• ใช้ Spatial Panels API กับองค์ประกอบ UI ที่มีอยู่

ย้ายข้อมูล UI 2 มิติไปยังแผงเชิงพื้นที่เดียว

โดยค่าเริ่มต้น แอปจะแสดงด้วยแผงเดียวในพื้นที่บ้าน ดูวิธีเปลี่ยนระหว่างพื้นที่ในบ้านกับพื้นที่ทำงานแบบเต็ม หากต้องการนำเนื้อหานั้นไปยังพื้นที่ทำงานแบบเต็ม คุณสามารถใช้ SpatialPanel

ต่อไปนี้เป็นตัวอย่างวิธีดำเนินการ

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

ย้ายข้อมูล UI 2 มิติไปยังแผงเชิงพื้นที่หลายแผง

คุณจะใช้แผงเชิงพื้นที่เดียวสําหรับ UI ของแอป หรือจะย้ายข้อมูล UI 2 มิติไปยังแผงเชิงพื้นที่หลายแผงก็ได้ หากเลือกใช้แผงหลายแผงสำหรับ UI ของแอป คุณจะจัดตำแหน่งและหมุนแผงได้ (คล้ายกับการจัดวาง UI ในแบบ 2 มิติ) คุณจะเริ่มด้วยวิสัยทัศน์การออกแบบที่ชัดเจนเกี่ยวกับสิ่งที่ต้องการบรรลุ จากนั้นจะใช้ Spatial UI Layout API (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) และตัวแก้ไขพื้นที่ย่อยเพื่อวางตำแหน่งและหมุนแผง มีรูปแบบหลักๆ บางรูปแบบที่คุณควรหลีกเลี่ยงเมื่อติดตั้งใช้งานแผงหลายรายการ

• หลีกเลี่ยงแผงซ้อนทับที่อาจบล็อกไม่ให้ผู้ใช้เห็นข้อมูลที่สําคัญ
• หลีกเลี่ยงการใช้แผงควบคุมมากเกินไปจนทำให้ผู้ใช้สับสน
• หลีกเลี่ยงการวางแผงไว้ในตำแหน่งที่ไม่สบายใจหรือไม่สังเกตเห็น ตัวอย่าง: แผงที่อยู่ด้านหลังผู้ใช้นั้นสังเกตได้ยาก
• ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนา UI แบบพื้นที่ได้ที่คําแนะนําฉบับเต็ม

SpatialRow {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}
SpatialRow.kt

ตรวจสอบความสามารถเชิงพื้นที่

เมื่อตัดสินใจว่าจะแสดงองค์ประกอบ UI ที่เฉพาะเจาะจงหรือไม่ ให้หลีกเลี่ยงการเลือกอุปกรณ์หรือโหมด XR ที่เฉพาะเจาะจง การตรวจสอบอุปกรณ์หรือโหมดแทนความสามารถอาจทำให้เกิดปัญหาเมื่อความสามารถในอุปกรณ์หนึ่งๆ เปลี่ยนแปลงไปเมื่อเวลาผ่านไป แต่ให้ใช้ LocalSpatialCapabilities.current.isSpatialUiEnabled เพื่อตรวจสอบความสามารถด้านการจัดวางเสียงที่จำเป็นโดยตรงตามที่แสดงในตัวอย่างต่อไปนี้ วิธีนี้ช่วยให้แอปปรับตัวเข้ากับประสบการณ์การใช้งาน XR ที่หลากหลายได้อย่างถูกต้องโดยไม่ต้องอัปเดตทุกครั้งที่มีอุปกรณ์ใหม่หรือความสามารถเปลี่ยนแปลง

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
SpatialCapabilities.kt

ใช้สภาพแวดล้อมเพื่อเปลี่ยนสภาพแวดล้อมของผู้ใช้

หากต้องการสร้างความรู้สึกสมจริงในแอปด้วยการเปลี่ยนสภาพแวดล้อมของผู้ใช้ คุณก็ทำได้โดยใช้สภาพแวดล้อม การเพิ่มสภาพแวดล้อมในโค้ดเป็นการเปลี่ยนแปลงที่ตรงไปตรงมาซึ่งคุณทําได้โดยไม่ส่งผลกระทบต่อ UI ที่มีอยู่ของแอปมากนัก ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าสภาพแวดล้อมได้ที่คําแนะนําฉบับเต็ม

เพิ่มเนื้อหา 3 มิติ

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

โปรดดูคำแนะนำที่เหมาะสมสำหรับการเพิ่มโมเดล 3 มิติ วิดีโอเชิงพื้นที่ หรือเสียงรอบทิศทาง