بازگشت پیشگویی در نوشتن

پیش‌بینی به عقب، یک ویژگی پیمایش اشاره‌ای، به کاربران اجازه می‌دهد پیش‌نمایش جایی که کشیدن انگشت به عقب آنها را می‌برد، مشاهده کنند. Back Predictive به طور یکپارچه با Compose ادغام می شود تا تجربه ناوبری برنامه شما را افزایش دهد. کاربران هنگام بازگشت به داخل برنامه شما از انتقال روان تر و شهودی تر لذت می برند. شکل 1 نشان می دهد که چگونه این کار در برنامه نمونه SociaLite کار می کند.

شکل 1. انیمیشن بازگشت به خانه در برنامه نمونه SociaLite.

این راهنما نحوه انجام کارهای زیر را با پیش‌بینی بازگشت توضیح می‌دهد:

  • ژست برگشتی پیش‌بینی‌کننده را انتخاب کنید
  • انیمیشن های پیش فرض سیستم را فعال کنید
  • بازگشت پیش بینی را با Navigation Compose فعال کنید
  • ادغام با انتقال عناصر مشترک
  • پشتیبان پیشگویانه را با اجزای Material Compose پشتیبانی کنید
  • با PredictiveBackHandler به پیشرفت دستی دسترسی پیدا کنید
  • انیمیشن ژست‌های برگشتی پیش‌بینی‌کننده را آزمایش کنید

ژست برگشتی پیش‌بینی‌کننده را انتخاب کنید

برای فعال کردن انیمیشن‌های پیش‌بینی‌کننده پیش‌بینی، باید برای پشتیبانی از حرکت پیش‌بینی‌کننده برگشت شرکت کنید. برای شرکت کردن، android:enableOnBackInvokedCallback="true " را به تگ <application> یا تگ های <activity> فردی در فایل AndroidManifest.xml خود اضافه کنید.

انیمیشن های پیش فرض سیستم را فعال کنید

انیمیشن‌های سیستم بازگشت به خانه، فعالیت متقابل، و متقابل در دستگاه‌های Android 15 و جدیدتر برای برنامه‌هایی که به APIهای پشتیبان پشتیبانی شده منتقل شده‌اند در دسترس هستند.

  • بازگشت به خانه : کاربر را به صفحه اصلی برمی‌گرداند.
  • فعالیت متقابل : انتقال بین فعالیت‌های درون برنامه.
  • وظیفه متقابل : انتقال بین وظایف .

این انیمیشن ها به صورت پیش فرض در اندروید 15 و بالاتر فعال هستند. در دستگاه‌های دارای Android 13 یا 14، کاربران می‌توانند آن‌ها را از طریق گزینه‌های Developer فعال کنند.

برای دریافت انیمیشن های سیستم، وابستگی AndroidX Activity خود را به 1.6.0 یا بالاتر به روز کنید.

بازگشت پیش بینی را با Navigation Compose فعال کنید

برای استفاده از پیش‌بینی‌کننده در Navigation Compose، مطمئن شوید که از کتابخانه navigation-compose 2.8.0 یا بالاتر استفاده می‌کنید.

وقتی کاربر به عقب می‌کشد، «نوشتن پیمایش» به‌طور خودکار بین صفحه‌ها محو می‌شود:

شکل 2. انیمیشن متقابل پیش فرض درون برنامه ای در SociaLite.

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

در این مثال، scaleOut در popExitTransition برای کاهش مقیاس صفحه خروجی هنگام حرکت کاربر به عقب استفاده می شود. علاوه بر این، پارامتر transformOrigin نقطه ای را که انیمیشن مقیاس بندی در اطراف آن رخ می دهد، تعیین می کند. به طور پیش‌فرض، مرکز صفحه است ( 0.5f, 0.5f ). می‌توانید این مقدار را تنظیم کنید تا مقیاس‌بندی از نقطه‌ای متفاوت سرچشمه بگیرد. 

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

این کد نتیجه زیر را ایجاد می کند:

شکل 3. یک انیمیشن درون برنامه ای سفارشی در SociaLite.

popEnterTransition و popExitTransition به‌طور خاص انیمیشن‌ها را هنگام بازکردن پشته پشته کنترل می‌کنند، به عنوان مثال، با اشاره به عقب. همچنین می‌توانید enterTransition و exitTransition برای تعریف انیمیشن‌ها برای ورود و خروج از composable‌ها به طور کلی استفاده کنید، نه تنها برای پیش‌بینی بازگشت. اگر فقط enterTransition و exitTransition را تنظیم کنید، هم برای پیمایش معمولی و هم برای باز کردن پشته پشتی استفاده می شود. با این حال، استفاده از popEnterTransition و popExitTransition به شما امکان می‌دهد انیمیشن‌های متمایز را برای پیمایش به عقب ایجاد کنید.

