کتابخانه Lottie در اندروید — راهنمای کاربردی

Lottie کتابخانه‌ای جالب است که از سوی تیم توسعه Airbnb ارائه شده است. این کتابخانه روشی جالب برای انیمیت گرافیک‌های برداری ارائه می‌کند. بدین ترتیب فرصتی بی‌نهایت برای توسعه‌دهندگان دیگر باز شده است تا به تزیین اپلیکیشن خود بپردازند. به عنوان مثال می‌توانید در این ریپوی گیت‌هاب (+) یک کنترل ناوبری تحتانی را مشاهده کنید که با استفاده از Lottie برای انیمیت آیکون‌های منو طراحی شده است و آن را جالب ساخته است.

برای درک این پروژه می‌توانید به ادامه مطالعه این راهنما بپردازید. توجه کنید که فایل readme شامل یک GIF است و درون پوشه dem نیز ویدئویی ارائه شده که به توضیح کامل دمو می‌پردازد.

شروع با Gradle

قبل از هر چیز باید موتور انیمیت کردن گرافیک‌های بُرداری را به دست آوریم که در این مورد خود Lottie است. بدین منظور از دستور Gradle زیر استفاده می‌کنیم:

implementation 'com.airbnb.android:lottie:2.8.0'

توجه کنید که نسخه 2.8.0 برای پکیج‌های اندروید مورد نیاز است. در غیر این صورت باید از نسخه 2.6.0 در این مثال استفاده کنید.

فیلم آموزش برنامه نویسی کاتلین – توسعه اندروید با Kotlin – مقدماتی در فرادرس

کلیک کنید

Lottie چیست؟

