تتوفّر حزمة تطوير البرامج (SDK) لنظام Android XR الآن في "معاينة المطوّر". يهمّنا معرفة ملاحظاتك. يُرجى الانتقال إلى
صفحة الدعم للتواصل معنا.
تطوير واجهة مستخدم للتطبيقات المستندة إلى طرق عرض Android
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تجربة طريقة "الكتابة"
Jetpack Compose باستخدام حزمة تطوير البرامج (SDK) لمنصة Jetpack XR هي مجموعة أدوات واجهة المستخدم المقترَحة لمنصة Android XR.
يُعدّ استخدام إطار عمل Android Jetpack Compose أفضل طريقة للاستفادة من أحدث التطورات في تطوير واجهات المستخدم على Android والتأكّد من أنّ تطبيقك يواكب أفضل الممارسات في المجال.
ومع ذلك، إذا لم تكن قد نقلت بياناتك وكنت تعمل على تحويل تطبيق يستند إلى Android
Views إلى تطبيق مكاني، يمكنك اتّخاذ بعض الإجراءات.
إعادة استخدام طرق العرض الحالية ضمن SpatialPanels
على الرغم من أنّ SpatialPanel
s تشكّل جزءًا من مكتبة Jetpack Compose for XR، إلا أنّها تقبل أيضًا عناصر View. عند استخدام Subspace
في MainActivity،
ضَع طريقة عرض حالية في SpatialPanel
كما هو موضّح في المثال التالي.
setContent {
Subspace {
SpatialPanel(
modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)
) { MyCustomView(this@ActivityWithSubspaceContent) }
}
}
استخدام واجهات برمجة التطبيقات المتوافقة مع Android Views وCompose
راجِع الإرشادات حول التوافقية التشغيلية بين Views وCompose. يتناول هذا المستند استخدام هذين الإطارين معًا، ويتضمّن روابط تؤدي إلى نماذج الرموز التي يمكنك استخدامها.
استخدام ComposeView لإضافة لوحات فضائية ومدارات إلى جزء حالي
استخدِم ComposeView
في تصميم XML لإضافة عناصر قابلة للإنشاء وإنشاء محتوى جديد للواقع الممتد. استخدِم ربط العرض أو findViewById
للعثور على
ComposeView
في الدالة onCreateView()
.
مزيد من المعلومات عن إرشادات ComposeView
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View {
val view = inflater.inflate(R.layout.example_fragment, container, false)
view.findViewById<ComposeView>(R.id.compose_view).apply {
// Dispose of the Composition when the view's LifecycleOwner
// is destroyed
setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
setContent {
// In Compose world
SpatialPanel(SubspaceModifier.height(500.dp).width(500.dp)) {
Text("Spatial Panel with Orbiter")
}
}
}
return view
}
العمل مباشرةً مع مكتبة Jetpack SceneCore
تم إنشاء Compose for XR استنادًا إلى Jetpack SceneCore. إذا كنت تعمل على تحويل تطبيق يستند إلى "طرق العرض" إلى تطبيق مكاني، يمكنك مواصلة استخدام رمز واجهة المستخدم الحالي ضمن Compose for XR أو اختيار العمل مباشرةً باستخدام Session
في Jetpack SceneCore.
يمكنك إنشاء لوحات مباشرةً من SceneCore باستخدام PanelEntity
. اضبط حجم اللوحة بالمتر باستخدام dimensions
أو بالبكسل باستخدام pixelDimensions
. يمكنك اختيار جعل اللوحات قابلة للنقل أو تغيير الحجم
باستخدام المكوّنات المناسبة. لمزيد من المعلومات، يُرجى الاطّلاع على إضافة سلوك مشترك إلى الكيانات.
val panelContent = MyCustomView(this)
val panelEntity = PanelEntity.create(
session = xrSession,
view = panelContent,
pixelDimensions = IntSize2d(500, 500),
name = "panel entity"
)
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-23 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-23 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Develop UI for Android Views-based Apps\n\nTry the Compose way \nJetpack Compose using the Jetpack XR SDK is the recommended UI toolkit for Android XR. \n[Develop with the Jetpack XR SDK →](/develop/xr/jetpack-xr-sdk) \n\n\u003cbr /\u003e\n\nUsing the [Android Jetpack Compose framework](/jetpack/compose) is the best way to take\nadvantage of the latest advancements in Android UI development and to verify\nthat your application remains current with industry best practices.\n\nHowever, if you haven't migrated, and are working to spatialize an [Android\nViews](/develop/ui/views/layout/declaring-layout) based app, there are a few approaches you can take.\n\nReuse your existing Views within SpatialPanels\n----------------------------------------------\n\nWhile [`SpatialPanel`s](/reference/kotlin/androidx/xr/compose/subspace/package-summary#SpatialPanel(androidx.xr.compose.subspace.layout.SubspaceModifier,androidx.xr.compose.subspace.layout.SpatialShape,kotlin.Function0)) are part of the Jetpack Compose for XR library, they\nalso accept Views. When using [`Subspace`](/reference/kotlin/androidx/xr/compose/spatial/package-summary#Subspace(kotlin.Function1)) in your MainActivity,\nplace an existing view into a [`SpatialPanel`](/reference/kotlin/androidx/xr/compose/subspace/package-summary#SpatialPanel(androidx.xr.compose.subspace.layout.SubspaceModifier,androidx.xr.compose.subspace.layout.SpatialShape,kotlin.Function0)) as shown in the following\nexample.\n\n\n```kotlin\nsetContent {\n Subspace {\n SpatialPanel(\n modifier = SubspaceModifier.height(500.dp).width(500.dp).depth(25.dp)\n ) { MyCustomView(this@ActivityWithSubspaceContent) }\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/xr/src/main/java/com/example/xr/compose/Views.kt#L48-L54\n```\n\n\u003cbr /\u003e\n\nUse Android Views and Compose interoperability APIs\n---------------------------------------------------\n\nConsult [guidance on interoperability between Views and Compose](/develop/ui/compose/migrate/interoperability-apis). This\ndocumentation covers using these frameworks together and contains links to code\nsamples you can use.\n\n### Use a ComposeView to add spatial panels and orbiters to an existing fragment\n\nUse a [`ComposeView`](/reference/kotlin/androidx/compose/ui/platform/ComposeView) in your XML layout to add Composables and create new XR\ncontent. Use [View binding](/topic/libraries/view-binding) or [`findViewById`](/reference/android/view/View#findViewById(int)) to find the\n[`ComposeView`](/reference/kotlin/androidx/compose/ui/platform/ComposeView) in the [`onCreateView()`](/reference/android/app/Fragment#onCreateView(android.view.LayoutInflater,%20android.view.ViewGroup,%20android.os.Bundle)) function.\n\n[Read more about `ComposeView` guidance](/develop/ui/compose/migrate/interoperability-apis/compose-in-views#compose-in-fragments).\n\n\n```kotlin\noverride fun onCreateView(\n inflater: LayoutInflater,\n container: ViewGroup?,\n savedInstanceState: Bundle?\n): View {\n val view = inflater.inflate(R.layout.example_fragment, container, false)\n view.findViewById\u003cComposeView\u003e(R.id.compose_view).apply {\n // Dispose of the Composition when the view's LifecycleOwner\n // is destroyed\n setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)\n setContent {\n // In Compose world\n SpatialPanel(SubspaceModifier.height(500.dp).width(500.dp)) {\n Text(\"Spatial Panel with Orbiter\")\n }\n }\n }\n return view\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/xr/src/main/java/com/example/xr/compose/Views.kt#L61-L79\n```\n\n\u003cbr /\u003e\n\nWork directly with the Jetpack SceneCore library\n------------------------------------------------\n\n[Compose for XR](/develop/xr/jetpack-xr-sdk#jetpack-compose) is built on top of [Jetpack SceneCore](/develop/xr/jetpack-xr-sdk#jetpack-scenecore). If you are\nspatializing a Views based app, you may continue to use your existing UI code\nwithin Compose for XR or choose to work directly with Jetpack SceneCore's\n[`Session`](/reference/kotlin/androidx/xr/runtime/Session) instead.\n\nYou can build panels directly from SceneCore using [`PanelEntity`](/reference/kotlin/androidx/xr/scenecore/PanelEntity). Set the\nsize of the panel in meters using [`dimensions`](/reference/kotlin/androidx/xr/scenecore/PanelEntity#create(androidx.xr.runtime.Session,android.view.View,androidx.xr.runtime.math.FloatSize2d,kotlin.String,androidx.xr.runtime.math.Pose)), or in pixels using\n[`pixelDimensions`](/reference/kotlin/androidx/xr/scenecore/PanelEntity#create(androidx.xr.runtime.Session,android.view.View,androidx.xr.runtime.math.IntSize2d,kotlin.String,androidx.xr.runtime.math.Pose)). You can choose to make the panels movable or resizable\nby using the corresponding components. For more information, see [Add common\nbehavior to entities](/develop/xr/jetpack-xr-sdk/work-with-entities#add-common).\n\n\n```kotlin\nval panelContent = MyCustomView(this)\nval panelEntity = PanelEntity.create(\n session = xrSession,\n view = panelContent,\n pixelDimensions = IntSize2d(500, 500),\n name = \"panel entity\"\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/xr/src/main/java/com/example/xr/compose/Views.kt#L85-L91\n```\n\n\u003cbr /\u003e"]]