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

时间:2014-06-04 17:20:49

标签: android android-viewpager swipe

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

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

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

2 个答案:

答案 0 :(得分:8)

经过一些在线研究后,我提出了以下实施方案,效果很好。 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");
        }

    }
}

答案 1 :(得分:1)

您可以使用ViewPager在卡片之间切换。他们可以@Override上下动作活动用你的卡做任何你想做的事情。您可以将它们存储在ArrayAdapter中以在它们之间切换。当用户向下滑动DOWN或UP时,从适配器中取出卡并使用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