سامسونگ گلکسی XR از راه رسید ، مجهز به اندروید XR! این پست وبلاگ بخشی از هفته ویژه اندروید XR ما است که در آن منابعی - پست‌های وبلاگ، ویدیوها، نمونه کد و موارد دیگر - را ارائه می‌دهیم که همگی برای کمک به شما در یادگیری، ساخت و آماده‌سازی برنامه‌هایتان برای اندروید XR طراحی شده‌اند.

با عرضه سامسونگ گلکسی XR ، اولین دستگاه مجهز به اندروید XR رسماً از راه رسید. اکنون مردم می‌توانند از بسیاری از برنامه‌های مورد علاقه خود از فروشگاه پلی استور در بُعدی کاملاً جدید لذت ببرند: بُعد سوم!

بعد سوم، بُعد بزرگی است و فضای زیادی برای برنامه‌های شما نیز دارد. همین امروز با استفاده از هر ابزاری که برای برنامه شما مناسب است، شروع کنید. به عنوان مثال، می‌توانید از Jetpack XR SDK برای ساخت تجربیات فراگیر XR با استفاده از ابزارهای مدرن توسعه اندروید مانند Kotlin و Compose استفاده کنید.

در این پست وبلاگ، ما در مورد سفر خودمان برای شما خواهیم گفت، زمانی که ایده‌های عجیب و غریب برنامه محبوب Androidify خود را به XR آوردیم، و اصول اولیه آنچه برای آوردن برنامه‌های شما به XR لازم است را نیز پوشش خواهیم داد.

گشتی در اندرویدفای

اندرویدایفای یک برنامه متن‌باز است که به شما امکان می‌دهد با استفاده از برخی از جدیدترین فناوری‌ها مانند Gemini، CameraX، Navigation 3 و البته Jetpack Compose، ربات‌های اندرویدی بسازید. اندرویدایفای در ابتدا طوری طراحی شده بود که با ایجاد طرح‌بندی‌های تطبیقی، روی تلفن‌ها، تبلت‌های تاشو و تبلت‌ها عالی به نظر برسد.

اندرویدایفای در فرم‌فاکتورهای مختلف عالی به نظر می‌رسد

یکی از ارکان اصلی طرح‌بندی‌های تطبیقی، کامپوننت‌های قابل استفاده مجدد هستند. Jetpack Compose به شما کمک می‌کند تا کامپوننت‌های رابط کاربری کوچکی ایجاد کنید که می‌توانند به روش‌های مختلف چیدمان شوند تا تجربیات کاربری بصری ایجاد کنند، صرف نظر از نوع دستگاهی که کاربر از آن استفاده می‌کند. در واقع، Androidify با اندروید XR سازگار است و هیچ تغییری در برنامه ایجاد نمی‌کند!

اندرویدایفای با استفاده از طرح‌بندی واکنش‌گرا برای صفحه نمایش بزرگ و بدون تغییر کد، با واقعیت افزوده (XR) سازگار می‌شود.

برنامه‌هایی که هیچ قابلیت خاصی برای اندروید XR ندارند، می‌توانند در یک پنجره با اندازه مناسب، چندوظیفگی را انجام دهند و تقریباً مانند یک صفحه نمایش بزرگ کار کنند. به همین دلیل، Androidify از قبل به طور کامل و بدون هیچ کار اضافی در اندروید XR ارائه شده است! اما ما نمی‌خواستیم در اینجا متوقف شویم، بنابراین تصمیم گرفتیم پا را فراتر بگذاریم و یک برنامه متمایز با XR ایجاد کنیم تا تجربه‌ای لذت‌بخش را برای کاربران XR خود به ارمغان بیاوریم.

جهت‌یابی در XR

بیایید مفاهیم اساسی و کلیدی اندروید XR را بررسی کنیم، و با دو حالتی که برنامه‌ها می‌توانند در آن اجرا شوند شروع کنیم: فضای خانه (Home Space) و فضای کامل (Full Space).

