定制的Android视图与4方向轻扫手势 [英] A custom Android View with 4-direction swipe gesture
问题描述
我工作的一个Android应用程序,显示了一系列的卡。每张卡花费几乎整个屏幕。我希望用户能够通过刷卡左,右和该ViewPager的工作很好,以查看previous和下一个卡。
I am working on an Android App which shows a series of cards. Each card almost takes the whole screen. I want the user to be able to view the previous and next cards by swiping left and right and for that ViewPager is working nicely.
不过,我也希望用户能够刷卡上下卡喜欢/不喜欢一个吧。挥击向上/向下手势应该根据用户的手势/向下的卡向上移动。后一个刷卡上/下,应当从卡的列表中删除。
However I also want the user to be able to swipe up and down a card to like/dislike a it. The swipe up/down gesture should move up/down the card according to the user's hand gesture. After a card is swiped up/down, it should be removed from the list of cards.
我在网上搜索了一个解决方案或服装景色。不过,最让我找到了解决方案,为2方位的刷卡(或左/右或上/下)。有没有一个很好的解决方案或库的4方向滑动查看?
I searched online for a solution or a costume view. But most of the solutions I found are for 2-directional swipes (either left/right or up/down). Is there a nice solution or a library for a 4-directional Swipe View?
推荐答案
在一些在线调查,我想出了下面的实现,它工作得很好。所述CardView类扩展片段可以在一个类中使用。
After some online research, I came up with the following implementation which works nicely. The CardView class extends Fragment which can be used in a class.
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");
}
}
}
这篇关于定制的Android视图与4方向轻扫手势的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!