‏Shared Element Transition در jetpack Compose

در این پست می خواهیم باهم Shared Element Transition را در Jetpack Compose یادبگیریم. پس برای این کار ما یک لیست کوچک از پیتزا ها خواهیم ساخت که بتوانیم این مبحث را یاد بگیریم !

وابستگی
برای استفاده از آن، وابستگی زیرا را به فایل :app/build.gradle.ktsاضافه می کنیم:

مقدمه‌ای بر این API
این API سه ویژگی جدید را معرفی می‌کند:

1. ویژگی SharedTransitionLayout — برای فعال‌سازی انیمیشن انتقال بین کامپوزابل‌ها مورد نیاز است.
2. ویژگی ()Modifier.sharedElement — این باید زمانی استفاده شود که بخواهید کامپوزابل دیگری را تطبیق دهید.
3. ویژگی ()Modifier.sharedBounds — این باید به‌عنوان محدودۀ کانتینر برای جایی که انتقال باید اتفاق بیافتد، استفاده شود.

شروع ساخت اپلیکیشن
بیایید با ایجاد کلاس داده Pizaa شروع کنیم:

بعد از آن، به MainActivity برویم و لیست پیتزا ها را ایجاد کنیم:

برای اینکه بدانیم کدام پیتزا توسط کاربر انتخاب شده، باید یک متغیر به نام selectedCoffee ایجاد کنیم.

آخرین متغیری که باید اعلام کنیم showDetails است. این متغیر برای نمایش جزئیات پیتزا هست و زمانی که کاربر روی یک پیتزا کلیک می‌کند، استفاده خواهد شد.

برای انیمیشن انتقال، SharedTransitionLayout را اضافه کنید و داخل آن،AnimatedContent را ایجاد کنید.

حال بیایید MainContant را ایجاد کنیم. برای استفاده از انیمیشن‌ها، باید از SharedTransitionScope و AnimatedVisibilityScope استفاده کنیم.

کد زیر را در بدنه MainContant قرار میدهیم .

مفهوم این بخش از کد این است که برای پیاده‌سازی انیمیشن‌های انتقالی بین کامپوزابل‌ها در Jetpack Compose، ابتدا یک شیء به نام SharedContentState ایجاد می‌شود که وضعیت انیمیشن‌های مشترک را ذخیره می‌کند. این شیء با استفاده از () rememberSharedContentState به خاطر سپرده می‌شود تا بتواند به‌طور مداوم وضعیت انیمیشن را ذخیره کند.

کلید منحصر به فردی که به این شیء اختصاص داده می‌شود، برای شناسایی و تمایز بین عناصر مختلفی که قرار است انتقال داده شوند، استفاده می‌شود. به این ترتیب، هنگام انتقال بین کامپوزابل‌ها، ()rememberSharedContentState تضمین می‌کند که هر عنصر به‌درستی شناسایی و مدیریت شود.

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

در اینجا DetailsScreen است که همان کار را در مورد بخش انیمیشن انجام می‌دهد.

حال بیایید به MainActivity برگردیم و کد را کامل کنیم.

این آموزش به شما کمک می‌کند تا انیمیشن‌های انتقالی جذاب و روان را در اپلیکیشن‌های Jetpack Compose خود پیاده‌سازی کنید و تجربه کاربری بهتری ارائه دهید.

سورس پروژه :
برای دیدن کد پروژه در گیت هاب کلیک کنید.

ممنون که تا آخر این پست همراه من بودید ، امیدوارم براتون مفید بوده باشه 🙌🙏✌ (:

بقیه آموزش های من با نام (mister developer) را می توانید در تلگرام و اینستاگرام دنبال کنید!!

کانال تلگرام: mister_developerr

اینستاگرام: mister_developerr

موفق و پیروز باشید