Проведите по экрану, чтобы выбрать Android

Ответ 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

Это адаптер для карт. Я изменил его, чтобы добавить прослушиватели кликов как для похожих изображений, так и для них, а также для текстового просмотра текста. Когда пользователь нажимает кнопку, я добавил логическую переменную в модель карты, которая сохраняет значение типа/неприязни. Истина для подобных и ложных для неприязни.

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

Ответ 2

С помощью Swipecard, я сделал UI, например, анимационную салфетку.

Вы можете скачать пример здесь, где я объяснил шаг за шагом там.

Ответ 3

Я получил результат для как и в отличие от, чтобы перевернуть изображения на влево и вправо.. p >

Используйте Проведите по экранам, например, образец прокрутки tinder.

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

Используйте просмотрщик и измените 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

Создайте четыре новые глобальные переменные float 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

Пожалуйста, используйте библиотеку PlaceHolderView. Учебник для этого здесь → TinderSwipeExample

Ответ 7

Используйте RossDeckView, облегченный, позволяющий прокручивать в любом направлении, которое вы хотели бы.