滑动选择Android

我想像下面的图像一样进行查看…轻扫以在ANDROID中选择。

在此处输入图像描述

我在github上find了一个库:

https://github.com/kikoso/Swipeable-Cards

http://grishma102.blogspot.in/2014/04/tinder-app-like-control-with-animation.html

但是在这个lib中没有选项可以在CARD上显示LIKENOPE ,就像在上面的图像中显示一样

任何人都可以帮助我如何在这个库中添加这些未来。


编辑于10-10-2014


我已经创建了onTouchListener中的视图组类

我想在onTouchListener中使用onClickListener

我的问题是当我在点击事件之前触摸左右角之前一段时间它的旋转视图然后单击是工作,所以我如何在点击工作时停止它另一个问题是当animation停止它也是火点击事件

任何人帮我改进下面的代码?

this.imageContainerLayout.setOnTouchListener(new OnTouchListener() { private long startClickTime; private float x1; private float y1; private float x2; private float y2; private float _dx; private float _dy; @Override public boolean onTouch(View v, MotionEvent event) { x_cord = (int) event.getRawX(); y_cord = (int) event.getRawY(); Log.e("start x_cord-->" + x_cord, "y_cord--->" + y_cord); boolean defaultResult = v.onTouchEvent(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x = (int) event.getRawX(); y = (int) event.getRawY(); this.startClickTime = Calendar.getInstance() .getTimeInMillis(); x1 = event.getRawX(); y1 = event.getRawY(); return true; case MotionEvent.ACTION_MOVE: x_cord = (int) event.getRawX(); // Updated for more // smoother animation. y_cord = (int) event.getRawY(); Log.e("move x_cord-->" + x_cord, "y_cord--->" + y_cord); CardView_new.this.setX(event.getRawX() - x); CardView_new.this.setY(event.getRawY() - y); if (x_cord >= screenCenter) { /** * rotate image * */ CardView_new.this .setRotation((float) (0.02454369260617026D * (x_cord - screenCenter))); if (x_cord > (screenCenter + (screenCenter / 2))) { buttonLike.setAlpha(1); buttonDislike.setAlpha(0); if (x_cord > (windowwidth - (screenCenter / 4))) { Likes = 2; moveIs = true; } else { Likes = 0; moveIs = true; } } else { Likes = 0; buttonLike.setAlpha(0); moveIs = false; } buttonDislike.setAlpha(0); } else { // rotate /** * rotate image * */ CardView_new.this .setRotation((float) (0.02454369260617026D * (x_cord - screenCenter))); if (x_cord < (screenCenter / 2)) { buttonDislike.setAlpha(1); buttonLike.setAlpha(0); if (x_cord < (screenCenter / 4)) { Likes = 1; moveIs = true; } else { Likes = 0; moveIs = true; } } else { Likes = 0; buttonDislike.setAlpha(0); moveIs = false; } buttonLike.setAlpha(0); } return true; case MotionEvent.ACTION_UP: x_cord = (int) event.getRawX(); y_cord = (int) event.getRawY(); buttonDislike.setAlpha(0); buttonLike.setAlpha(0); x2 = event.getRawX(); y2 = event.getRawY(); _dx = x2 - x1; _dy = y2 - y1; long l = Calendar.getInstance().getTimeInMillis() - this.startClickTime; if ((l < 400L) && distance(x1, y1, x2, y2) < MAX_CLICK_DISTANCE) { Log.e("start Activity", "start activity"); CardView_new.this.setX(0); CardView_new.this.setY(0); CardView_new.this.setRotation(0); if (moveIs == false) { Intent i = new Intent((Activity) getContext(), DetailsActivity.class); ((Activity) getContext()).startActivity(i); } return true; } else if (Likes == 0) { CardView_new.this.setX(0); CardView_new.this.setY(0); CardView_new.this.setRotation(0); if (moveIs) { moveIs = true; return true; } else { moveIs = false; return false; } } else if (Likes == 1) { parentView.removeView(CardView_new.this); CardView_new.this.mOnCardDimissedDelegate .onLike(CardView_new.this); Log.e("Likes==1", "Likes==1"); moveIs = true; return true; } else if (Likes == 2) { parentView.removeView(CardView_new.this); CardView_new.this.mOnCardDimissedDelegate .onDislike(CardView_new.this); Log.e("Likes==2", "Likes==2"); moveIs = true; return true; } default: return false; } } }); 

我使用过这个库: https : //github.com/kikoso/Swipeable-Cards

你需要修改它。 修改之后,你将实现它(见下面的截图)。 让我解释。

1.)std_card_inner.xml

此xml用于对库的适配器类中的卡行进行充气。 我已修改它以添加两个包含喜欢和不喜欢按钮的图像视图和一个textview,以在用户单击任何imageview时显示文本“喜欢”或“不喜欢”。

                   

2.)SimpleCardStackAdapter.java

这是卡的适配器。 我修改了它,为喜欢和不喜欢的imageview和textview添加了点击监听器来显示文本。 当用户点击按钮时,我在卡片模型中添加了一个布尔variables,用于存储喜欢/不喜欢的值。 真的是喜欢和假的不喜欢。

 package com.andtinder.view; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import com.andtinder.R; import com.andtinder.model.CardModel; public final class SimpleCardStackAdapter extends CardStackAdapter { public SimpleCardStackAdapter(Context mContext) { super(mContext); } @Override public View getCardView(int position, final CardModel model, View convertView, ViewGroup parent) { if(convertView == null) { LayoutInflater inflater = LayoutInflater.from(getContext()); convertView = inflater.inflate(R.layout.std_card_inner, parent, false); assert convertView != null; } ((ImageView) convertView.findViewById(R.id.image)).setImageDrawable(model.getCardImageDrawable()); ((TextView) convertView.findViewById(R.id.title)).setText(model.getTitle()); ((TextView) convertView.findViewById(R.id.description)).setText(model.getDescription()); final TextView like_dislike_text = ((TextView) convertView.findViewById(R.id.like_dislike_text)); if(model.isLike()) like_dislike_text.setText("Liked"); else like_dislike_text.setText("DisLiked"); ((ImageView) convertView.findViewById(R.id.like)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub model.setLike(true); like_dislike_text.setText("Liked"); } }); ((ImageView) convertView.findViewById(R.id.dislike)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub model.setLike(false); like_dislike_text.setText("DisLiked"); } }); return convertView; } } 

