OnPageChangeListener阿尔法交叉淡入淡出 [英] OnPageChangeListener alpha crossfading

问题描述

有很多问题是关于交叉淡入淡出的机器人，但它们都包括动画。我的问题是有关使用ViewPager的OnPageChangeListener淡入淡出。

There are a lot of questions with regard to crossfading in Android, but they all include animations. My question is about crossfading using the OnPageChangeListener of a ViewPager.

我有一个ViewPager可能有无限多的观点，但在实践中使用大约6或7次。没有太多对那里发生的。

I have a ViewPager which could have an unlimited number of views, but in practice uses about 6 or 7 views. Not much going on there.

在ViewPager每个视图都有一个背景位图应该是固定的，交叉淡入淡出的下一个（或previous）查看，而不是一起查看的其他部分滚动的背景。

Each View in the ViewPager has a background Bitmap which should be fixed and crossfade with the background of the next (or previous) View instead of scrolling along with the rest of the View.

要做到这一点，我脱钩的背景，并加入到一个ArrayList并将其分配给ImageViews后。但因为我不想冒险，我的活动将结束与众多ImageViews我以为以下结构的机会：

To achieve this I decoupled the backgrounds and add to an ArrayList and assign them to ImageViews later. But since I don't want to risk the chance that my Activity will end up with numerous ImageViews I thought of the following structure:

<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

Then a OnPageChangeListener is assigned to the ViewPager to assign the backgrounds to the 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。我已经得到了褪色的正向滚动的工作​​，但我不明白为什么褪色的向后滚动不知何故没有给出一个好的结果。在一个向后滚动，中间的背景应该消失在底部的背景。

This works fine if I would've liked to just swap the backgrounds. I want the backgrounds to cross fade into each other while the user swipes the ViewPager. I've got the fade for a forward scroll working, but I don't understand why the fade for the backward scroll somehow doesn't give a good result. During a backward scroll the middle background should fade into the bottom background.

我怕我失去了一些东西。我从来没有改变底部背景的Alpha，但一直记录结果显示为完全相同的值getAlpha（）作为中间的背景。

I'm afraid I'm missing something. I'm never changing the alpha of the bottom background, but the Log results always show the exact same value for getAlpha() as for the middle background.

@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 方法。

And wait! There's one more thing I really am not able to figure out how to fix. Although the forward scroll fade is working. There's a super short flickering in the background. I assume this is happening because of way I set up the onPageSelected method.

有另一种方式我怎么可以创建/解决这个问题？

Is there another way how I can create/fix this behavior?

推荐答案

<一个href="http://developer.android.com/reference/android/support/v4/view/ViewPager.PageTransformer.html"><$c$c>ViewPager.PageTransformer是你的朋友。我会采取不同的方法给你试了一下，但它会导致我的理解睡觉你想要的结果 - 左划屏/右挥笔的内容，但有两个背景图片不动的消失。

ViewPager.PageTransformer is your friend. I'm going to take a different approach to what you tried, but it results in what I understand to bed your desired result - swiping left/right swipes the content, but fades between two background images that don't move.

每个片段在 ViewPager 将有像这样的布局：

Each Fragment in the ViewPager will have a layout like so:

<?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 的操控布局取决于它被偷走的位置：

And you will create a PageTransformer that manipulates the layout depending the position it has been swiped:

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());

我在现有的应用程序测试，它工作得很好，只要片段布局有一个透明的背景。

I've tested it in an existing app and it works well as long as the fragment layouts have a transparent background.

这篇关于OnPageChangeListener阿尔法交叉淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！