Swipe-touch interface for a GridView of Buttons

Question

Does anybody know (or know someone else) how to implement the swipe touch interface for a GridView of Android-displayable widgets (i.e. Buttons, ImageView images, and etc.) as opposed to just a GridView of say, a String array? A great example would be Bejeweled or Candy Crush in how the user is able to swap tiles with swipes.

Here's my post in more detail.

Because, I am currently working on an app based on one of the classic puzzle games, Puzzle-15, and I am using direction Buttons (up, down, left, and right) to swap numbered-tiles (Button objects) on the board (GridView)...

Here's my app.

Thanks a bunch!

Answer 1

Ok so for the transparent view, here is what I would do:

xml layout (I put my custom view on the button):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test Button"/>

<com.example.trist_000.teststack.CustomView
    android:id="@+id/customv"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

You need a custom view that will handle the swipe:

public class CustomView extends View implements View.OnTouchListener {


float save_x = 0;
float save_y = 0;

@Override
public boolean onTouch(View v, MotionEvent event) {


    if (mSwipeInterface == null)
        return false;

    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        save_x = event.getX();
        save_y = event.getY();
    }
    if (event.getAction() == MotionEvent.ACTION_UP) {
        float difx = event.getX() - save_x;
        float dify = event.getY() - save_y;

        if (IsBigger(difx, dify)) {
            if (difx > -30 && difx < 30)return false;
            if (difx > 0){
                mSwipeInterface.swipe(SwipeEnum.RIGHT);
            }
            else{
                mSwipeInterface.swipe(SwipeEnum.LEFT);
            }
        }
        else{
            if (dify > -30 && dify < 30)return false;
            if (dify > 0){
                mSwipeInterface.swipe(SwipeEnum.DOWN);
            }
            else{
                mSwipeInterface.swipe(SwipeEnum.TOP);
            }
        }


    }
    return true;
}

private boolean IsBigger(float difx, float dify) {
    if (difx < 0) {
        difx *= -1;
    }
    if (dify < 0) {
        dify *= -1;
    }

    if (difx > dify){
        return true;
    }
    return false;
}

public enum SwipeEnum {
    LEFT,
    DOWN,
    RIGHT,
    TOP;
}

interface swipeInterface {
    public void swipe(SwipeEnum swipeEnum);
}

private swipeInterface mSwipeInterface = null;

public void setSwipeListener(swipeInterface swipe) {
    mSwipeInterface = swipe;
}

public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.setOnTouchListener(this);
}

public CustomView(Context context) {
    super(context);
}
}

And in the Main Activity:

public class MainActivity extends Activity {


Button mButton;
CustomView mCustomView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);
    mButton = (Button)findViewById(R.id.button);
    mCustomView = (CustomView)findViewById(R.id.customv);

    mCustomView.setSwipeListener(new CustomView.swipeInterface() {
        @Override
        public void swipe(CustomView.SwipeEnum swipeEnum) {
            if (swipeEnum == CustomView.SwipeEnum.DOWN){
                mButton.setY(200);
            }
            if (swipeEnum == CustomView.SwipeEnum.TOP){
                mButton.setY(0);
            }
            if (swipeEnum == CustomView.SwipeEnum.RIGHT){
                mButton.setX(200);
            }
            if (swipeEnum == CustomView.SwipeEnum.LEFT){
                mButton.setX(0);
            }
        }
    });
}
}

I just put a button, but just put your gridview instead. And replace what I put in the different "if" in the MainActivity with your own logic.

If you have any question about the code let me now.

PS: Algos may not be optimal lol but I tested and it work, you can try ;)