滑动选择安卓答案

【问题标题】：Swipe To Choose Android滑动选择安卓
【发布时间】：2014-09-22 06:20:29
【问题描述】：

我想制作如下图所示的视图...在 ANDROID 中滑动选择。

我在 github 上找到了一个库：

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

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

但是在这个库中，没有选项可以在 CARD 上显示图像 LIKED 或 NOPE，就像在上面的图像中显示的那样

谁能帮我在这个库中添加这些未来。

2014 年 10 月 10 日编辑

我在里面创建了视图组类 onTouchListener

我正在尝试在 onTouchListener 中使用 onClickListener

我的问题是当我在点击事件之前触摸左右角时，它的旋转视图然后点击是有效的，所以当点击有效时我如何停止它另一个问题是当动画停止时它也会触发点击事件

有人帮我改进下面的代码吗？

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

【问题讨论】：

只是为了确认，所以问题不在于如何实现视图，而在于如何保存喜欢或不喜欢的图像？
所以您想要一个库为您完成所有工作，完全符合您的规范，无需修改？祝你好运。
@DhawalSodhaParmar 我的意思是，您想要一些可以为您完成所有工作的东西。您是否尝试过将此功能添加到此库中，或者您是否直接使用 StackOverflow？
听起来就是这样。我没有看到您已经尝试过的任何代码...
如何导入CardContainer 和SimpleCardStackAdapter 的jar 文件？从哪里可以找到罐子？

标签： android android-custom-view

【解决方案1】：

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

你需要修改它。修改后，您将实现它（见下面的截图）。让我解释一下。

1.) std_card_inner.xml

这个 xml 用于在库的适配器类中扩充卡片行。我已经对其进行了修改以添加两个包含喜欢和不喜欢按钮的图像视图和一个文本视图，以在用户单击任何图像视图时显示文本“喜欢”或“不喜欢”。

<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

最后，我在这里添加了存储喜欢/不喜欢值的布尔变量。

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

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

这是最终结果：

截图 1

截图 2

【讨论】：

相应地，你可以在imageview的点击监听器上调用swipe监听器
我想在刷卡时在卡片上显示喜欢和不喜欢的图像...可以吗？
喜欢和不喜欢的图片都在卡片上
如何导入CardContainer 和SimpleCardStackAdapter 的jar 文件？从哪里可以找到罐子？
@RahulGupta：我只是应用你的解决方案。我卡在一个点上，你怎么能在底部的两张卡片之间设置堆栈边距来设置卡片的数量？

【解决方案2】：

在Swipecard库的帮助下，我制作了类似火种刷卡动画的UI。

您可以下载示例here，我在那里一步一步解释。

【讨论】：

如何得到第一张卡的位置，第二张这样的卡。让我知道？根据卡的位置。例如：在列表视图项目位置。同样明智的是，是否有可能在刷卡时从第一张牌到最后一张牌获得牌位

【解决方案3】：

我得到了 like 和 unlike 按钮将图像翻转到 left 和 right 的结果。 p>

使用这个Swipe Cards like tinder swipe Sample。

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 提供此示例。

【讨论】：

【解决方案4】：

使用 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!!!!");
        }
    });

【讨论】：

【解决方案5】：

创建四个新的全局浮点变量 x_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;
        }
    }
});

【讨论】：

【解决方案6】：

使用RossDeckView，一种允许向任何方向滑动的精简版。

【讨论】：