3.)CardModel.java

最后,在这里我添加了booleanvariables,它存储了like / dislike的值。

 private boolean isLike = false; public boolean isLike() { return isLike; } public void setLike(boolean isLike) { this.isLike = isLike; } 

这是最终结果:

截图1

在此处输入图像描述

截图2

在此处输入图像描述

在Swipecard库的帮助下,我制作了像tinder刷卡animation的UI。

你可以在这里下载例子,我在那里一步一步解释。

在此处输入图像描述

在此处输入图像描述

我得到的结果是喜欢不同的按钮左右翻转图像。

使用此滑动卡,如tinder滑动样本 。

MainActivity.java:

MyAppAdapter getView()方法内,添加以下代码:

  viewHolder.likeImg.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "click", Toast.LENGTH_SHORT).show(); flipMethodRight(80.00f); } }); viewHolder.unlikeImg.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "click", Toast.LENGTH_SHORT).show(); flipMethodLeft(-80.00f); } }); 

MyAppAdapter class之外添加以下代码:

  void flipMethodRight(float scrollProgressPercent) { flingContainer.getTopCardListener().selectRight(); View view = flingContainer.getSelectedView(); view.findViewById(R.id.background).setAlpha(0); view.findViewById(R.id.item_swipe_left_indicator).setAlpha(scrollProgressPercent > 0 ? scrollProgressPercent : 0); } void flipMethodLeft(float scrollProgressPercent) { flingContainer.getTopCardListener().selectLeft(); View view = flingContainer.getSelectedView(); view.findViewById(R.id.background).setAlpha(0); view.findViewById(R.id.item_swipe_right_indicator).setAlpha(scrollProgressPercent < 0 ? -scrollProgressPercent : 0); } 

感谢@nirav kalola为这个样本。

