‏Image Carousel در Jetpack compose

یک (Image Carousel) یک مؤلفه رابط کاربری (UI) است که مجموعه‌ای از تصاویر را به‌صورت افقی نمایش می‌دهد و به کاربران اجازه می‌دهد با کشیدن انگشت یا کلیک کردن، بین تصاویر جابجا شوند. این مؤلفه به طور معمول در اپلیکیشن‌ها یا وب‌سایت‌ها برای نمایش محتوای ویژه، محصولات یا گالری‌ها استفاده می‌شود. در این پست به پیاده سازی Image Carousel می پردازیم:

توضیحات:

ویژگی‌های Image Carousel در Jetpack Compose عبارتند از:

1. اسکرول افقی:
   کاربران می‌توانند تصاویر را به‌صورت افقی جابجا کنند، که این امکان را می‌دهد تا تعداد زیادی تصویر به‌طور داینامیک نمایش داده شود.
2. عملکرد بهینه:
   از LazyRow استفاده می‌کند که فقط تصاویر قابل مشاهده را بارگذاری می‌کند و دیگر تصاویر تنها زمانی بارگذاری می‌شوند که به صفحه اضافه شوند. این امر عملکرد را برای لیست‌های بزرگ بهینه می‌کند.
3. طراحی واکنش‌گرا:
   قابلیت تطبیق با اندازه‌های مختلف صفحه‌نمایش به کمک ویژگی‌هایی مانند fillMaxWidth و تنظیمات مختلف در رابطه با فاصله‌ها و اندازه‌ها.
4. پشتیبانی از تصاویر پویا:
   تصاویر از لیست داده‌ها (مثل لیستی از URL یا منابع محلی) به‌صورت پویا بارگذاری می‌شوند.
5. قابلیت سفارشی‌سازی:
   می‌توان از تنظیمات مختلف مانند فاصله بین تصاویر (spacedBy)، padding، تراز، و طراحی‌های سفارشی (مثل گوشه‌های گرد و پس‌زمینه) استفاده کرد.
6. پشتیبانی از بارگذاری غیرهم‌زمان تصاویر:
   با استفاده از rememberAsyncImagePainter، تصاویر به‌صورت غیرهم‌زمان بارگذاری می‌شوند تا عملکرد بهتر و تجربه کاربری روان‌تری فراهم شود.
7. نمایش توضیحات دسترسی‌پذیری:
   برای بهبود دسترسی‌پذیری، هر تصویر یک contentDescription دارد که می‌تواند برای کاربران با نیازهای خاص مفید باشد.

کد نویسی:

1. ابتدا کتابخانه زیر را اضافه می کنیم:

2. نوشتن Composable با نام ImageCarousel

این کد یک کامپوننت ImageCarousel در Jetpack Compose تعریف می‌کند که یک لیست افقی از تصاویر را به‌صورت اسکرولی نمایش می‌دهد. این کامپوننت از LazyRow استفاده می‌کند.

3. حالا بیایید این متد ()ImageCarousel را از MainScreen فراخوانی کنیم تا لیست تصاویر را نشان دهیم

4. کد کامل

خروجی کد:

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

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

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

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

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