具有 4 向滑动手势的自定义 Android 视图答案

【问题标题】：A custom Android View with 4-direction swipe gesture具有 4 向滑动手势的自定义 Android 视图
【发布时间】：2014-06-04 17:20:49
【问题描述】：

我正在开发一个显示一系列卡片的 Android 应用程序。每张卡片几乎占据了整个屏幕。我希望用户能够通过左右滑动来查看上一张和下一张卡片，因为 ViewPager 运行良好。

但是我也希望用户能够上下滑动卡片来喜欢/不喜欢它。向上/向下滑动手势应根据用户的手势向上/向下移动卡片。卡片向上/向下滑动后，应从卡片列表中删除。

我在网上搜索了解决方案或服装视图。但我发现的大多数解决方案都是用于双向滑动（左/右或上/下）。有没有很好的解决方案或 4 向滑动视图的库？

【问题讨论】：

左/右或上/下：如果你有两个，混合他们两个

标签： android android-viewpager swipe

【解决方案1】：

经过一些在线研究，我想出了以下效果很好的实现。 CardView 类扩展了可以在类中使用的 Fragment。

    public class CardView extends Fragment {
        private static float CARDS_SWIPE_LENGTH = 250;
        private float originalX = 0;
        private float originalY = 0;    
        private float startMoveX = 0;
        private float startMoveY = 0;

        public CardView() {
            super();
        }

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

            rootView.setOnTouchListener(new View.OnTouchListener() {
                public boolean onTouch(View view, MotionEvent event) {
                        final float X = event.getRawX();
                        final float Y =  event.getRawY();
                        float deltaX = X - startMoveX;
                        float deltaY = Y - startMoveY;
                        switch (event.getAction() & MotionEvent.ACTION_MASK) {
                            case MotionEvent.ACTION_DOWN:
                                startMoveX = X;
                                startMoveY = Y;
                                break;
                            case MotionEvent.ACTION_UP:
                                childView.getBackground().setColorFilter(R.color.color_card_background, PorterDuff.Mode.DST);
                                if ( Math.abs(deltaY) < CARDS_SWIPE_LENGTH ) {
                                    rootView.setX(originalX);
                                    rootView.setY(originalY);
                                } else if ( deltaY > 0 ) { 
                                    onCardSwipeDown();
                                } else {
                                    onCardSwipeUp();
                                }
                                break;
                            case MotionEvent.ACTION_POINTER_DOWN:
                                break;
                            case MotionEvent.ACTION_POINTER_UP:
                                break;
                            case MotionEvent.ACTION_MOVE:
                                int newColor = 0;
                                if ( deltaY < 0 ) {
                                    int rb = (int)(255+deltaY/10);
                                    newColor = Color.argb(170, rb, 255, rb);
                                } else {
                                    int gb = (int)(255-deltaY/10);
                                    newColor = Color.argb(170, 255, gb, gb);                                
                                }
                                rootView.getBackground().setColorFilter(newColor, PorterDuff.Mode.DARKEN);
                                rootView.setTranslationY(deltaY);
                                break;
                        }
                        rootView.invalidate();
                    return true;
                }
            });
            return rootView;
        }

        protected void onCardSwipeUp() {
            Log.i(AppUtil.APP, "Swiped Up");
        }

        protected void onCardSwipeDown() {
            Log.i(AppUtil.APP, "Swiped Down");
        }

    }
}

【讨论】：

我尝试创建一个独立的视图，供其他人使用。它还没有完成，它可能有一些问题，但你可以在这里查看它：link 是的，我尝试启用水平和垂直滑动。
我在这里尝试了类似的方法，但我也遇到了问题。你能看看吗？ stackoverflow.com/q/27708503/878126
@shahins，出色的解决方案。 +1 这个极好的答案。它节省了我很多时间。再次非常感谢您。

【解决方案2】：

您可以使用 ViewPager 在卡片之间进行切换。他们可以@Override Up 和 Down 的motionEvents 来用你的卡片做任何你想做的事情。您可以将它们存储在 ArrayAdapter 中以在它们之间切换。当用户向下或向上滑动时，您从适配器中移除卡片并使用 viewPager.setCurrentItem(viewPager.getCurrentItem() +1) 转到下一张卡片。

http://developer.android.com/reference/android/view/MotionEvent.html http://developer.android.com/reference/android/support/v4/view/ViewPager.html

【讨论】：