วิธีการ

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

อ่าน 9 นาที
ดูโปรไฟล์ของ Dereck Bridie
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 และนี่คือลิงก์เพิ่มเติมที่จะช่วยคุณได้

เขียนโดย:
อ่านต่อ