اضافه کردن پشتیبانی از انیمیشن های پیشگویانه

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

ویدئو: انیمیشن های پیش بینی کننده

پس از انتخاب، برنامه شما انیمیشن هایی را برای بازگشت به خانه، فعالیت متقابل و وظایف متقابل نمایش می دهد.

همچنین می‌توانید وابستگی مولفه مواد خود را به نسخه 1.10.0 MDC Android ارتقا دهید تا انیمیشن‌های مؤلفه مواد مانند موارد زیر را دریافت کنید:

برای اطلاعات بیشتر به راهنمای توسعه‌دهنده مولفه مواد در GitHub مراجعه کنید.

این ویدئو نمونه کوتاهی از انیمیشن‌های پیش‌بینی‌کننده بازگشت را برای فعالیت متقابل و بازگشت به خانه با استفاده از برنامه تنظیمات اندروید نشان می‌دهد.

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

درباره نحوه افزودن پشتیبانی برای حرکات پیشگویانه برگشت بیشتر بیاموزید.

انتقال ها و انیمیشن های درون برنامه ای سفارشی را اضافه کنید

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

با استفاده از Progress API، انتقال های سفارشی را اضافه کنید

با AndroidX Activity 1.8.0-alpha01 یا بالاتر، می‌توانید از APIهای Predictive Back Progress برای ایجاد انیمیشن‌های سفارشی برای حرکت پیش‌بینی کننده برگشت در برنامه خود استفاده کنید. API های Progress در متحرک سازی نماها مفید هستند، اما هنگام متحرک سازی انتقال بین قطعات دارای محدودیت هایی هستند. در OnBackPressedCallback ، روش‌های handleOnBackProgressed ، handleOnBackCancelled و handleOnBackStarted را برای متحرک کردن اشیا در حالی که کاربر به عقب می‌کشد، معرفی کرده‌ایم. اگر نیاز به سفارشی سازی بیشتر از انیمیشن های پیش فرض ارائه شده توسط سیستم یا انیمیشن های Material Component دارید، از این روش ها استفاده کنید.

ما انتظار داریم که اکثر برنامه‌ها از APIهای سازگار با عقب AndroidX استفاده کنند، اما APIهای پلتفرم مشابهی نیز در رابط OnBackAnimationCallback برای آزمایش در پیش‌نمایش برنامه‌نویس Android 14 1 و بالاتر در دسترس هستند.

از API های Progress با AndroidX Transitions استفاده کنید

APIهای Progress را می‌توان با AndroidX Transitions 1.5.0-alpha01 یا بالاتر در Android 14 و بالاتر برای ایجاد انتقال‌های برگشتی پیش‌بینی‌کننده استفاده کرد.

  1. از TransitionManager#controlDelayedTransition به جای beginDelayedTransition برای پخش انتقال ها در حالی که کاربر به سمت عقب حرکت می کند، استفاده کنید.
  2. انتقال را در handleOnBackStarted ایجاد کنید.
  3. انتقال را با رویداد back در handleOnBackProgressed با ربط دادن currentFraction به BackEvent.progress پخش کنید که نشان می دهد کاربر چقدر به عقب رفته است.
  4. پس از اینکه کاربر ژست برگشتی را در handleOnBackPressed انجام داد، انتقال را تمام کنید.
  5. در نهایت، وضعیت انتقال در handleOnBackCancelled را بازنشانی کنید.

ویدیوی زیر، کد Kotlin و XML یک انتقال سفارشی بین دو کادر پیاده سازی شده با OnBackPressedCallback را نشان می دهد:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

هنگام کار با Transitions Back Predictive، موارد زیر را در نظر داشته باشید:

  • از isSeekingSupported برای بررسی اینکه آیا انتقال از Predictive Back پشتیبانی می کند یا خیر استفاده کنید.
  • isSeekingSupported نادیده بگیرید تا برای انتقال‌های سفارشی‌تان، true باشد.
  • برای هر انیمیشن یک کنترلر ایجاد کنید.
  • انتقال‌های برگشت پیش‌بینی‌کننده با انتقال‌های AndroidX پشتیبانی می‌شوند، اما نه با انتقال‌های چارچوب. توصیه می‌کنیم که از انتقال‌های چارچوبی مهاجرت کنید.
  • انتقال پیش‌بینی‌کننده به عقب در دستگاه‌های دارای Android نسخه ۱۴ و بالاتر پشتیبانی می‌شود و با نسخه قبلی سازگار نیستند.
  • انتقال ایجاد شده با صحنه های XML نیز پشتیبانی می شود. در handleOnBackStarted ، TransitionSeekController خود را به جای نتیجه controlDelayedTransition روی نتیجه TransitionManager.createSeekController قرار دهید.

انتقال فعالیت های سفارشی را در Android 14 و بالاتر اضافه کنید

برای اطمینان از اینکه انتقال‌های فعالیت سفارشی از Predictive Back در Android نسخه ۱۴ و بالاتر پشتیبانی می‌کنند، می‌توانید به جای overrideActivityTransition از overridePendingTransition استفاده کنید. این به این معنی است که انیمیشن انتقال زمانی پخش می‌شود که کاربر به عقب برمی‌گردد.

