像Pinterest或Tumblr一样向后滑动

Question

有没有人知道Pinterest或Tumblr如何实现"刷卡"方法.

即在Pinterest上,您可以点击新闻Feed上的帖子.比DetailActivity已启动并显示所选帖子的详细信息.您可以按后退按钮返回新闻Feed活动,或者您可以向左滑动(详细信息活动)以返回新闻Feed活动.

视频:http://youtu.be/eVcSCWetnTA

通常我会使用overridePendingTransition(),但overridePendingTransition()需要动画(像资源ID R.anim.foo).仅当用户进行滑动手势时,Pinterest和Tumblr才会启动动画.他们还根据手指移动支持某种"逐帧动画".因此,他们跟踪手指移动的距离,并将过渡动画设置为相应的百分比值.

我知道如何使用"真正的java"动画/ AnimatorSet对象FragmentTransaction来动画片段替换.使用片段我必须覆盖onCreateAnimator(),但我不知道如何使用Activities实现类似的东西.活动有onCreateAnimator()(或类似的东西)吗？也不知道如何滑动行为,因为它现在没有启动动画,但更多的是逐步改变Window/Activity/Fragment的属性或者其他......

有什么建议？

编辑:我在youtube上找到了一个pinterest应用程序的视频:http://youtu.be/eVcSCWetnTA 这就是我想要实现的内容.

我猜Pinterest正在使用Fragments并onCreateAnimator()实现"向后滑动".由于我的应用程序已经在一个活动中已经有Fragment和ChildFragments,因此如果我可以为活动实现它,那将更容易.

再一次:我知道如何检测滑动手势,这不是我要求的.观看youtube视频:http://youtu.be/eVcSCWetnTA

---

更新:我创建了一个小库,它与Pinterest或Tumblrs实现的行为并不完全相同,但对于我的应用程序,这似乎是一个很好的解决方案:https://github.com/sockeqwe/SwipeBack？ source = c

Answer 1

您正在寻找的效果似乎是Android开发人员网站中ViewPager的示例之一.

查看深度页面变换器部分中的http://developer.android.com/training/animation/screen-slide.html#depth-page.它有一个视频和源代码.

使用ViewPager.PageTransformer,您可以决定从一个页面切换到下一个页面时页面的行为方式.

示例与您链接的视频之间的唯一区别是左右似乎是倒置的,但应该是我在问题中链接的YouTube视频中看到的一个很好的起点.必须对两种观点的行动进行讨论.如这段代码所示(第一个参数mPager.setPageTransformer应为reverseDrawingOrder= false).请注意,中间的2个if部分是交换的,position变量处理稍有不同,以便切换侧面.弹性效应留作练习.当你得到它时请分享!

    package com.example.android.animationsdemo;

    import android.support.v4.view.ViewPager;
    import android.view.View;

    public class SinkPageTransformer implements ViewPager.PageTransformer {
            private static float MIN_SCALE = 0.75f;

            public void transformPage(View view, float position) {
                    int pageWidth = view.getWidth();

                    if (position < -1) { // [-Infinity,-1)
                            // This page is way off-screen to the left.
                            view.setAlpha(0);

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

                            // Counteract the default slide transition
                            view.setTranslationX(pageWidth * -position);

                            // Scale the page down (between MIN_SCALE and 1)
                            float scaleFactor = MIN_SCALE
                                            + (1 - MIN_SCALE) * (1 - Math.abs(position));
                            view.setScaleX(scaleFactor);
                            view.setScaleY(scaleFactor);

                    } else if (position <= 1) { // (0,1]
                            // Use the default slide transition when moving to the left page
                            view.setAlpha(1);
                            view.setTranslationX(0);
                            view.setScaleX(1);
                            view.setScaleY(1);

                    } else { // (1,+Infinity]
                            // This page is way off-screen to the right.
                            view.setAlpha(0);
                    }
            }
    }

如果带有示例的页面变得很糟糕,这里是该部分的原始代码:

    public class DepthPageTransformer implements ViewPager.PageTransformer {
        private static float MIN_SCALE = 0.75f;

        public void transformPage(View view, float position) {
            int pageWidth = view.getWidth();

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 0) { // [-1,0]
                // Use the default slide transition when moving to the left page
                view.setAlpha(1);
                view.setTranslationX(0);
                view.setScaleX(1);
                view.setScaleY(1);

            } else if (position <= 1) { // (0,1]
                // Fade the page out.
                view.setAlpha(1 - position);

                // Counteract the default slide transition
                view.setTranslationX(pageWidth * -position);

                // Scale the page down (between MIN_SCALE and 1)
                float scaleFactor = MIN_SCALE
                        + (1 - MIN_SCALE) * (1 - Math.abs(position));
                view.setScaleX(scaleFactor);
                view.setScaleY(scaleFactor);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

Answer 2

更新: 修复了此项目的内存使用问题,并将滑回样式更改为iOS.

我写了一个完全像Pinterest和tumblr的演示,你只需扩展BaseActivity,你就可以获得一个滑动效果,工作顺利!

检查一下:https://github.com/chenjishi/SlideActivity

和截图:

Answer 3

我找到了一个基于SwipeBack的GitHub项目,如Pinterest.

它确实是一个很好的开源项目,可以解决您的问题.它可以根据您的需要进行操作,例如按后退或简单滑动即可转到上一屏幕.由于这个项目有选择权

1.从左向右滑动

2.从右向左滑动

3.从下滑到顶部

https://github.com/Issacw0ng/SwipeBackLayout

还可以从Google Play安装此演示应用程序.

https://play.google.com/store/apps/details?id=me.imid.swipebacklayout.demo

附上截图: -

希望这会帮助你.

Answer 4

所以我想我自己找到了解决方案：

首先：Pinterest 确实使用了带有自定义页面转换器的 ViewPager，就像@frozenkoi 在他的回答中提到的那样。您可以在 pinterest 应用程序中看到视图寻呼机的过度滚动边缘效果。

@Amit Gupta 指出了让活动顺利进行的库。它的概念与各种导航抽屉的概念非常相同，并将主题设置为半透明。他们滑动布局。但这并不完全是我想要的，因为它将顶部活动向右滑动，而不是简单地调用 finish()。但下面的活动不会被动画化。

解决方案是（我猜这就是 Tumblr 所做的）使用动画对象编写您自己的动画并逐步对其进行动画处理。这可以通过ActivityOptions来完成。我认为这将是解决方案。