در این بخش ابتدا با فایل‌های Lottie آشنا می‌شویم. این‌ها در واقع انیمیشن‌های Adobe After Effects هستند که به صورت JSON با Bodymovin اکسپورت شده‌اند. زمانی که JSON به دست آید، مسئولیت کتابخانه Lottie تحلیل این JSON و رندر این گرافیک‌های انیمیت شده است. در این لینک (https://www.lottiefiles.com) می‌توانید فایل‌های JSON زیادی را دیده و آن‌ها را امتحان کنید.

متدهای مفید LottieAnimationView

کامپوننت view که مسئول نمایش انیمیشن‌های Lottie است LottieAnimationView محسوب می‌شود. این view نام فایل Lottie که باید استفاده شود را می‌گیرد و در زمان مقتضی این گرافیک انیمیت شده را نمایش می‌دهد.

چند متد از سوی این کلاس ارائه شده‌اند که اساساً ImageView هستند. آن‌ها را می‌توان روی یک XML تنظیم کرد و یا از Java/Kotlin فراخوانی کرد.

• Loop – این متد تعیین می‌کند که انیمیشن در یک چرخه تکراری بازپخش خواهد شد یا نه.
• autoPlay – اگر true باشد به محض تحلیل فایل Lottie و نمایش یافتن آن، اجرای انیمیشن شروع می‌شود.
• Progress – آن را می‌توان یک اسلایدر برای ویدئو در نظر گرفت. Progress (0 تا 100) را می‌توان برای انیمیشن تعیین کرد.
• playAnimation – اگر autoPlay به صورت false باشد، انیمیشن متوقف می‌شود. از آن می‌توان برای شروع پخش انیمیشن استفاده کرد.
• pauseAnimation - انیمیشن را متوقف می‌کند.

listener-های انیمیشن (Animator.AnimatorListener) را می‌توان به LottieAnimationView اضافه کرد تا در مورد حالت انیمیشن به‌روزرسانی‌هایی دریافت کنند.

فایل‌های Lottie را کجا نگه داریم؟

فایل‌های Lottie یا در assets نگهداری می‌شوند و یا در پوشه raw درون پوشه res اندروید ذخیره می‌شوند. کتابخانه Lottie متد جداگانه‌ای برای تعیین نام فایل دارد و فرایند بارگذاری آن‌ها از سوی کتابخانه مدیریت می‌شود.

کاربرد

کاربرد را با استفاده از کتابخانه LottieBottomNav که ایجاد کرده‌ایم توصیف می‌کنیم. قبل از هر چیز باید بدانیم که LottieBottomNav نمای BottomNavigation را بسط نمی‌دهد بلکه LinearLayout را بسط می‌دهد. به همین دلیل است که نمی‌توانیم از Lottie روی BottomNavigationView استفاده کنیم.

public class LottieBottomNav extends LinearLayout

جهت‌گیری را به صورت horizontal تنظیم می‌کنیم و gravity نمای فرزند را روی center قرار می‌دهیم به طوری که کنار هم در مرکز linear layout نمایش می‌یابند.

این لی‌آوت از MenuItems برای نمایش آیکون‌ها و متن استفاده می‌کند. لی‌آوت به صورت زیر تعریف شده است:

1<?xml version="1.0" encoding="utf-8"?>
2<layout>
3
4    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
5        xmlns:tools="http://schemas.android.com/tools"
6        android:layout_width="wrap_content"
7        android:layout_height="wrap_content"
8        android:id="@+id/menu_container"
9        android:background="@android:color/transparent"
10        android:orientation="vertical">
11
12        <com.airbnb.lottie.LottieAnimationView
13            android:layout_width="@dimen/menu_width"
14            android:layout_height="@dimen/menu_height"
15            android:id="@+id/lmi_menu_item"
16            android:layout_gravity="center"
17            />
18
19        <TextView
20            android:layout_width="wrap_content"
21            android:layout_height="wrap_content"
22            android:id="@+id/lmi_menu_text"
23            android:textSize="@dimen/unselected_text_size"
24            android:layout_gravity="center"
25            tools:text="Item 1"
26            />
27
28    </LinearLayout>
29
30</layout>

بنابراین هر آیتم منو شامل یک LottieAndroidView است که مسئول نمایش Lottie است و یک TextView است که مسئول نمایش نام آیتم منو است.

ایجاد آیتم‌های منو

هر MenuItem با استفاده از MenuItemBuilder قابل ایجاد است. MenuItemBuilder چند متد برای پیکربندی آیتم‌های منو بر مبنای حالت انتخاب‌شده و غیر انتخاب‌شده ارائه می‌کند.

1MenuItem item = MenuItemBuilder.create("Dashboard", "home.json", MenuItem.Source.Assets, "dashboard")
2
3.selectedTextColor(Color.BLACK)
4
5.unSelectedTextColor(Color.GRAY)
6
7.pausedProgress(100)
8
9.autoPlay(false)
10
11.loop(false)
12
13.build();

برای نمونه در کد فوق آیتم منو برای نمایش رنگ متن بر مبنای حالت انتخابی استفاده می‌شود.

1MenuItem item2 = MenuItemBuilder.createFrom(item1)
2    .menuTitle("Gifts")
3    .selectedLottieName("gift.json")
4    .unSelectedLottieName("gift.json")
5    .build();

روش دیگر برای انجام این کار آن است که یک آیتم منوی موجود را کلون کرده و سپس تنها مشخصه‌های مورد نیاز را پیکربندی کنیم. توجه کنید که مشخصه تگ کلون یا کپی نشده است.

تنظیم LottieBottomNav

زمانی که همه آیتم‌های منو که قرار است نمایش یابند، ایجاد شدند، باید آن‌ها را به یک ArrayList اضافه کنیم و سپس آن را با فراخوانی setMenuItemList روی bottom nav ارسال کنیم. بدین ترتیب آیتم‌های منو ایجاد و نمایش می‌یابند. توجه کنید که آیتم‌های منو به صورت متوازن پخش می‌شوند و از این رو هر چه تعداد آیتم‌ها بیشتر شود، شلوغ‌تر به نظر می‌رسد. بیشینه تعداد معقول 4 است.

1list = new ArrayList<>(4);
2list.add(item1);
3list.add(item2);
4list.add(item3);
5list.add(item4);
6bottomNav.setCallback(this);
7bottomNav.setMenuItemList(list);        bottomNav.setSelectedIndex(0);

Listener-های Callback

چهار Listener برای Callback عرضه شده‌اند:

1void onMenuSelected(int oldIndex, int newIndex, MenuItem menuItem);
2void onAnimationStart(int index, MenuItem menuItem);
3void onAnimationEnd(int index, MenuItem menuItem);
4void onAnimationCancel(int index, MenuItem menuItem);

Lottie کتابخانه بسیار مفیدی است و با استفاده از انیمیشن‌ها می‌توانیم کاربردپذیری اپلیکیشن را بدون استفاده زیاد از متن و تصویر بهبود بخشیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• آموزش برنامه نویسی اندروید (Android) – مقدماتی
• مجموعه آموزش‌های برنامه‌‌نویسی
• پروفایل کردن اپلیکیشن ها با اندروید استودیو — به زبان ساده
• برنامه نویسی اندروید با کاتلین — راهنمای شروع به کار

==