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

Question

我正在开发一款显示一系列卡片的Android应用程序.每张卡几乎占据整个屏幕.我希望用户能够通过向左和向右滑动来查看上一张和下一张卡,因为ViewPager工作得很好.

然而,我还希望用户能够在卡上上下滑动以喜欢/不喜欢它.向上/向下滑动手势应根据用户的手势向上/向下移动卡.向上/向下刷卡后,应将其从卡列表中删除.

我在网上搜索解决方案或服装视图.但我发现的大多数解决方案都是针对双向滑动(左/右或上/下).是否有一个很好的解决方案或4方向滑动视图库？

Answer 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");
        }

    }
}