Giter VIP home page Giter VIP logo

slider's Introduction

Slider

This is an infinite auto sliding Slider library for Android built on top of Epoxy. You have all the benefits of Epoxy plus automatic and infinite sliding on top. Completely in Kotlin. Thanks to Epoxy you can use the power of Kotlin DSLs with this library too.

Slider is not bound to any particular view so you can use any type of view as long as it's a EpoxyModel.

Demo

Usage

Step 1

Add dependency to your build.gradles

Inside root level build.gradle

allprojects {
            repositories {
                        ...
		maven { url 'https://jitpack.io' }
	}
}

Inside App build.gradle

dependencies {
            implementation 'com.github.worldsnas:slider:{latest_version}'
}

Step 2

Add Slider to your epoxy models:

yourEpoxyView.withModels {
            slider {
                id("your slider id")
                
                //delay before every cycle if user is not scrolling
                cycleDelay(5_000)
                
                //controll the indicator visibility
                indicatorVisible(true)
                //Front/Selected indicator dot color (if indicator visible)
                indicatorSelectedDotColor(Color.YELLOW)
                //rest of indicator dot color (if indicator visible)
                indicatorDotColor(Color.BLACK)
                
                
                models(
                         // list of all the sliding models 
                         // don't forget to add Id for them
                )
            }
        }

To add infinite sliding you can use infinite(true). The only limitation for infinite scrolling is you need to add a copier function to the builder.

The complete slider builder with infinite scrolling will look like this:

yourEpoxyView.withModels {
            slider {
                id("your slider id")
                cycleDelay(5_000)
                
                indicatorVisible(true)
                indicatorSelectedDotColor(Color.YELLOW)
                indicatorDotColor(Color.BLACK)
                
                models(
                         banners.mapIndexed { index, s ->
                            BannerViewModel_().apply {
                                id(index.toLong())
                                bindImage(s)
                                listener {
                                    showImageUrl(it)
                                }
                            }
                        }
                )
                
                infinite(true)
                copier { oldModel ->
                    oldModel as BannerViewModel_
                    //you have to create a new object and return here
                    BannerViewModel_().apply {
                        id(oldModel.id())
                        bindImage(banners[oldModel.id().toInt()])
                        listener { imageUrl ->
                            showImageUrl(imageUrl)
                        }
                    }
                }
            }
        }

Now run your application!

For further usage please checkout SampleApp

Thanks

Next Steps

  • Add sliding animation
  • Support more indicator customization

Contribution

There are a lot to be done here and I'm more than happy to discuss so:

  • Create issues
  • Send PRs

Any contribution is more than wellcome

License

Slider is MIT-licensed.

slider's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slider's Issues

Using SliderModel_() causes a crash

class MyController(private val onAdClick: (String) -> Unit): EpoxyController() {
    private var ads = emptyList<Ad>()
    fun submit(ads: List<Ad>) {
        this.ads = ads
        requestModelBuild()
    }
    override fun buildModels() {
        val models = ads.map { AdModel(it, onAdClick).id("ad${it.id}") }
        SliderModel_().id("ads").models(models).addTo(this) // here
    }
}
data class AdModel(val ad: Ad, val onAdClick: (String) -> Unit): ViewBindingKotlinModel<ViewAdBinding>(R.layout.view_ad) {
    override fun ViewAdBinding.bind() {
        Glide.with(imageView).load(ad.thumbnailUrl).into(imageView)
        imageView.setOnClickListener { onAdClick(ad.url) }
    }
}

java.lang.NullPointerException
at com.shanazar.myproject.MyFragment$onViewCreated$5$invokeSuspend$$inlined$collect$1.emit(Collect.kt:145)
at kotlinx.coroutines.flow.StateFlowImpl.collect(StateFlow.kt:348)
at kotlinx.coroutines.flow.ReadonlyStateFlow.collect(Unknown Source:2)
at com.shanazar.myproject.MyFragment$onViewCreated$5.invokeSuspend(MyFragment.kt:152)

ViewBindingKotlinModel.kt:
https://github.com/airbnb/epoxy/blob/master/kotlinsample/src/main/java/com/airbnb/epoxy/kotlinsample/helpers/ViewBindingKotlinModel.kt

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.