Question

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

enter image description here

我在github上找到了一个库：

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

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

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

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

EDITED 10-10-2014

我已经创建了一个视图组类，我已经创建了 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;
                }
            }
        });

Answer 1

我使用过此库：https://github.com/kikoso/Swipeable-Cards

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

1。）std_card_inner.xml

此xml用于对库的适配器类中的卡行进行充气。我已修改它以添加两个包含喜欢和不喜欢按钮的图像视图和一个textview来显示文本＆＃34;喜欢＆＃34;或者＆＃34;不喜欢＆＃34;当用户点击任何图像视图时。

<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

最后，我在这里添加了一个布尔变量，它存储了like / dislike的值。

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

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

这是最终结果：

屏幕截图1

enter image description here

屏幕截图2

enter image description here

Answer 2

在Swipecard库的帮助下，我制作了像tinder swipe card animation这样的UI。

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

Answer 3

我得到的结果是喜欢和不像按钮将图片翻转为左和正确。

使用此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获取此样本。

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

Answer 5

创建四个新的全局浮点变量x_cord，y_cord，x_cordIn＆amp; 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;
        }
    }
});

Answer 6

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

滑动选择Android

EDITED 10-10-2014

6 个答案: