วิธีใช้งาน

นำ Androidify มาสู่ XR ด้วย Jetpack XR SDK

ใช้เวลาอ่าน 9 นาที
Dereck Bridie
วิศวกรนักพัฒนาซอฟต์แวร์สัมพันธ์

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

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

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

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

ทัวร์ชม Androidify

Androidify เป็นแอปโอเพนซอร์สที่ให้คุณสร้างบ็อต Android โดยใช้เทคโนโลยีล่าสุดบางอย่าง เช่น Gemini, CameraX, Navigation 3 และแน่นอนว่า Jetpack Compose Androidify ได้รับการออกแบบมาในตอนแรกให้ดูดีในโทรศัพท์ อุปกรณ์แบบพับได้ และแท็บเล็ตด้วยการสร้างเลย์เอาต์แบบปรับเปลี่ยนได้

customize.png

Androidify ดูดีในอุปกรณ์หลากหลายรูปแบบ

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

customize_2.png

Androidify ปรับให้เข้ากับ XR โดยใช้เลย์เอาต์ที่ปรับเปลี่ยนตามหน้าจอขนาดใหญ่ได้โดยไม่ต้องเปลี่ยนแปลงโค้ด

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

ทำความคุ้นเคยกับ XR

มาดูแนวคิดพื้นฐานที่สำคัญสำหรับ Android XR โดยเริ่มจากโหมดที่แอปสามารถทำงานได้ 2 โหมด ได้แก่ Home Space และ Full Space

homespace.png
แอปใน Home Space
homespace2.png
แอปใน Full Space

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

ใน Full Space แอปจะไม่มีขอบเขตของพื้นที่และสามารถใช้ฟีเจอร์เชิงมิติพื้นที่ทั้งหมดของ Android XR ได้ เช่น UI เชิงมิติพื้นที่และการควบคุมสภาพแวดล้อมเสมือน

แม้ว่าการทำให้แอปทำงานใน Full Space เท่านั้นอาจดูน่าสนใจ แต่ผู้ใช้อาจต้องการทำงานหลายอย่างพร้อมกันด้วยแอปของคุณ ดังนั้นการรองรับทั้ง 2 โหมดจึงช่วยส่งเสริมประสบการณ์การใช้งานที่ดีขึ้น

การออกแบบสำหรับมิติใหม่ของ Androidify

แอปที่น่าพึงพอใจเริ่มต้นจากการออกแบบที่ยอดเยี่ยม Ivy Knight ผู้สนับสนุนการออกแบบอาวุโสในทีม DevRel ของ Android รับหน้าที่ออกแบบ Androidify ที่มีอยู่ใหม่สำหรับ XR เชิญ Ivy เลย

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

เริ่มต้นการออกแบบด้วย Home Space

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

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

การออกแบบสำหรับการเปลี่ยนไปใช้ Full Space ที่ใหญ่ขึ้น

Full Space เป็นการเปลี่ยนแปลงที่ใหญ่ที่สุด แต่ก็ทำให้เรามีพื้นที่สร้างสรรค์มากที่สุดในการปรับการออกแบบ

tablet_to_xr.webp
จากแท็บเล็ตไปเป็น XR

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

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบการออกแบบ UI สำหรับ XR ได้ที่ Design for Android XR ใน Android Developers

ข้อมูลพื้นฐานเกี่ยวกับ UI เชิงมิติพื้นที่

ตอนนี้เราได้พูดถึงประสบการณ์ของ Ivy ในการปรับความคิดขณะออกแบบ Androidify สำหรับ XR แล้ว มาพูดถึงการพัฒนา UI เชิงมิติพื้นที่กัน การพัฒนา UI เชิงมิติพื้นที่ด้วย Jetpack XR SDK ควรจะคุ้นเคยสำหรับคุณหากเคยใช้เครื่องมือและไลบรารี Android สมัยใหม่ คุณจะพบแนวคิดที่คุ้นเคยอยู่แล้ว เช่น การสร้างเลย์เอาต์ด้วย Compose อันที่จริงแล้ว เลย์เอาต์เชิงมิติพื้นที่คล้ายกับเลย์เอาต์ 2 มิติที่ใช้แถว คอลัมน์ และตัวคั่น

spatialrows.png

องค์ประกอบเหล่านี้จัดเรียงใน SpatialRows และ SpatialColumns

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

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

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

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

orbiter.png
Orbiter แนบอยู่กับด้านล่างของ SpatialPanel

นอกจากนี้ยังมี องค์ประกอบ UI เชิงมิติพื้นที่อีกมากมาย แต่องค์ประกอบเหล่านี้เป็นองค์ประกอบหลักที่เราใช้สร้างเลย์เอาต์เชิงมิติพื้นที่สำหรับ Androidify

เริ่มต้นพัฒนา XR

มาเริ่มต้นด้วยการตั้งค่าโปรเจ็กต์กัน เราได้เพิ่มทรัพยากร Dependency ของ Jetpack XR Compose ซึ่งคุณดูได้ในหน้าทรัพยากร Dependency ของ Jetpack XR

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

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

จากนั้น เราได้สร้างคอมโพเนนต์ปุ่มใหม่ที่ใช้ไอคอนขยายเนื้อหาในเลย์เอาต์ที่มีอยู่ และกำหนดลักษณะการทำงาน onClick ให้ปุ่ม

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

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

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

