OnPageChangeListener alpha交叉淡化

Question

关于Android中的交叉淡化有很多问题,但它们都包含动画.我的问题是关于使用ViewPager的OnPageChangeListener进行交叉淡化.

我有一个ViewPager可以有无限数量的视图,但实际上使用大约6或7个视图.没那么多.

ViewPager中的每个视图都有一个背景位图,应该固定并与下一个(或上一个)视图的背景交叉淡入淡出,而不是与视图的其余部分一起滚动.

为了实现这一点,我将背景分离并添加到ArrayList并稍后将它们分配给ImageViews.但是因为我不想冒险让我的Activity最终有大量的ImageViews,我想到了以下结构:

<FrameLayout 
    android:id="@+id/backgroundContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/bottomImage"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="center" />

    <ImageView
        android:id="@+id/middleImage"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="center" />

    <ImageView
        android:id="@+id/topImage"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="center" />

</FrameLayout>

然后将a OnPageChangeListener分配给ViewPager,以将背景分配给ImageView.

@Override
public void onPageSelected(int position) {
    MyLog.i(TAG, "PAGE SELECTED: " + position);

    if(position == 0) {
        _bottomBackground.setImageBitmap(null);
        _topBackground.setImageBitmap(_backgroundStack.get(position+1));
    } else if (position == NUM_ITEMS-1) {
        _bottomBackground.setImageBitmap(_backgroundStack.get(position-1));
        _topBackground.setImageBitmap(null);
    } else {
        _bottomBackground.setImageBitmap(_backgroundStack.get(position-1));
        _topBackground.setImageBitmap(_backgroundStack.get(position+1));
    }

    _middleBackground.setImageBitmap(_backgroundStack.get(position));            

    // Make the top front background transparent 
    _topBackground.setAlpha(0f);
    _currentBackgroundPosition = position;
}

如果我想要交换背景,这样可以正常工作.当用户滑动ViewPager时,我希望背景交叉淡入淡出.我有一个前进滚动工作的淡入淡出,但我不明白为什么向后滚动的淡入某种方式不会给出一个好的结果.在向后滚动期间,中间背景应淡入底部背景.

我怕我错过了什么.我永远不会更改底部背景的alpha,但Log结果始终显示getAlpha()与中间背景完全相同的值.

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    if(_currentBackgroundPosition == position) {
        // scroll forward
        _topBackground.setAlpha(positionOffset)
    } else {
        //scroll backward
        _middleBackground.setAlpha(positionOffset);               
    }

    MyLog.i(TAG, "Bottom BackgroundAlpha: " + _bottomBackground.getAlpha());
    MyLog.i(TAG, "Middle BackgroundAlpha: " + _middleBackground.getAlpha());
    MyLog.i(TAG, "Top BackgroundAlpha: " + _topBackground.getAlpha());
}

等一下!还有一件事我真的无法弄清楚如何修复.虽然前滚动褪色正在起作用.背景中有一个超短暂的闪烁.我认为这是因为我设置onPageSelected方法的方式.

有没有其他方法可以创建/修复此行为？

Answer 1

ViewPager.PageTransformer是你的朋友.我将对你尝试的方法采取不同的方法,但它会导致我理解为你想要的结果 - 滑动左/右滑动内容,但在两个不移动的背景图像之间淡入淡出.

每个Fragment中ViewPager都会有像这样的布局:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:scaleType="center" />
    <LinearLayout
        android:id="@+id/content_area"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- content goes here -->
    </LinearLayout>
</FrameLayout>

并且您将创建一个PageTransformer根据其被刷过的位置操纵布局:

public class CustomPageTransformer implements ViewPager.PageTransformer {
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        View imageView = view.findViewById(R.id.image_view);
        View contentView = view.findViewById(R.id.content_area);

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left
        } else if (position <= 0) { // [-1,0]
            // This page is moving out to the left

            // Counteract the default swipe
            view.setTranslationX(pageWidth * -position);
            if (contentView != null) {
                // But swipe the contentView
                contentView.setTranslationX(pageWidth * position);
            }
            if (imageView != null) {
                // Fade the image in
                imageView.setAlpha(1 + position);
            }

        } else if (position <= 1) { // (0,1]
            // This page is moving in from the right

            // Counteract the default swipe
            view.setTranslationX(pageWidth * -position);
            if (contentView != null) {
                // But swipe the contentView
                contentView.setTranslationX(pageWidth * position);
            }
            if (imageView != null) {
                // Fade the image out
                imageView.setAlpha(1 - position);
            }
        } else { // (1,+Infinity]
            // This page is way off-screen to the right
        }
    }
}

最后把它PageTransformer连接到你的ViewPager:

mViewPager.setPageTransformer(true, new CustomPageTransformer());

我已经在现有的应用程序中对它进行了测试,只要片段布局具有透明背景,它就可以正常工作.