در Home Space ، چندین برنامه می‌توانند در کنار هم اجرا شوند تا کاربران بتوانند در پنجره‌های مختلف به صورت همزمان چند کار را انجام دهند. از این نظر، این قابلیت بسیار شبیه به پنجره‌بندی دسکتاپ در یک دستگاه اندرویدی با صفحه نمایش بزرگ است، اما در فضای مجازی!

در حالت Full Space ، برنامه هیچ مرز فضایی ندارد و می‌تواند از تمام ویژگی‌های مکانی اندروید XR، مانند رابط کاربری مکانی و کنترل محیط مجازی، استفاده کند.

اگرچه ممکن است وسوسه‌انگیز به نظر برسد که برنامه شما فقط در فضای کامل اجرا شود، اما کاربران شما ممکن است بخواهند با برنامه شما چندین کار را همزمان انجام دهند، بنابراین پشتیبانی از هر دو، تجربه کاربری بهتری را ارتقا می‌دهد.

طراحی برای بُعد جدید Androidify

یک اپلیکیشن لذت‌بخش با یک طراحی عالی شروع می‌شود. آیوی نایت، مشاور ارشد طراحی در اندروید DevRel، وظیفه‌ی تبدیل طرح‌های موجود برای اندرویدایفای به یک طرح جدید برای واقعیت افزوده (XR) را بر عهده گرفت. بفرمایید آیوی!

طراحی برای واقعیت افزوده (XR) به یک رویکرد منحصر به فرد نیاز داشت، اما در واقع هنوز اشتراکات زیادی با طراحی موبایل داشت. ما با فکر کردن به مفهوم مهاربندی شروع کردیم: چگونه عناصر رابط کاربری خود را در زیرفضا سازماندهی و گروه‌بندی کنیم، چه با نشان دادن مرزها به طور واضح و چه با اشاره ظریف به آنها. ما همچنین یاد گرفتیم که تمام اندازه‌های مختلف عناصر رابط کاربری فضایی را که قرار است در پاسخ به کاربر تنظیم و حرکت کنند، در نظر بگیریم. همانطور که با Androidify انجام دادیم، با طرح‌بندی‌های تطبیقی ​​​​بسازید ، بنابراین می‌توانید طرح‌بندی‌های خود را برای رابط کاربری فضایی خود به بخش‌هایی تقسیم کنید.

شروع طراحی با فضای خانه

خوشبختانه، اندروید XR به شما این امکان را می‌دهد که برنامه خود را همانطور که امروز برای Home Space است، شروع کنید، بنابراین می‌توانیم با اضافه کردن یک نوار ابزار پنجره و دکمه انتقال Full Space به طرح‌های XR گسترش‌یافته منتقل شویم.

ما همچنین ویژگی‌های سخت‌افزاری احتمالی و نحوه تعامل کاربر با آنها را در نظر گرفتیم. طرح‌بندی‌های موبایل برای Androidify با توجه به حالت‌های مختلف، اندازه کلاس و تعداد دوربین‌ها سازگار می‌شوند تا گزینه‌های عکس بیشتری ارائه دهند. با پیروی از این مدل، ما مجبور شدیم طرح‌بندی دوربین را برای دستگاه‌های هدست نیز تطبیق دهیم. همچنین باید تنظیماتی را برای متن انجام می‌دادیم تا نزدیکی رابط کاربری به کاربر را در نظر بگیریم.

طراحی برای تغییر بزرگتر به فضای کامل

فضای کامل بزرگترین تغییر بود، اما خلاقانه‌ترین فضا را برای تطبیق طراحی‌مان به ما داد.

اندرویدایفای از مهار بصری یا پنل‌ها برای گروه‌بندی ویژگی‌ها با پس‌زمینه و طرح کلی، مانند پنل «عکس بگیر یا انتخاب کن» استفاده می‌کند. ما همچنین از اجزایی مانند نوار بالای برنامه برای ایجاد مهار طبیعی با قاب‌بندی سایر پنل‌ها استفاده کردیم. در نهایت، مهار ذاتی با نزدیکی عناصر خاص به عناصر دیگر، مانند دکمه پایین «شروع تبدیل» که نزدیک پنل «انتخاب رنگ ربات من» است، پیشنهاد می‌شود.

