برای مشاهده لیست علاقه مندی ها وارد شوید!

مشاهده محصولات فروشگاه
0
سبد خرید خالی است.

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

چکیده کوتاه مطلب

قبل و بعد همه چیز رو با کتابخونه 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" />

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

before after slider android-library-ui-کتابخونه اندروید

توی تصویر بالا من 2 بار از کد مربوطه استفاده کردم، برای همین 2 تا عکس نشون داده

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

عملکرد مربوط به آن نام خصوصیت
نمایش تصویر قبل app:before_image
نمایش تصویر بعد app:after_image
شکل مربوط به جدا کنه app:slider_thumb

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

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

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

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

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

جاواکاتلین
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 هستش.

 

نکته
توی setBeforeImage و setAfterImage هم به صورت drawable میتونی تصاویرت رو قرار بدی و هم به صورت string .
از حالت string زمانی باید استفاده کنی که میخوای تصاویر رو از سرور به صورت آنلاین دریافت کنی.
  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

مطالب مرتبط

0