مقالات طراحی اپ موبایل

کتابخانه Lottie در اندروید – راهنمای کاربردی
Lottie کتابخانه‌ای جذاب میباشد که از سوی مجموعه پیشرفت Airbnb ارائه شد‌ه‌است. این کتابخانه روشی جذاب برای انیمیت گرافیک‌های برداری ارائه می‌نماید. بنابراین فرصتی بی‌غایت برای گسترش‌دهندگان دیگر گشوده گردیده‌است تا به تزیین نرم افزار خویش بپردازند. برای مثال میتوانید درین ریپوی گیت‌هاب (+) یک در دست گرفتن ناوبری تحتانی را ببینید که با به کارگیری از Lottie طراحی اپلیکیشن در مشهد برای انیمیت آیکون‌های منو پیاده سازی شد‌ه‌است و آن را جذاب ساخته میباشد.
برای فهم و شعور این پروژه می توانید به ادامه رسیدگی این راهنما بپردازید. دقت فرمائید که فولدر readme دربرگیرنده یک GIF میباشد و داخل فولدر dem نیز ویدئویی ارائه گردیده که به توضیح بی نقص دمو می پردازد.

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

implementation \'com.airbnb.android:lottie:2.8.0\'
اعتنا نمایید که ورژن 2.8.0 برای پکیج‌های اندروید لازم میباشد. در غیر این شکل می بایست از ورژن 2.6.0 درین نمونه استعمال فرمائید.

کلیک نمائید
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
2
3
4 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 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 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
29
30
مشاهده بدون نقص کدها
براین اساس هر مورد منو دربرگیرنده یک 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);

کتابخانه Lottie در اندروید – راهنمای کاربردی
Lottie کتابخانه‌ای جذاب میباشد که از سوی مجموعه پیشرفت Airbnb ارائه شد‌ه‌است. این کتابخانه روشی جذاب برای انیمیت گرافیک‌های برداری ارائه می‌نماید. بنابراین فرصتی بی‌غایت برای گسترش‌دهندگان دیگر گشوده گردیده‌است تا به تزیین نرم افزار خویش بپردازند. برای مثال میتوانید درین ریپوی گیت‌هاب (+) یک در دست گرفتن ناوبری تحتانی را ببینید که با به کارگیری از Lottie طراحی اپلیکیشن در مشهد برای انیمیت آیکون‌های منو پیاده سازی شد‌ه‌است و آن را جذاب ساخته میباشد.
برای فهم و شعور این پروژه می توانید به ادامه رسیدگی این راهنما بپردازید. دقت فرمائید که فولدر readme دربرگیرنده یک GIF میباشد و داخل فولدر dem نیز ویدئویی ارائه گردیده که به توضیح بی نقص دمو می پردازد.

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

implementation \'com.airbnb.android:lottie:2.8.0\'
اعتنا نمایید که ورژن 2.8.0 برای پکیج‌های اندروید لازم میباشد. در غیر این شکل می بایست از ورژن 2.6.0 درین نمونه استعمال فرمائید.

کلیک نمائید
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
2
3
4 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 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 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
29
30
مشاهده بدون نقص کدها
براین اساس هر مورد منو دربرگیرنده یک 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);