web-dev-qa-db-ja.com

スワイプして選択Android

下の画像のように表示したい... Androidでスワイプして選択します。

enter image description here

githubで1つのライブラリを見つけました：

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

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

しかし、このライブラリには、画像を表示するオプションがありません[〜＃〜]いいね[〜＃〜]または[上の画像のように、CARD上で〜＃〜] 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;
                }
            }
        });
androidandroid-custom-view
16
Dhaval Parmar

私はこのライブラリを使用しました： https://github.com/kikoso/Swipeable-Cards

変更する必要があります。変更後、それを達成します（以下のスクリーンショットを参照）。説明させてください。

1。）std_card_inner.xml

このxmlは、ライブラリのアダプタクラスのカード行を拡張するために使用されます。 「いいね」と「嫌い」ボタンを含む2つのイメージビューと、ユーザーが任意のイメージビューをクリックしたときに「いいね」または「嫌い」というテキストを表示するテキストビューを追加するように変更しました。

<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を追加するように変更しました。ユーザーが「いいね」ボタンをクリックすると、カードモデルに「いいね」/「嫌い」の値を格納するブール変数が追加されました。好きな場合はtrue、嫌いな場合はfalse。

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

13
Rahul Gupta

Swipecard ライブラリの助けを借りて、私はTheTinderスワイプカードアニメーションのようなUIを作成しました。

例をダウンロードできます ここ ここで私はそこに段階的に説明しました。

enter image description here

enter image description here

4
nirav kalola

likeボタンとunlikeボタンで画像をleftおよびright。

これを使用してください TheTinderスワイプサンプルのようなスワイプカード 。

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


    }

このサンプルを提供してくれた@niravkalolaに感謝します。

2
Ted

RossDeckView を使用します。これは、好きな方向にスワイプできるライトなものです。

enter image description here

1
diogobernardino

4つの新しいグローバルフロート変数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;
        }
    }
});
1
Tushski

ビューページャーを使用して、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!!!!");
        }
    });
1
Fco P.