CycleViewPager2

Address: github.com/wangpeiyuan…

Side note: a similar library was implemented a few years ago and it was called CircleViewPager, CycleViewPager2 and the idea is exactly the same, just change the ViewPager to ViewPager2.

Introduction

Use ViewPager2 to implement infinite rotation effect, can be used to implement banner.

Screenshots

Features

  • Support unlimited automatic rotation
  • Support dot indicator and custom
  • Supports the switching effect of three items on one screen

Getting started

Add the following code to build.gradle on the root node of your project

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

Add it in your project’s build.gradle

dependencies {
    implementation 'com. Making. Wangpeiyuan: CycleViewPager2: v1.0.2'
}
Copy the code

Note: You also need to add your own ViewPager2 dependency. Such as:

dependencies {
    implementation "Androidx. Viewpager2: viewpager2:1.0.0."
}
Copy the code

Click here for the latest version of ViewPager2

Usage

  1. In the XML layout file:
<com.wangpeiyuan.cycleviewpager2.CycleViewPager2
        android:id="@+id/banner"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code
  1. inheritanceCyclePagerAdapter 或 CyclePagerFragmentAdapterImplement related methods, withRecyclerView 的 AdapterBasically similar, such as:
private inner class MyCyclePagerAdapter : CyclePagerAdapter<PagerViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerViewHolder {
        return PagerViewHolder(LayoutInflater.from(parent.context)
                .inflate(R.layout.fragment_pager, parent, false)
        )
    }

    override fun getRealItemCount(): Int = items.size

    override fun onRealBindViewHolder(holder: PagerViewHolder, position: Int) {
        holder.ivPager.setImageResource(items[position])
        holder.tvTitle.text = position.toString()
    }
}

private inner class PagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    var ivPager: ImageView = itemView.findViewById(R.id.iv_pager)
    var tvTitle: TextView = itemView.findViewById(R.id.tv_title)
} 
Copy the code
  1. throughCycleViewPager2Set related parameters.
// Set adapter, The adapter must be inherited from CyclePagerAdapter or CyclePagerFragmentAdapter cycleViewPager2. SetAdapter (adapter) / / set the indicator CycleViewPager2. SetIndicator (indicator) / / set automatically wheel interval cycleViewPager2. SetAutoTurning (autoTurningTime) / / set switch effect, Can multiple effect combination cycleViewPager2. SetPageTransformer (compositePageTransformer) / / add spacing CycleViewPager2. AddItemDecoration (itemDecoration) / / add a switch to monitor cycleViewPager2.registerOnPageChangeCallback(pageChangeCallback) cycleViewPager2.setOffscreenPageLimit(limit)

cycleViewPager2.setOrientation(orientation)
Copy the code

Or use CycleViewPager2Helper.

CycleViewPager2Helper(banner) .setAdapter(adapter) .setMultiplePagerScaleInTransformer( nextItemVisiblePx.toInt(), CurrentItemHorizontalMarginPx. ToInt (), 0.1 f) setDotsIndicator (dotsRadius, Color RED, Color WHITE, dotsPadding, 0, dotsBottomMargin.toInt(), 0, DotsIndicator.Direction.CENTER ) .setAutoTurning(3000L) .build()Copy the code
  1. More Special Effects
  • Indicator, currently the library is only a simple implementation of the dot IndicatorDotsIndicatorMore effects can be achievedIndicatorInterface customization. For details, seeDotsIndicatorThe implementation of the.
  • MultiplePagerScaleInTransformer, to achieve a screen of multiple effects, this effect needs to cooperateMarginItemDecoration(The same effect can be achieved by setting the spacing between items).
  • More switching effects (PageTransformer), need to achieve their ownViewPager2.PageTransformer.

License

The Apache License, Version 2.0