滑动选择Android

Question

我想制作如下图像的视图...轻扫以在ANDROID中选择.

我在github上找到了一个库:

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

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

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

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

---

编辑于10-10-2014

---

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

我试图得到onClickListener内onTouchListener

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

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

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;
                }
            }
        }); 

Answer 1

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

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

1.)std_card_inner.xml

此xml用于对库的适配器类中的卡行进行充气.我已修改它以添加两个包含喜欢和不喜欢按钮的图像视图和textview,以在用户单击任何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添加了点击监听器来显示文本.当用户点击按钮时,我在卡片模型中添加了一个布尔变量,用于存储喜欢/不喜欢的值.真的是喜欢和假的不喜欢.

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

最后,在这里我添加了一个boolean变量,它存储了like/dislike的值.

private boolean isLike = false;
public boolean isLike() {
    return isLike;
}

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

这是最终结果:

截图1

截图2