问题描述
我想使视图像下面的图片...刷卡ANDROID中进行选择。
我发现一个库GitHub上:
https://github.com/kikoso/Swipeable-Cards
http://grishma102.blogspot.in/2014/04/tinder-app-like-control-with-animation.html
但在此lib中有没有选项来显示图像的喜欢或 NOPE 过卡,就像在展示上图
任何一个可以帮助我如何在这个库中添加这些未来。
EDITED二〇一四年十月十日
我已创建视图组类中,我取得了 onTouchListener
我试图让 onClickListener 里面的 onTouchListener
我的问题是,当我点击事件之前触及到左,右上角有一段时间它的旋转视图,然后单击是工作,我这样怎么阻止它的时候点击是工作另一个问题是,当动画停止其也火click事件
任何一个可以帮助我提高低于code?
this.imageContainerLayout.setOnTouchListener(新OnTouchListener(){
专用长startClickTime;
私人浮动X1;
私人浮动Y1;
私人浮动X2;
私人浮动Y2;
私人浮动_dx;
私人浮动_dy;
@覆盖
公共布尔onTouch(视图V,MotionEvent事件){
x_cord =(int)的event.getRawX();
y_cord =(int)的event.getRawY();
Log.e(开始x_cord - >中+ x_cord,y_cord --->中+ y_cord);
布尔defaultResult = v.onTouchEvent(事件);
开关(event.getAction()){
案例MotionEvent.ACTION_DOWN:
X =(int)的event.getRawX();
Y =(INT)event.getRawY();
this.startClickTime = Calendar.getInstance()
.getTimeInMillis();
X1 = event.getRawX();
Y1 = event.getRawY();
返回true;
案例MotionEvent.ACTION_MOVE:
x_cord =(int)的event.getRawX(); //更新更多的
//平滑的动画。
y_cord =(int)的event.getRawY();
Log.e(动x_cord - >中+ x_cord,y_cord --->中+ y_cord);
CardView_new.this.setX(event.getRawX() - X);
CardView_new.this.setY(event.getRawY() - Y);
如果(x_cord> = screenCenter){
/ **
*旋转图像
* * /
CardView_new.this
.setRotation((浮动)(0.02454369260617026D *(x_cord - screenCenter)));
如果(x_cord>(screenCenter +(screenCenter / 2))){
buttonLike.setAlpha(1);
buttonDislike.setAlpha(0);
如果(x_cord>(WINDOWWIDTH - (screenCenter / 4))){
喜欢= 2;
moveIs =真;
} 其他 {
喜欢= 0;
moveIs =真;
}
} 其他 {
喜欢= 0;
buttonLike.setAlpha(0);
moveIs = FALSE;
}
buttonDislike.setAlpha(0);
} 其他 {
//旋转
/ **
*旋转图像
* * /
CardView_new.this
.setRotation((浮动)(0.02454369260617026D *(x_cord - screenCenter)));
如果(x_cord≤(screenCenter / 2)){
buttonDislike.setAlpha(1);
buttonLike.setAlpha(0);
如果(x_cord≤(screenCenter / 4)){
喜欢= 1;
moveIs =真;
} 其他 {
喜欢= 0;
moveIs =真;
}
} 其他 {
喜欢= 0;
buttonDislike.setAlpha(0);
moveIs = FALSE;
}
buttonLike.setAlpha(0);
}
返回true;
案例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;
长L = Calendar.getInstance()。getTimeInMillis()
- this.startClickTime;
如果((1-&所述; 400L)
&功放;&安培;距离(X1,Y1,X2,Y2)所述; MAX_CLICK_DISTANCE){
Log.e(启动活动,启动活动);
CardView_new.this.setX(0);
CardView_new.this.setY(0);
CardView_new.this.setRotation(0);
如果(moveIs = FALSE){
意图I =新的意图((活动)的getContext()
DetailsActivity.class);
((活动)的getContext())startActivity(i)中。;
}
返回true;
}否则,如果(喜欢== 0){
CardView_new.this.setX(0);
CardView_new.this.setY(0);
CardView_new.this.setRotation(0);
如果(moveIs){
moveIs =真;
返回true;
} 其他 {
moveIs = FALSE;
返回false;
}
}否则,如果(喜欢== 1){
parentView.removeView(CardView_new.this);
CardView_new.this.mOnCardDimissedDelegate
.onLike(CardView_new.this);
Log.e(喜欢== 1,喜欢== 1);
moveIs =真;
返回true;
}否则,如果(喜欢== 2){
parentView.removeView(CardView_new.this);
CardView_new.this.mOnCardDimissedDelegate
.onDislike(CardView_new.this);
Log.e(喜欢== 2,喜欢== 2);
moveIs =真;
返回true;
}
默认:
返回false;
}
}
});
我已经使用这个库:的https: //github.com/kikoso/Swipeable-Cards
您需要修改它。经过修改的,你会实现它(见下面截图)。让我来解释一下。
1。)std_card_inner.xml
此XML用于膨胀的适配器类的库卡行。我已经修改了它添加含有喜欢和讨厌按钮和一个TextView来显示文本喜欢或不喜欢,当用户点击任何ImageView的2 imageviews。
< RelativeLayout的
机器人:ID =@ + ID / inner_relative
机器人:layout_width =WRAP_CONTENT
机器人:layout_height =WRAP_CONTENT>
<的TextView
机器人:ID =@ + ID /标题
风格=@安卓风格/ TextAppearance.Large.Inverse
机器人:layout_width =FILL_PARENT
机器人:layout_height =WRAP_CONTENT
机器人:背景=@色/ card_bg
机器人:填充=10dp
机器人:文字颜色=@机器人:彩色/ primary_text_light
机器人:TEXTSIZE =24sp
机器人:TEXTSTYLE =黑体
工具:文本=标题/>
<查看
机器人:ID =@ + ID / divider_title
机器人:layout_width =FILL_PARENT
机器人:layout_height =2DP
机器人:layout_below =@ ID /标题
机器人:背景=@色/ card_outline/>
< ImageView的
机器人:ID =@ + ID /图像
机器人:layout_width =WRAP_CONTENT
机器人:layout_height =WRAP_CONTENT
机器人:layout_alignWithParentIfMissing =真
机器人:layout_below =@ ID / divider_title
机器人:scaleType =centerCrop
工具:SRC =@可绘制/图片1/>
<查看
机器人:ID =@ + ID / divider_bottom
机器人:layout_width =FILL_PARENT
机器人:layout_height =2DP
机器人:layout_below =@ ID /图像
机器人:背景=@色/ card_outline/>
<查看
机器人:layout_width =FILL_PARENT
机器人:layout_height =10dp
机器人:layout_alignBottom =@ + ID / IMAGE_1
机器人:layout_below =@ + ID / divider_bottom
机器人:背景=@色/ card_bg/>
<的TextView
机器人:ID =@ + ID /说明
风格=@安卓风格/ TextAppearance.Inverse
机器人:layout_width =WRAP_CONTENT
机器人:layout_height =WRAP_CONTENT
机器人:layout_alignBottom =@ + ID / IMAGE_2
机器人:layout_alignParentLeft =真
机器人:layout_below =@ ID /图像
机器人:layout_toLeftOf =@ + ID / btn_sep_1
机器人:ellipsize =结束
机器人:fontFamily中=无衬线,凝聚
机器人:重力=center_vertical
机器人:行=1
机器人:填充=10dp
机器人:文字颜色=@机器人:彩色/ secondary_text_light
工具:文本=这说明,这是一个长期的描述,你可以看到/>
<查看
机器人:ID =@ + ID / btn_sep_1
机器人:layout_width =1DP
机器人:layout_height =0dp
机器人:layout_alignBottom =@ + ID / IMAGE_1
机器人:layout_below =@ ID /图像
机器人:layout_marginTop =7DP
机器人:layout_toLeftOf =@ + ID / IMAGE_1
机器人:后台=#CCC/>
<的ImageButton
机器人:ID =@ + ID / IMAGE_1
机器人:layout_width =WRAP_CONTENT
机器人:layout_height =WRAP_CONTENT
机器人:layout_below =@ ID /图像
机器人:layout_toLeftOf =@ + ID / btn_sep_2
机器人:背景=机器人:ATTR / selectableItemBackground
机器人:填充=10dp
机器人:SRC =@可绘制/摄像机/>
<查看
机器人:ID =@ + ID / btn_sep_2
机器人:layout_width =1DP
机器人:layout_height =0dp
机器人:layout_alignBottom =@ ID / IMAGE_1
机器人:layout_below =@ ID /图像
机器人:layout_marginTop =7DP
机器人:layout_toLeftOf =@ + ID / IMAGE_2
机器人:后台=#CCC/>
<的ImageButton
机器人:ID =@ + ID / IMAGE_2
机器人:layout_width =WRAP_CONTENT
机器人:layout_height =WRAP_CONTENT
机器人:layout_alignParentRight =真
机器人:layout_below =@ ID /图像
机器人:背景=机器人:ATTR / selectableItemBackground
机器人:填充=10dp
机器人:SRC =@可绘制/人/>
< / RelativeLayout的>
<的LinearLayout
机器人:ID =@ + ID / like_dislike
机器人:layout_width =match_parent
机器人:layout_height =WRAP_CONTENT
机器人:layout_below =@ ID / inner_relative
机器人:背景=@机器人:彩色/白
机器人:重力=中心
机器人:方向=横向
机器人:填充=10dp>
< ImageView的
机器人:ID =@ + ID /像
机器人:layout_width =50dp
机器人:layout_height =50dp
机器人:layout_marginRight =10dp
机器人:SRC =@可绘制/ ic_like/>
< ImageView的
机器人:ID =@ + ID /不喜欢
机器人:layout_width =50dp
机器人:layout_height =50dp
机器人:layout_marginLeft =10dp
机器人:SRC =@可绘制/ ic_dislike/>
< / LinearLayout中>
<的TextView
机器人:ID =@ + ID / like_dislike_text
机器人:layout_width =match_parent
机器人:layout_height =WRAP_CONTENT
机器人:layout_below =@ ID / like_dislike
机器人:后台=#FFF
机器人:重力=中心
机器人:文字颜色=#000000/>
< / RelativeLayout的>
2。)SimpleCardStackAdapter.java
这是针对卡适配器。我已经修改了它增加点击监听都喜欢和不喜欢的ImageView和一个TextView来显示文本。当用户点击按钮一样,我加在显卡型号存储的喜欢/不喜欢值的布尔变量。适用于像假的反感。
包com.andtinder.view;
进口android.content.Context;
进口android.view.LayoutInflater;
进口android.view.View;
进口android.view.ViewGroup;
进口android.widget.ImageView;
进口android.widget.TextView;
进口com.andtinder.R;
进口com.andtinder.model.CardModel;
公共final类SimpleCardStackAdapter扩展CardStackAdapter {
公共SimpleCardStackAdapter(上下文mContext){
超(mContext);
}
@覆盖
公共查看getCardView(INT位置,最终CardModel模型,视图convertView,ViewGroup中父){
如果(convertView == NULL){
LayoutInflater充气= LayoutInflater.from(的getContext());
convertView = inflater.inflate(R.layout.std_card_inner,父母,假);
断言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());
最后的TextView like_dislike_text =((TextView中)convertView.findViewById(R.id.like_dislike_text));
如果(model.isLike())
like_dislike_text.setText(喜欢);
其他
like_dislike_text.setText(不喜欢);
((ImageView的)convertView.findViewById(R.id.like))。setOnClickListener(新View.OnClickListener(){
@覆盖
公共无效的onClick(视图v){
// TODO自动生成方法存根
model.setLike(真正的);
like_dislike_text.setText(喜欢);
}
});
((ImageView的)convertView.findViewById(R.id.dislike))。setOnClickListener(新View.OnClickListener(){
@覆盖
公共无效的onClick(视图v){
// TODO自动生成方法存根
model.setLike(假);
like_dislike_text.setText(不喜欢);
}
});
返回convertView;
}
}
3。)CardModel.java
最后,在这里我也补充说,存储的喜欢/不喜欢的值布尔变量。
私人布尔isLike = FALSE;
公共布尔isLike(){
返回isLike;
}
公共无效setLike(布尔isLike){
this.isLike = isLike;
}
这是最后的结果是:
截图1
截图2
I want to make view like below image... swipe to choose in ANDROID.
i found one library on github:
https://github.com/kikoso/Swipeable-Cards
http://grishma102.blogspot.in/2014/04/tinder-app-like-control-with-animation.html
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.
EDITED 10-10-2014
I have create view group class inside that i have made onTouchListener
i am trying to get on onClickListener inside onTouchListener
my issue is when i am touch on to left and right corner before click event some time its rotate view then click is work, so how i stop it when click is workanother issue is when animation stop its also fire click event
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;
}
}
});
I have used this library: 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
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
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;
}
This is the final result:
Screenshot 1
Screenshot 2
这篇关于刷卡要选择Android的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!