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

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

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

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

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

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

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

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

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

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

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

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

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

maven { url "https://jitpack.io" }

سپس باید پروژه رو 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" />

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

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

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

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

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

برای استفاده کردن از این کتابخونه، علاوه بر اینکه میتونی کدها رو توی 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()

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

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