پنل‌های فضایی برای جداسازی آسان ساخته شده‌اند. برای تصمیم‌گیری در مورد چگونگی تطبیق طرح‌های موبایل خود با پنل‌های فضایی، سعی کنید سطوح را از سطحی که دورتر از همه است حذف کنید و سپس به جلو بروید. ببینید چند پس‌زمینه را می‌توانید حذف کنید و چه چیزی باقی می‌ماند. بعد از اینکه این تمرین را برای Androidify انجام دادیم، شکل موج‌دار بزرگ و سبز اندروید چیزی بود که باقی ماند. این شکل موج‌دار نه تنها به عنوان یک لحظه و پس‌زمینه برندسازی عمل می‌کرد، بلکه لنگری برای محتوا در فضای سه‌بعدی بود.

ایجاد این لنگر، هم تصور اینکه عناصر چگونه می‌توانند حول آن حرکت کنند را آسان‌تر کرد و هم اینکه چگونه می‌توانیم از مجاورت برای گسترش و انتقال بقیه تجربه کاربری استفاده کنیم.

نکات طراحی دیگر برای کمک به فضایی شدن برنامه شما

• بگذارید همه چیز آزاد باشد : کامپوننت‌ها را از هم جدا کنید و به آنها فضای واقعی (مکانی) بدهید. وقت آن است که به آن عناصر رابط کاربری کمی فضای تنفس بدهید.
• حذف سطوح : پس‌زمینه را پنهان کنید، ببینید این کار چه تاثیری بر طرح‌های شما می‌گذارد.
• با حرکت ایجاد انگیزه کنید : چگونه از انتقال‌ها در برنامه خود استفاده می‌کنید؟ از آن شخصیت برای تصور ورود برنامه خود به دنیای واقعیت مجازی استفاده کنید.
• یک نقطه اتکا انتخاب کنید : کاربران خود را در فضا گم نکنید. عنصری داشته باشید که به جمع آوری یا تثبیت رابط کاربری کمک کند.

برای اطلاعات بیشتر در مورد الگوهای طراحی رابط کاربری XR، به بخش «طراحی برای اندروید XR» در وب‌سایت توسعه‌دهندگان اندروید مراجعه کنید.

اصول اولیه رابط کاربری فضایی

حالا که تجربه آیوی در تطبیق طرز فکرش هنگام طراحی Androidify برای XR را بررسی کردیم، بیایید در مورد توسعه رابط کاربری فضایی صحبت کنیم. اگر به کار با ابزارها و کتابخانه‌های مدرن اندروید عادت دارید، توسعه یک رابط کاربری فضایی با Jetpack XR SDK باید آشنا به نظر برسد. مفاهیمی را خواهید یافت که از قبل با آنها آشنا هستید، مانند ایجاد طرح‌بندی با Compose. در واقع، طرح‌بندی‌های فضایی واقعاً شبیه به طرح‌بندی‌های دوبعدی با استفاده از ردیف‌ها، ستون‌ها و فاصله‌دهنده‌ها هستند:

این عناصر در SpatialRows و SpatialColumns مرتب شده‌اند .

عناصر فضایی نشان داده شده در اینجا، کامپوننت‌های SpatialPanel هستند که به شما امکان نمایش محتوای دوبعدی مانند متن، دکمه‌ها و ویدیوها را می‌دهند.

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

یک SpatialPanel یک ترکیب‌پذیر subspace است. ترکیب‌پذیرهای Subspace باید درون یک Subspace قرار گیرند و توسط اشیاء SubspaceModifier اصلاح شوند. Subspaceها می‌توانند در هر جایی از سلسله مراتب رابط کاربری برنامه شما قرار گیرند و فقط می‌توانند شامل ترکیب‌پذیرهای Subspace باشند. اشیاء SubspaceModifier نیز بسیار شبیه به اشیاء Modifier هستند: آنها پارامترهایی مانند اندازه و موقعیت را کنترل می‌کنند.

