Android - ViewPager 动画（纸叠）

Question

我有一些项目要显示，目前我使用带有滚动动画的列表视图。但是，我想制作 Shazam Discover 面板的相同动画，我不知道我是否必须使用 ListView 或其他 Widget... 任何想法 ？ 提前致谢 ！

Answer 1

我找到了两个可以找到好东西的地方。

1. Github Best UI

2. 坎波沙Everything You need for Good UI

希望这两个对你有帮助;)

Answer 2

感谢这两个链接，

我解决了我自己的问题:)，所以我在这里发布解决方案

为了重现上面相同的动画（如纸叠），我最终使用了垂直的viewpager 和pagetransformer animation

所以我有：

• ViewPager：包含要显示的项目
• PagerAdapter：实例化每个项目的适配器
• PageTransformer：幻灯片动画
• 片段：包含 ViewPager

纸叠动画

这里的第一个困难是创建纸叠动画，这意味着将旧项目堆叠在当前的后面......在每个项目之间创建一个“z-index”顺序，否则旧项目将在前面并且后面的电流。 （我说得通吗？：P）

所以我决定在 ViewPager 的每个视图中添加一个标签，并将其位置作为值，并在 PageTransformer 上使用它来定义translationZ风景。所以 ViewPager 的第一个项目视图，因此 position = 0，有一个 z-index = 0，第二个 z-index = 1...所以创建一个纸叠！​​！

适当的“破坏”

第二个困难是在完美的时刻隐藏和显示上一个项目......因为默认情况下 ViewPager 只显示 2 个视图，并在加载第三个时调用 destroyItem。所以我们看到了最后一个视图的破坏......在我的第一条消息的视频中我们可以看到，当当前视图在其他视图前面经过时，最后一个视图被删除，那么如何做到这一点？

我决定在我的 PagerAdapter 中创建一个ArrayList<View>，并在调用instantiateItem 函数时添加每个视图。我还创建了一个 Getter 来从我的 Fragment 中获取 ArrayList。在我的 Fragment 中，我将 addOnPageChangeListener 添加到了我的 ViewPager。有了这个监听器，我可以确定显示我的 ViewPager 的哪个视图（带有位置和视图的 ArrayList）和 positionOffset，通过这两个变量，我可以在完美的时刻隐藏或显示以前的视图。 ..

代码

我在下面澄清了我的代码以使其具有通用性

片段

public class MyFragment extends Fragment {

private ViewPager viewPager;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment, container, false);

    viewPager = (ViewPager) rootView.findViewById(R.id.viewpager);

    final MyPagerAdapter pagerAdapter = new MyPagerAdapter(getActivity());
    viewPager.setAdapter(pagerAdapter);
    viewPager.setPageTransformer(true, new PaperStackTransformer());
    viewPager.setRotation(90); // Vertical viewpager
    viewPager.setOffscreenPageLimit(10); // To display more than 2 view (and 10 to avoid bugs...)

    final ArrayList<View> views = MyPagerAdapter.getViews();

    final float[] previousPositionOffset = new float[1];
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            if (positionOffset > 0.9 || positionOffset < 0.1) return;

            float dif = previousPositionOffset[0] - positionOffset;

            // Change values (0.40 and 0.70) to conform to your PageViewer view
            if (positionOffset > 0.40 && positionOffset < 0.70 ){
                // at this moment current view hide the previous
                if (dif < 0) {
                    // If we scroll down we hide the previous view
                    int p = position - 2;
                    if (p >= 0 && views.get(p).getVisibility() == View.VISIBLE) {
                        views.get(p).setVisibility(View.INVISIBLE);
                    }
                }
                else if (dif > 0) {
                    // If we scroll up we show the previous view
                    int p = position - 2;
                    if (p >= 0 && views.get(p).getVisibility() == View.INVISIBLE) {
                        views.get(p).setVisibility(View.VISIBLE);
                    }
                }
            }
           previousPositionOffset[0] = positionOffset;
        }

        @Override
        public void onPageSelected(int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    return rootView;
}

}

PagerAdapter

public class MyPagerAdapter extends PagerAdapter {

private ArrayList<View> views;

...

public ArrayList<View> getViews() {
    return views;
}

...

@Override
public Object instantiateItem(ViewGroup container, int position) {

    ...

    View view = inflater.inflate(R.layout.view, null, false);

    ...

    view.setTag(position); // To the "z-index" order on PageTransformer
    view.setRotation(-90f); // Vertical ViewPager
    ((ViewPager) container).addView(view); 

    views.add(view); // add the view to the list
    return view;
}

...

}

页面转换器

public class PaperStackTransformer implements ViewPager.PageTransformer {

private static final float MIN_SCALE = 0.9f;

public void transformPage(View view, float position) {

    if (position < -1) { // [-Infinity,-1)
        view.setTranslationX(1150 * -position);

        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);

    } else if (position <= 0) { // [-1,0]
        view.setAlpha(1 - position);

        view.setTranslationX(1150 * -position);

        float scaleFactor = MIN_SCALE
                + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);

    } else if (position <= 1) { // (0,1]
        view.setAlpha(1);
        view.setTranslationX(1);
        view.setScaleX(1);
        view.setScaleY(1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) view.setTranslationZ((int) view.getTag()*1.0f);

    } else { // (1,+Infinity]
        view.setAlpha(1);
    }
}

}

结论

所以 listview 不是解决方案，我希望这个 sn-p 可以帮助一些人。 my paper stack animation :D