siralam / LoopingViewPager

A ViewPager and PagerAdapter combination that support auto scroll, infinite loop and page indicators.
532 stars 64 forks source link

Use with custom PageTransformer #36

Open TothCsanad opened 3 years ago

TothCsanad commented 3 years ago

Hi Sira,

I"m trying to use your library with a custom PageTransformer (https://developer.android.com/training/animation/screen-slide).
The trick used for infinite scroll (smoothScroll: false) and custom transition seem to conflict. The content disappears for a short time during the last > first flip. Do you have any idea how to solve this problem?

Thanks and regards, Csanad

viewpager

siralam commented 3 years ago

After some investigation, I think there are some problems with PageTransformer and ViewPager's setCurrentItem with smoothScroll being false.

Currently, I cannot find a solution, but in the future I will change it to base on ViewPager2 to see if the problem will go away.

siralam commented 3 years ago

Actually I think the sample implementation of PageTransformer assumes a very simple use case without thinking the case of setCurrentItem(n, false).

For example, if I change the code of ZoomOutPageTransformer to below, the problem you mentioned will go away:

private const val MIN_SCALE = 0.85f
private const val MIN_ALPHA = 0.5f

class ZoomOutPageTransformer : ViewPager.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            val pageHeight = height
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    reset(view)
                }
                position <= 1 -> { // [-1,1]
                    // Modify the default slide transition to shrink the page as well
                    val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
                    val vertMargin = pageHeight * (1 - scaleFactor) / 2
                    val horzMargin = pageWidth * (1 - scaleFactor) / 2
                    translationX = if (position < 0) {
                        horzMargin - vertMargin / 2
                    } else {
                        horzMargin + vertMargin / 2
                    }

                    // Scale the page down (between MIN_SCALE and 1)
                    scaleX = scaleFactor
                    scaleY = scaleFactor

                    // Fade the page relative to its size.
                    alpha = (MIN_ALPHA +
                            (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    reset(view)
                }
            }
        }
    }

    private fun reset(view: View) {
        view.apply {
            alpha = 1f
            translationX = 0f
            scaleX = 1f
            scaleY = 1f
        }
    }
}

Though there are still problems - I can somehow peek the left item when scrolling backward.

So I think may be the problem lies in the incomplete implementation of the PageTransformer.

Therefore before going ahead, I think I need to understand how to implement transformPage(); Or let someone who understands to help.