SparkButton کتابخونه منفجر کردن ویوها همراه با انیمیشن در اندروید

SparkButton کتابخونه منفجر کردن ویوها همراه با انیمیشن در اندروید
در این پست می‌خوانید:

با SparkButton خیلی راحت میتونی ImageView ها رو توی اندروید منفجر کنی?

توسط این کتابخونه میتونی حالت روشن و خاموش شدن رو به ImageView اضافه کنی، اونم همراه با یه انیمیشن خیلی خاااااص و جذاب.

فرض کن وقتی کاربر روی علامت افزودن به علاقه مندی ها کلیک کرد بجا اینکه اون ویو خیلی ساده و یکنواخت عوض بشه مثلا پررنگ بشه، میتونی با یه حالت انفجاری تغییر وضعیت رو به کاربر نشون بدی.

شاید درک کردنش یکم سخت باشه که چطور با حالت انفجاری میشه یک ویو رو تغییر وضعیت داد!

توصیه میکنم حتما دمو این کتابخونه رو ببینی تا متوجه بشی چه کتابخونه خفنیه.

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

حالا که دمو رو دیدی و متوجه شدی که این چه کتابخونه خفنیه، بهتره بریم سراغ آموزشش?

ویژگی های این کتابخانه

نسخه کتابخانه 1.0.6
حداقل API پشتیبانی شده 14
ساخته شده با زبان جاوا
میزان فشار بر رو منابع سخت افزاری کم

اضافه کردن کتا‌بخونه به پروژه

برای اینکه بتونی از کتا‌بخونه SparkButton استفاده کنی باید کد زیر رو به فایل build.gradle پروژه اضافه کنی.

implementation 'com.github.varunest:sparkbutton:1.0.6'

علاوه بر کد بالا باید مخزن زیر رو هم به فایل gradle پروژه اضافه کنی.

maven { url "https://jitpack.io" }
نکته
توی نسخه های جدید اند‌روید استدیو کد مخزن رو باید توی settings.gradle قرار بدی.
توی نسخه های قدیمی تر، باید کد مخزن رو توی build.gradle مربوط به project قرار بدی.

سپس باید پروژه رو sync کنی.

حالا کتا‌بخونه به پروژه اضافه شده و میتونی ازش استفاده کنی?.

کد های مربوط به XML

برای استفاده کردن از این ویو باید کد XML اون رو توی صفحه ای که مد نظرت هست اضافه کنی.

<com.varunest.sparkbutton.SparkButton
    android:id="@+id/instaLikeBtn"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:sparkbutton_activeImage="@drawable/heart_on"
    app:sparkbutton_iconSize="25dp"
    app:sparkbutton_inActiveImage="@drawable/heart_outline_off"
    app:sparkbutton_primaryColor="@color/red"
    app:sparkbutton_secondaryColor="@color/pink" />

برای اینکار من از کد بالا استفاده کردن.

اگر به کد بالا توجه کنی، این کتا‌بخونه یکسری خصوصیت هایی داره که به واسطه اون خصوصیت ها میتونی منو دلخواهت رو درست کنی.

بریم بررسی کنیم و ببینیم که این کتابخونه چه خصوصیت های ویژه ای داره.

بررسی خصوصیت های کتا‌بخونه

توضیحات نام خصوصیت مقدار پیشفرض
اندازه تصاویر app:sparkbutton_iconSize 50
تصویر مربوط به حالت فعال app:sparkbutton_activeImage مقدار پیشفرض ندارد
تصویر مربوط به حالت غیر فعال app:sparkbutton_disabledImage مقدار پیشفرض ندارد
رنگ اصلی انفجار app:sparkbutton_primaryColor مقدار پیشفرض ندارد
رنگ ثانویه انفجار app:sparkbutton_secondaryColor مقدار پیشفرض ندارد
فعال کردن عملیات کلیک app:sparkbutton_pressOnTouch true
سرعت اجرای انفجار app:sparkbutton_animationSpeed 0.50

ساختن ویو به روش کاتلین و جاوا

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

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

کاتلین

val button: SparkButton = SparkButtonBuilder(this)
    .setActiveImage(R.drawable.active_image)
    .setInActiveImage(R.drawable.inactive_image)
    .setDisabledImage(R.drawable.disabled_image)
    .setImageSizePx(resources.getDimensionPixelOffset(R.dimen.button_size))
    .setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
    .setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
    .build()

جاوا

SparkButton button  = new SparkButtonBuilder(context)
                .setActiveImage(R.drawable.active_image)
                .setInActiveImage(R.drawable.inactive_image)
                .setDisabledImage(R.drawable.disabled_image)
                .setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
                .setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
                .setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
                .build();

کنترل بیشتر روی کتابخونه

برای مدیریت بیشتر روی کتابخونه مثل مدیریت کردن وضعیت های مختلف انیمیشن، سرعت و … میتونی از کدهای زیر استفاده کنی.

کنترل سرعت اجرای انیمیشن

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

button.setAnimationSpeed(1.5f)

تغییر وضیعت دکمه

از کد زیر میتونی برای روشن یا خاموش کردن دکمه به صورت داینامیک استفاده کنی.

button.setChecked(true)

کنترل وضعیت های مختلف انیمیشن

این کد بهت کمک میکنه تا برای وضعیت های مختلف انیمیشن عملیات مختلفی رو درنظر بگیری.

مثلا زمانی که انیمیشن تموم شد یه عملیات خاصی رو اجرا کنه، یا اگه دکمه تغییر وضعیت داد یک عملیات دیگه ای اجرا بشه.

برای اینکار باید از listener ای که در نظر گرفته شده استفاده کنی.

برای استفاده در کاتلین
likeButton.setEventListener(object : SparkEventListener{
    override fun onEvent(button: ImageView?, buttonState: Boolean) {

    }

    override fun onEventAnimationEnd(button: ImageView?, buttonState: Boolean) {

    }

    override fun onEventAnimationStart(button: ImageView?, buttonState: Boolean) {

    }

})
برای استفاده در جاوا
button.setEventListener(new SparkEventListener(){
        @Override
        void onEvent(ImageView button, boolean buttonState) {
            if (buttonState) {
                // Button is active
            } else {
                // Button is inactive
            }
        }
});

مدیریت اجرای انیمیشن

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

مثلا اگه یک اتفاق خاصی افتاد انیمیشن شروع به اجرا شدن بشه.

button.playAnimation()

این کتابخونه واقعا افکت خیلی جذابی داره و طبیعتا نظر کاربر رو خیلی میتونی جلب کنه.

پیشنهاد میکنم از این کتابخونه توی پروژه های خودت استفاده کنی.

دیدگاه‌ها ۴
ارسال دیدگاه جدید