OnPageChangeListener alpha交叉淡入淡出

Android中有很多关于淡入淡出的问题,但都包含animation。 我的问题是关于使用ViewPager的OnPageChangeListener进行淡入淡出。

我有一个ViewPager可以有无限数量的意见,但在实践中使用约6或7个意见。 那里不多。

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

为了达到这个目的,我分离了背景并添加到一个ArrayList中,稍后将它们分配给ImageViews。 但是因为我不想冒险让我的活动结束与众多的ImageView的机会我想到了以下结构:

<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> 

然后,将一个OnPageChangeListener分配给ViewPager以将背景分配给ImageViews。

 @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方法的方式发生。

有什么方法可以创build/修复这种行为吗?

ViewPager.PageTransformer是你的朋友。 我将采取一种不同的方法来尝试你的想法,但是结果会让我理解你想要的结果 – 向左/向右滑动内容,但在两个不移动的背景图像之间淡入淡出。

ViewPager中的每个Fragment都有如下布局:

 <?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> 

您将创build一个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 } } } 

最后把这个ViewPager连接到你的ViewPager

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

我已经在现有的应用程序中进行了testing,只要片段布局具有透明背景,效果就会很好。