使用viewpager,并更改OnPageChangeListener。

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

只是重载onPageScrolled(int position,float positionOffset,int positionOffsetPixels)方法。 int与适配器上的项目索引相关,因此您可以使用它来标识图像。

例:

 _viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i2) { System.out.println("SWIPING!!!!"); } @Override public void onPageSelected(int i) { System.out.println("SELECTED!!!!"); } @Override public void onPageScrollStateChanged(int i) { System.out.println("CHANGED!!!!"); } }); 

创建四个新的全局浮点variablesx_cord,y_cord,x_cordIn和y_cordIn。

 ainerLayout.setOnTouchListener(new OnTouchListener() { private long startClickTime; private float x1; private float y1; private float x2; private float y2; private float _dx; private float _dy; @Override public boolean onTouch(View v, MotionEvent event) { boolean defaultResult = v.onTouchEvent(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x_cord = x_cordIn = event.getRawX(); y_cord = y_cordIn = event.getRawY(); x1 = (int) event.getRawX(); y1 = (int) event.getRawY(); this.startClickTime = Calendar.getInstance().getTimeInMillis(); return true; case MotionEvent.ACTION_MOVE: x_cord = event.getRawX(); y_cord = event.getRawY(); float xPos = myRelView.getX() - (x_cordIn - x_cord); float yPos = myRelView.getY() - (y_cordIn - y_cord); CardView_new.this.setX(xPos); CardView_new.this.setY(yPos); if (x_cord >= screenCenter) { /** * rotate image * */ CardView_new.this.setRotation((float) (xPos * (Math.PI / 32))); if (x_cord > (screenCenter + (screenCenter / 2))) { buttonLike.setAlpha(1); buttonDislike.setAlpha(0); if (x_cord > (windowwidth - (screenCenter / 4))) { Likes = 2; moveIs = true; } else { Likes = 0; moveIs = true; } } else { Likes = 0; buttonLike.setAlpha(0); moveIs = false; } buttonDislike.setAlpha(0); } else { // rotate /** * rotate image * */ CardView_new.this.setRotation((float) (xPos * (Math.PI / 32))); if (x_cord < (screenCenter / 2)) { buttonDislike.setAlpha(1); buttonLike.setAlpha(0); if (x_cord < (screenCenter / 4)) { Likes = 1; moveIs = true; } else { Likes = 0; moveIs = true; } } else { Likes = 0; buttonDislike.setAlpha(0); moveIs = false; } buttonLike.setAlpha(0); } return true; case MotionEvent.ACTION_UP: x_cord = (int) event.getRawX(); y_cord = (int) event.getRawY(); buttonDislike.setAlpha(0); buttonLike.setAlpha(0); x2 = event.getRawX(); y2 = event.getRawY(); _dx = x2 - x1; _dy = y2 - y1; long l = Calendar.getInstance().getTimeInMillis() - this.startClickTime; if ((l < 400L) && distance(x1, y1, x2, y2) < MAX_CLICK_DISTANCE) { Log.e("start Activity", "start activity"); CardView_new.this.setX(0); CardView_new.this.setY(0); CardView_new.this.setRotation(0); if (moveIs == false) { Intent i = new Intent((Activity) getContext(), DetailsActivity.class); ((Activity) getContext()).startActivity(i); } return true; } else if (Likes == 0) { CardView_new.this.setX(0); CardView_new.this.setY(0); CardView_new.this.setRotation(0); if (moveIs) { moveIs = true; return true; } else { moveIs = false; return false; } } else if (Likes == 1) { parentView.removeView(CardView_new.this); CardView_new.this.mOnCardDimissedDelegate .onLike(CardView_new.this); Log.e("Likes==1", "Likes==1"); moveIs = true; return true; } else if (Likes == 2) { parentView.removeView(CardView_new.this); CardView_new.this.mOnCardDimissedDelegate .onDislike(CardView_new.this); Log.e("Likes==2", "Likes==2"); moveIs = true; return true; } default: return false; } } }); 

使用RossDeckView ,一个允许在任何方向滑动的精简版。

在此处输入图像描述