برای ارائه مثالی از نحوه عملکرد، سناریویی را تصور کنید که در آن فعالیت B در بالای فعالیت A در پشته پشتی قرار دارد. شما می توانید انیمیشن های Activity سفارشی را به روش زیر مدیریت کنید:

  • انتقال باز یا بسته شدن را در متد onCreate فعالیت B فراخوانی کنید.
  • وقتی کاربر به فعالیت B می‌رود، از OVERRIDE_TRANSITION_OPEN استفاده کنید. هنگامی که کاربر برای پیمایش به فعالیت A تند تند می‌کشد، از OVERRIDE_TRANSITION_CLOSE استفاده کنید.
  • هنگام تعیین OVERRIDE_TRANSITION_CLOSE ، enterAnim انیمیشن ورودی فعالیت A و exitAnim انیمیشن خروجی فعالیت B است.

پشتیبانی از Predictive Back با قطعات را اضافه کنید

هنگام اجرای Predictive Back با قطعات، دو رویکرد وجود دارد.

از API های موجود استفاده کنید

توصیه می کنیم از API های موجود استفاده کنید. این APIها به شما این امکان را می‌دهند که از لبه صفحه تند بکشید تا انتقال‌های Animator یا Androidx خود را با ژست دستکاری کنید. اینکه ژست را از یک آستانه عبور دهید، تعیین می‌کند که آیا کامل شده و به قطعه قبلی برمی‌گردید یا لغو شده و روی قطعه فعلی باقی می‌مانید. برای اطلاعات بیشتر، به پیمایش بین قطعات با استفاده از انیمیشن ها مراجعه کنید.

عوامل زیر را در نظر داشته باشید:

  • وارد کردن Transitions 1.5.0 یا بالاتر و Fragments 1.7.0 یا بالاتر. بسیاری از پشتیبانی پیش‌بینی‌کننده پیش‌بینی در Fragments به این بستگی دارد که Transitions بتواند انیمیشن‌ها را جستجو کند، که فقط در Transitions 1.5.0 یا بالاتر امکان‌پذیر است.
  • از Fragments با FragmentManager یا Navigation Component برای مدیریت پشته استفاده کنید. اگر پشته پشتی خود را مدیریت کنید، پیشگویی Back پشتیبانی نمی‌شود.
  • برخی از کتابخانه ها شامل پشتیبانی Predictive Back هستند. برای اطمینان مدارک را بررسی کنید.
  • کلاس Animator و کتابخانه AndroidX Transition پشتیبانی می شوند.
  • کلاس Animation و کتابخانه Framework Transition پشتیبانی نمی شود.
  • انیمیشن‌های پیش‌بینی‌کننده فقط روی دستگاه‌هایی کار می‌کنند که اندروید 14 یا بالاتر دارند.

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

برخی از حرکات مواد از پیش بینی 1.12.02-alpha02 یا بالاتر پشتیبانی می کنند، از جمله MaterialFadeThrough ، MaterialSharedAxis و MaterialFade . توجه داشته باشید MaterialContainerTransform از پیشگویانه پشتیبان پشتیبانی نمی کند.

از تماس های برگشتی استفاده کنید

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

یک OnBackPressedCallback ایجاد کنید. در داخل handleOnBackProgressed ، قطعه را مقیاس و تغییر دهید. سپس از پشته بیرون بزنید. سپس، انتقال عنصر مشترک را با استفاده از setSharedElementReturnTransition در خارج از callback اجرا کنید.

برای اطلاعات بیشتر، نمونه کد را در GitHub ببینید.

الزامات

از جداول زیر برای درک آنچه توسط گزینه های توسعه دهنده کنترل می شود، targetSdkVersion و compileSdkVersion ، نسخه دستگاه، وابستگی ها، پرچم های مانیفست و پرچم های قطعه استفاده کنید. جدول اول به الزامات کد اشاره دارد.

دسته بندی انیمیشن compileSdk targetSdk android:enableOnBackInvokedCallback وابستگی
انیمیشن های سیستمی بازگشت به خانه 33 هر درست است هیچ کدام
فعالیت متقابل 34 هر درست است هیچ کدام
وظیفه متقابل 34 هر درست است هیچ کدام
پلت فرم فعالیت متقابل سفارشی 34 هر درست است هیچ کدام
پلتفرم API Progress 34 هر درست است هیچ کدام
اجزای مواد برگه پایین 34 هر درست است کامپوننت مواد 1.10.0
ورق جانبی 34 هر درست است کامپوننت مواد 1.10.0
کشو ناوبری 34 هر درست است کامپوننت مواد 1.10.0
جستجو کنید 34 هر درست است کامپوننت مواد 1.10.0
انیمیشن های جت پک بخش متقابل AndroidX سفارشی 34 هر درست است AndroidX Fragment 1.7
انتقال سفارشی AndroidX 34 هر درست است AndroidX Transition 1.5
Progress API Jetpack 34 هر درست است AndroidX Activity 1.8

جدول زیر به الزاماتی اشاره دارد که به کاربران امکان دیدن انیمیشن ها را می دهد.

دسته بندی انیمیشن گزینه Developer Option فعال شد نسخه دستگاه
انیمیشن های سیستمی برگشت به خانه درست است 33
فعالیت متقابل درست است 34
وظیفه متقابل درست است 34
پلت فرم فعالیت متقابل سفارشی درست است 34
پلتفرم API Progress نادرست 34
اجزای مواد ورق پایین نادرست 34
ورق جانبی نادرست 34
کشو ناوبری نادرست 34
جستجو کنید نادرست 34
انیمیشن های جت پک بخش متقابل AndroidX سفارشی نادرست 34
انتقال سفارشی AndroidX نادرست 34
Progress API Jetpack نادرست 34

منابع اضافی