การใช้การออกแบบสำหรับหน้าจอหลัก

กลับไปดูการออกแบบเชิงมิติพื้นที่สำหรับหน้าจอหลักใน Full Space เพื่อทำความเข้าใจวิธีใช้การออกแบบดังกล่าว

customize_3.png

เราได้ระบุองค์ประกอบ SpatialPanel 2 รายการที่นี่ ได้แก่ แผงที่การ์ดวิดีโออยู่ทางด้านขวา และแผงที่มี UI หลัก สุดท้ายคือ Orbiter ที่แนบอยู่ด้านบน มาเริ่มต้นด้วยแผงเครื่องเล่นวิดีโอกัน

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

เราเพียงแค่นำคอมโพเนนต์ VideoPlayer 2 มิติจากเลย์เอาต์ปกติมาใช้ซ้ำใน SpatialPanel โดยไม่ต้องเปลี่ยนแปลงเพิ่มเติม คอมโพเนนต์นี้จะมีลักษณะดังนี้เมื่อแยกออกมา

bluetiel.png

แผงเนื้อหาหลักก็มีลักษณะคล้ายกัน โดยเรานำเนื้อหาแผงขนาดกลางมาใช้ซ้ำใน SpatialPanel

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

เราได้กำหนด ResizePolicy ให้แผงนี้ ซึ่งจะเพิ่มแฮนเดิลบางอย่างไว้ใกล้ขอบเพื่อให้ผู้ใช้ปรับขนาดแผงได้ นอกจากนี้ แผงนี้ยังมี MovePolicy ซึ่งช่วยให้ผู้ใช้ลากแผงไปมาได้

customize_4.png

การวางแผงเหล่านี้ไว้ในพื้นที่ย่อยเดียวกันจะทำให้แผงเหล่านี้เป็นอิสระจากกัน ดังนั้นเราจึงทำให้แผง VideoPlayer เป็นองค์ประกอบย่อยของแผงเนื้อหาหลัก การดำเนินการนี้จะทำให้แผง VideoPlayer เคลื่อนที่เมื่อลากแผงเนื้อหาหลักผ่านความสัมพันธ์แบบแม่กับลูก

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

นี่คือวิธีที่เราสร้างหน้าจอแรก

ไปที่หน้าจออื่นๆ

ฉันจะพูดถึงหน้าจออื่นๆ บางหน้าจอแบบคร่าวๆ โดยเน้นข้อควรพิจารณาที่เฉพาะเจาะจงสำหรับแต่ละหน้าจอ

fullspace.png
หน้าจอการสร้างใน Full Space

ในที่นี้ เราใช้คอมโพสได้ SpatialRow และ SpatialColumn เพื่อสร้างเลย์เอาต์ที่เหมาะกับพื้นที่การดูที่แนะนำ โดยนำคอมโพเนนต์จากเลย์เอาต์ขนาดกลางมาใช้ซ้ำ

fullspace_2.png

หน้าจอผลลัพธ์ใน Full Space: บ็อตที่สร้างขึ้นด้วยข้อความแจ้ง: หมวกเบสบอลสีแดง แว่นกันแดดทรงนักบิน เสื้อยืดสีฟ้าอ่อน กางเกงขาสั้นลายตารางหมากรุกสีแดงและสีขาว รองเท้าแตะสีเขียว และถือไม้เทนนิส


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

การเผยแพร่ไปยัง Google Play Store

ตอนนี้แอปพร้อมสำหรับ XR ที่มีเลย์เอาต์เชิงมิติพื้นที่แล้ว เราจึงเผยแพร่แอปไปยัง Play Store เราได้ทำการเปลี่ยนแปลงที่สำคัญครั้งสุดท้ายกับไฟล์ AndroidManifest.xml ของแอป ดังนี้

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

การดำเนินการนี้จะแจ้งให้ Play Store ทราบว่าแอปนี้มีฟีเจอร์ที่แตกต่างกันสำหรับ XR โดยจะแสดงป้ายที่แจ้งให้ผู้ใช้ทราบว่าแอปนี้สร้างขึ้นโดยคำนึงถึง XR

androidify2.png
Androidify ที่แสดงใน Google Play Store บน Android XR


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

เริ่มสร้างประสบการณ์การใช้งานของคุณเองได้แล้ววันนี้

Androidify เป็นตัวอย่างที่ยอดเยี่ยมในการทำให้แอป Jetpack Compose 2 มิติที่มีอยู่เป็นเชิงมิติพื้นที่ วันนี้เราได้แสดงกระบวนการทั้งหมดในการพัฒนา UI เชิงมิติพื้นที่สำหรับ Androidify ตั้งแต่การออกแบบไปจนถึงการเขียนโค้ดและการเผยแพร่ เราได้แก้ไขการออกแบบที่มีอยู่ให้ทำงานร่วมกับกระบวนทัศน์เชิงมิติพื้นที่ ใช้คอมโพสได้ SpatialPanel และ Orbiter เพื่อสร้างเลย์เอาต์เชิงมิติพื้นที่ที่จะแสดงเมื่อผู้ใช้เข้าสู่ Full Space และสุดท้ายได้เผยแพร่แอปเวอร์ชันใหม่ไปยัง Play Store

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

เขียนโดย

อ่านต่อ