یک Orbiter   می‌توانند به یک SpatialPanel متصل شوند و همراه با محتوایی که به آن متصل است حرکت کنند. آن‌ها اغلب برای ارائه کنترل‌های زمینه‌ای در مورد محتوایی که به آن متصل شده‌اند استفاده می‌شوند و تمرکز اصلی را به محتوا می‌دهند. آن‌ها را می‌توان در هر یک از چهار طرف محتوا، در فاصله‌ای قابل تنظیم قرار داد.

عناصر رابط کاربری فضایی بسیار بیشتری وجود دارد، اما اینها عناصر اصلی هستند که ما برای ایجاد طرح‌بندی‌های فضایی برای Androidify استفاده کردیم.

شروع توسعه XR

بیایید با تنظیمات پروژه شروع کنیم. ما وابستگی Jetpack XR Compose را اضافه کردیم که می‌توانید آن را در صفحه وابستگی‌های Jetpack XR پیدا کنید.

ما کدی را برای دکمه‌ای که کاربر را به حالت تمام صفحه (Full Space) منتقل می‌کند، اضافه کردیم و با تشخیص قابلیت انجام این کار شروع کردیم:

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

سپس، یک کامپوننت دکمه جدید ساختیم که از آیکون Expand Content در طرح‌بندی‌های موجود ما استفاده می‌کند و به آن رفتار 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"),
       )
   }
}

حالا، کلیک روی آن دکمه، طرح‌بندی Medium را در حالت Full Space نشان می‌دهد. می‌توانیم قابلیت‌های فضایی را بررسی کنیم و تعیین کنیم که آیا رابط کاربری فضایی می‌تواند نمایش داده شود یا خیر - در این صورت، طرح‌بندی فضایی جدید خود را به جای آن نمایش خواهیم داد:

  @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(...)
   }
}

پیاده‌سازی طراحی برای صفحه اصلی

بیایید به طراحی فضایی صفحه اصلی در فضای کامل برگردیم تا بفهمیم چگونه پیاده‌سازی شده است.

ما در اینجا دو عنصر SpatialPanel را شناسایی کردیم: یکی پنلی که کارت گرافیک در سمت راست قرار دارد و دیگری که شامل رابط کاربری اصلی است. در نهایت، یک Orbiter به بالا متصل است. بیایید با پنل پخش کننده ویدیو شروع کنیم:

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

ما به سادگی کامپوننت دوبعدی VideoPlayer را از طرح‌بندی‌های معمولی به SpatialPanel بدون هیچ تغییر اضافی دوباره استفاده کردیم! در اینجا می‌توانید ببینید که به صورت مستقل چگونه به نظر می‌رسد:

پنل محتوای اصلی نیز از همین داستان پیروی کرد: ما از محتوای پنل میانی در SpatialPanel استفاده مجدد کردیم.

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

ما به این پنل یک ResizePolicy دادیم که به پنل تعدادی دستگیره در نزدیکی لبه‌ها می‌دهد که به کاربر اجازه می‌دهد اندازه پنل را تغییر دهد. همچنین یک MovePolicy دارد که به کاربر اجازه می‌دهد آن را به اطراف بکشد.

قرار دادن آنها در یک Subspace آنها را از یکدیگر مستقل می‌کند، بنابراین ما پنل VideoPlayer را به عنوان فرزند پنل محتوای اصلی قرار دادیم. این باعث می‌شود پنل VideoPlayer هنگام کشیدن پنل محتوای اصلی از طریق یک رابطه والد-فرزندی حرکت کند.

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

اینجوری بود که اولین اسکرین رو ساختیم!

رفتن به سراغ پرده‌های دیگر

من به طور خلاصه به برخی از صفحات دیگر نیز خواهم پرداخت و ملاحظات خاص در نظر گرفته شده برای هر یک را برجسته خواهم کرد.

