滑动选择安卓 [英] Swipe To Choose Android
本文介绍了滑动选择安卓的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想制作如下图所示的视图...在 ANDROID 中滑动以选择.
I want to make view like below image... swipe to choose in ANDROID.
我在 github 上找到了一个库:
i found one library on github:
https://github.com/kikoso/Swipeable-Cards
http://grishma102.blogspot.在/2014/04/tinder-app-like-control-with-animation.html
但是在这个库中，没有选项可以在 CARD 上显示图像 LIKED 或 NOPE，就像上图所示
but in this lib there no option to show image LIKED or NOPE over CARD, just like showing in above image
谁能帮我在这个库中添加这些未来.
can any one help me how to add these future in this library.
我在其中创建了视图组类 onTouchListener
I have create view group class inside that i have made onTouchListener
我正在尝试在 onTouchListener 内使用 onClickListener
i am trying to get on onClickListener inside onTouchListener
我的问题是当我在单击事件之前触摸左角和右角时，它的旋转视图然后单击起作用，所以当单击起作用时我如何停止它另一个问题是动画停止时也会触发点击事件
有人帮我改进下面的代码吗?
any one help me to improve below code?
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
你需要修改它.修改后，你将实现它(见下面的截图).让我解释一下.
You need to modify it. After modification's, you will achieve it (See Screenshots below). Let me Explain.
1.) std_card_inner.xml
这个xml用于在库的适配器类中对卡片行进行膨胀.我对其进行了修改，添加了两个包含喜欢和不喜欢按钮的图像视图和一个文本视图，以在用户单击任何图像视图时显示喜欢"或不喜欢"文本.
This xml is used to inflate the card row in the adapter class of the library. I have modified it to add two imageviews containing the like and dislike button and a textview to show the text "like" or "dislike" when user clicks any imageview.
<RelativeLayout
android:id="@+id/inner_relative"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/title"
style="@android:style/TextAppearance.Large.Inverse"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/card_bg"
android:padding="10dp"
android:textColor="@android:color/primary_text_light"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Title" />
<View
android:id="@+id/divider_title"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="@id/title"
android:background="@color/card_outline" />
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_below="@id/divider_title"
android:scaleType="centerCrop"
tools:src="@drawable/picture1" />
<View
android:id="@+id/divider_bottom"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_below="@id/image"
android:background="@color/card_outline" />
<View
android:layout_width="fill_parent"
android:layout_height="10dp"
android:layout_alignBottom="@+id/image_1"
android:layout_below="@+id/divider_bottom"
android:background="@color/card_bg" />
<TextView
android:id="@+id/description"
style="@android:style/TextAppearance.Inverse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/image_2"
android:layout_alignParentLeft="true"
android:layout_below="@id/image"
android:layout_toLeftOf="@+id/btn_sep_1"
android:ellipsize="end"
android:fontFamily="sans-serif-condensed"
android:gravity="center_vertical"
android:lines="1"
android:padding="10dp"
android:textColor="@android:color/secondary_text_light"
tools:text="This is the description, it is a long description, as you can see" />
<View
android:id="@+id/btn_sep_1"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_alignBottom="@+id/image_1"
android:layout_below="@id/image"
android:layout_marginTop="7dp"
android:layout_toLeftOf="@+id/image_1"
android:background="#ccc" />
<ImageButton
android:id="@+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/image"
android:layout_toLeftOf="@+id/btn_sep_2"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp"
android:src="@drawable/camera" />
<View
android:id="@+id/btn_sep_2"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_alignBottom="@id/image_1"
android:layout_below="@id/image"
android:layout_marginTop="7dp"
android:layout_toLeftOf="@+id/image_2"
android:background="#ccc" />
<ImageButton
android:id="@+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/image"
android:background="?android:attr/selectableItemBackground"
android:padding="10dp"
android:src="@drawable/people" />
</RelativeLayout>
<LinearLayout
android:id="@+id/like_dislike"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/inner_relative"
android:background="@android:color/white"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp" >
<ImageView
android:id="@+id/like"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="10dp"
android:src="@drawable/ic_like" />
<ImageView
android:id="@+id/dislike"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:src="@drawable/ic_dislike" />
</LinearLayout>
<TextView
android:id="@+id/like_dislike_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/like_dislike"
android:background="#fff"
android:gravity="center"
android:textColor="#000000" />
</RelativeLayout>
2.) SimpleCardStackAdapter.java
这是卡的适配器.我已经修改它为喜欢和不喜欢 imageview 和一个 textview 添加点击侦听器来显示文本.当用户单击喜欢"按钮时，我在卡片模型中添加了一个布尔变量，用于存储喜欢/不喜欢值.喜欢为真，不喜欢为假.
This is the adapter for the cards. I have modified it to add the click listeners for both like and dislike imageview and a textview to show the text. When user clicks like button, i have added a boolean variable in the card model which stores the like/dislike value. True for like and false for dislike.
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
最后，我在这里添加了存储喜欢/不喜欢值的布尔变量.
Finally, here I have added that boolean variable which stores the value for like/dislike.
private boolean isLike = false;
public boolean isLike() {
return isLike;
}
public void setLike(boolean isLike) {
this.isLike = isLike;
}
这是最终结果:
屏幕截图 1
截图 2
这篇关于滑动选择安卓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
