Before After Slider کتابخونه نمایش قبل و بعد در اندروید

Before After Slider کتابخونه اندروید ای هستش که میتونی قبل و بعد چیزی رو به کاربر نشون بدی.

بعضی مواقع پیش میاد که میخوایم قبل و بعد چیزی رو به کاربر نشون بدیم.

مثلا : قبل و بعد دریاچه ارومیه یا رودخونه زاینده رود، یا قبل و بعد تصاویر محسن یگانه ?

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

جایی که میخوای تغییرات زیبایی روی چهره افراد رو به طور کامل به مشتریا نشون بدی.

و کلی مثال های دیگه که واقعا میتونه این کتا‌بخونه کارساز باشه و کمکون کنه.

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

دمو کتابخونه اندروید Before After Slider

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

ولی انصافا از حق نگذریم محسن یگانه قبلا چی بود و بعد چی شد?

آموزش استفاده از کتابخانه

برای اینکه بتونی از Before After Slider استفاده کنی باید کدهای زیر رو توی فایل های gradle اضافه کنی.

برای اینکار اول باید کد زیر رو توی project/build.gradle قرار بدی

maven { url 'https://dl.bintray.com/kandroid/maven' }

سپس کد زیر رو هم توی app/build.gradle قرار بده

implementation 'com.github.blackfox94:before_after_slider:701e3d5861'

بعد از اینکه کدهای بالا رو توی فایل های مورد نظر قرار دادی پروژه رو sync کن.

بعد از sync کردن پروژه، کدها دیگه اضافه شدن و میتونی ازشون توی پروژه خودت استفاده کنی.

توی این کتابخونه به 2 صورت میتونی تصاویر رو قرار بدی.

به صورت ثابت یا داینامیک.

• ثابت : یعنی تصاویر رو توی XML قرار میدی و در ادامه روند پروژه دیگه تغییری نمیکنه
• داینامیک : یعنی تصاویر رو با توجه به شرایط مختلف (مثلا به صورت آنلاین از سرور بگیری) میتونی تغییر بدی

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

برای استفاده از این کتابخونه کد زیر رو توی فایل XML مربوط به صفحه مورد نظرت قرار بده (اصلا فرقی نداره توی Activity باشه یا Fragment)

<com.github.developer__.BeforeAfterSlider
    android:id="@+id/mySlider"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:after_image="@drawable/iran_new"
    app:before_image="@drawable/iran_old"
    app:slider_thumb="@mipmap/white_circle" />

اگه کد بالا رو به صفحه خودت اضافه کنی با لایه ای شبیه به عکس زیر روبرو میشی :

خصوصیات مخصوص مربوط به کتابخونه در XML

با استفاده از خصوصیات های بالا میتونی تصاویر خودت رو به صورت ثابت قرار بدی.

کدهای مربوط به کلاس

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

اگه قصدش رو داری که فقط به صورت ثابت باشه و دیگه تغییر نکنه دیگه نیازی نیستش که از این بخش استفاده کنی.

با زبان های کاتلین و جاوا میتونی به صورت داینامیکی این کتابخونه رو کنترل کنی.

mySlider.setBeforeImage(imgUrl1);
mySlidersetAfterImage(imgUrl2);

mySlider.setSliderThumb(yourDrawable);

mySlider.setBeforeImage(ContextCompat.getDrawable(this,R.drawable.iran_old))
mySlider.setAfterImage(ContextCompat.getDrawable(this,R.drawable.iran_new))

mySlider.setSliderThumb(ContextCompat.getDrawable(this,R.drawable.bg_shape))

توضیحات هر 3 خصوصیت موجود توی این بخش هم دقیقا مثل بخش XML هستش.