แสดงแอป 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 สำหรับ AR/VR หากปัจจุบันแอปของคุณใช้ Views อยู่ โปรดดูการทํางานกับ Views ใน XR เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ประโยชน์จากความสามารถในการทำงานร่วมกันของ Compose เมื่อทํางานกับ Views หรือประเมินการทํางานกับไลบรารี Jetpack SceneCore โดยตรง
  • การเผยแพร่ใน Play Store: ตรวจสอบว่าแอปที่ปรับปรุงแล้วสำหรับ XR ค้นพบได้ใน 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 เชิงพื้นที่ของแอปเมื่อสามารถแสดงได้ การใช้แอตทริบิวต์เหล่านี้นั้นง่ายดายเพียงทำการเปลี่ยนแปลง 1 บรรทัดเพื่อแทนที่องค์ประกอบ UI 2 มิติที่เกี่ยวข้อง

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

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

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

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

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

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

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

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

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

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

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

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

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

แถบข้างสำหรับไปยังส่วนต่างๆ ที่ไม่ได้จัดวางตามพื้นที่
แถบนำทางที่ปรับให้เหมาะกับพื้นที่ (ปรับให้เหมาะกับ XR)

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

// Previous approach
NavigationRail()

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

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

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

ย้ายข้อมูลคอมโพเนนต์ 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 มิติไปยังแผงเชิงพื้นที่เดียว

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

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

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

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

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

  • หลีกเลี่ยงแผงซ้อนทับที่อาจบล็อกไม่ให้ผู้ใช้เห็นข้อมูลที่สําคัญ
  • หลีกเลี่ยงการใช้แผงควบคุมมากเกินไปจนทำให้ผู้ใช้สับสน
  • หลีกเลี่ยงการวางแผงไว้ในตำแหน่งที่ไม่สบายใจหรือไม่สังเกตเห็น ตัวอย่าง: แผงที่อยู่ด้านหลังผู้ใช้นั้นสังเกตได้ยาก
  • ดูข้อมูลเพิ่มเติมเกี่ยวกับการพัฒนา UI แบบพื้นที่ได้ที่คําแนะนําฉบับเต็ม
เนื้อหาที่ไม่ได้จัดวางเสียงตามตำแหน่ง
การควบคุมสื่อแบบ 3 มิติ (ปรับให้เหมาะกับ XR) ภายในวงโคจรและเนื้อหาที่แบ่งออกเป็นแผง 3 มิติหลายแผง
SpatialRow(curveRadius = 825.dp) {
    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()
    }
}

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

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

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

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

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

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

เพิ่มโมเดล 3 มิติ

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

เพิ่มโมเดล 3 มิติด้วย SceneViewer

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

เพิ่มโมเดล 3 มิติโดยตรงด้วยเอนทิตีในโวลุ่ม

เมื่อต้องการควบคุมสิ่งต่างๆ เช่น ตำแหน่งของโมเดล 3 มิติ ขนาดสัมพัทธ์ หรือภาพเคลื่อนไหวแบบละเอียดมากขึ้น คุณสามารถโหลดทรัพยากร glTF ลงในแอปได้โดยตรง เมื่อโหลดโมเดล 3 มิติแล้ว คุณจะใช้คอมโพสิชัน Volume เพื่อรวมเอนทิตีโมเดล glTF และใช้ตัวแก้ไขพื้นที่ย่อยเพื่อควบคุมวิธีนำเสนอได้ การใช้ปริมาตรช่วยให้คุณวางโมเดล 3 มิติแบบสัมพัทธ์กับ UI เชิงพื้นที่ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการแสดงโมเดล 3 มิติในแอปได้ที่หัวข้อสร้าง ควบคุม และจัดการเอนทิตี