در اینجا، ما از Composableهای SpatialRow و SpatialColumn برای ایجاد یک طرح‌بندی متناسب با فضای مشاهده توصیه‌شده استفاده کردیم و دوباره از اجزای طرح‌بندی Medium استفاده مجدد کردیم.

صفحه نتایج در فضای کامل: رباتی که با یک اعلان تولید شده است: کلاه بیسبال قرمز، عینک آفتابی خلبانی، تی‌شرت آبی روشن، شلوارک چهارخانه قرمز و سفید، دمپایی لاانگشتی سبز، و یک راکت تنیس در دست دارد.

صفحه نتایج، نقل قول‌های مکمل را با استفاده از یک جلوه پرمانند نشان می‌دهد که به آنها اجازه می‌دهد در نزدیکی لبه‌های صفحه محو شوند. همچنین هنگام مشاهده ورودی مورد استفاده، از یک گذار سه‌بعدی واقعی استفاده می‌کند و تصویر را در فضا می‌چرخاند.

انتشار در فروشگاه گوگل پلی

حالا که برنامه با طرح‌بندی‌های فضایی برای واقعیت افزوده (XR) آماده است، آن را در فروشگاه پلی استور منتشر کردیم. یک تغییر مهم و نهایی هم در فایل 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 اطلاع می‌دهد که این برنامه دارای ویژگی‌های متمایز XR است و نشانه‌ای را نشان می‌دهد که به کاربران اطلاع می‌دهد که این برنامه با در نظر گرفتن XR ساخته شده است:

هنگام آپلود نسخه، برای انتشار برای XR به هیچ مرحله خاصی نیاز نداریم: همان برنامه‌ای که برای کاربران روی دستگاه XR توزیع می‌شود، برای کاربران روی مسیر موبایل نیز به طور معمول توزیع می‌شود! با این حال، می‌توانید اسکرین‌شات‌های مخصوص XR از برنامه خود اضافه کنید، یا حتی یک پیش‌نمایش فراگیر از برنامه خود را با استفاده از یک فایل ویدیویی فضایی آپلود کنید. در دستگاه‌های اندروید XR، فروشگاه Play به طور خودکار این را به عنوان یک پیش‌نمایش سه‌بعدی فراگیر نمایش می‌دهد و به کاربران اجازه می‌دهد قبل از نصب برنامه، عمق و مقیاس محتوای شما را تجربه کنند.

همین امروز شروع به ساختن تجربیات خودتان کنید

اندرویدایفای (Androidify) نمونه‌ی بسیار خوبی از چگونگی فضایی‌سازی یک برنامه‌ی دوبعدی جت‌پک کامپوز (Jetpack Compose) موجود است. امروز، ما فرآیند کامل توسعه‌ی یک رابط کاربری فضایی برای اندرویدایفای، از طراحی تا کدنویسی و انتشار را نشان دادیم. ما طرح‌های موجود را برای کار با الگوهای فضایی اصلاح کردیم، از کامپوننت‌های SpatialPanel و Orbiter برای ایجاد طرح‌بندی‌های فضایی که هنگام ورود کاربر به حالت Full Space نمایش داده می‌شوند، استفاده کردیم و در نهایت، نسخه‌ی جدید برنامه را در پلی استور منتشر کردیم.

امیدواریم این پست وبلاگ به شما کمک کرده باشد تا بفهمید چگونه می‌توانید برنامه‌های خود را به اندروید XR بیاورید! در اینجا چند لینک دیگر وجود دارد که می‌تواند در این راه به شما کمک کند:

• کد منبع Androidify را بررسی کنید و با استفاده از Androidify موجود در گوگل پلی ، ربات خودتان را بسازید.
• با مستندات توسعه‌دهندگان ما شروع کنید و درباره Jetpack Compose برای XR بیشتر بدانید.
• شبیه‌ساز اندروید XR را دانلود کنید و برنامه خودتان را امتحان کنید!