ادغام با انتقال عناصر مشترک

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

شکل 4. انتقال عنصر مشترک با پیشگویانه در Navigation Compose.

برای استفاده از عناصر به اشتراک‌گذاشته‌شده با Navigation Compose، به پیش‌بینی‌کننده با عناصر مشترک مراجعه کنید.

پشتیبان پیشگویانه را با اجزای Material Compose پشتیبانی کنید

بسیاری از مؤلفه‌ها در کتابخانه Material Compose به گونه‌ای طراحی شده‌اند که به‌طور یکپارچه با حرکات پیش‌بینی‌کننده پشت کار کنند. برای فعال کردن انیمیشن‌های پیش‌بینی‌کننده در این مؤلفه‌ها، آخرین وابستگی Material3 ( androidx.compose.material3:material3-*:1.3.0 یا بالاتر) را در پروژه خود بگنجانید.

اجزای موادی که از انیمیشن های پیش بینی کننده پشتیبان پشتیبانی می کنند عبارتند از:

SearchBar و ModalBottomSheet به طور خودکار با حرکات پیشگویانه برگشت متحرک می شوند. ModalNavigationDrawer ، ModalDrawerSheet ، DismissibleDrawerSheet ، و DismissibleNavigationDrawer از شما می‌خواهند که drawerState را به محتوای برگه مربوطه ارسال کنید.

با PredictiveBackHandler به پیشرفت دستی دسترسی پیدا کنید

PredictiveBackHandler [5] قابل نوشتن در Jetpack Compose به شما امکان می دهد ژست عقب را متوقف کنید و به پیشرفت آن دسترسی داشته باشید. می‌توانید به ژست برگشتی کاربر در زمان واقعی واکنش نشان دهید و انیمیشن‌ها یا رفتارهای سفارشی را بر اساس میزان سوایپ کاربر ایجاد کنید.

برای استفاده از PredictiveBackHandler ، مطمئن شوید که از androidx.activity:activity:1.6.0 یا بالاتر استفاده می کنید.

PredictiveBackHandler یک Flow<BackEventCompat> ارائه می‌کند که رویدادهایی را منتشر می‌کند که نشان‌دهنده پیشرفت حرکت برگشتی است. هر رویداد حاوی اطلاعاتی مانند:

  • progress : یک مقدار شناور بین 0 و 1 که نشان دهنده پیشرفت حرکت برگشتی است (0 = اشاره شروع شد، 1 = حرکت کامل شد).
  • touchX و touchY : مختصات X و Y رویداد لمسی.

قطعه زیر استفاده اساسی از PredictiveBackHandler را نشان می دهد: 

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

مثال: ادغام با کشوی ناوبری

این مثال نشان می‌دهد که چگونه می‌توان یک انیمیشن درون برنامه‌ای سفارشی را با استفاده از PredictiveBackHandler پیاده‌سازی کرد تا تعاملی صاف با کشوی پیمایش در پاسخ به حرکات برگشتی در JetLagged ایجاد شود:

شکل 5. کشوی ناوبری با پشتیبان پیش بینی کننده.

در این مثال، PredictiveBackHandler برای موارد زیر استفاده می شود:

  • پیشرفت حرکت ژست عقب را پیگیری کنید.
  • translationX کشو را بر اساس پیشرفت حرکت به‌روزرسانی کنید.
  • از velocityTracker برای باز کردن یا بستن هموار کشو بر اساس سرعت حرکت هنگام تکمیل یا لغو حرکت استفاده کنید.

انیمیشن ژست‌های برگشتی پیش‌بینی‌کننده را آزمایش کنید

اگر همچنان از اندروید 13 یا اندروید 14 استفاده می کنید، می توانید انیمیشن بازگشت به خانه را تست کنید.

برای تست این انیمیشن مراحل زیر را دنبال کنید:

  1. در دستگاه خود، به تنظیمات > سیستم > گزینه‌های برنامه‌نویس بروید.
  2. انیمیشن‌های برگشتی پیش‌بینی‌کننده را انتخاب کنید.
  3. برنامه به‌روزرسانی‌شده‌تان را راه‌اندازی کنید و از ژست برگشتی برای مشاهده آن در عمل استفاده کنید.

در اندروید 15 به بعد، این ویژگی به طور پیش فرض فعال است.

منابع اضافی