lundi 1 février 2016

Conditional Drag & Drop of images

As I am new to this I will ask a question that maybe for many of you is very simple, but me, I have followed tutorials all day in order to understand how this works, but unfortunately I wasn't that lucky.

I'm building an children app where they have to drag an image of an animal over the corresponding shadow. Therefore in the example below they would have to drag the image of the cow over the shadow of the cow.

If they drag it over a wrong image there will be a sound notice saying so, if they drag it over the correct image the image will replace the shadow and there will e a confirmation sound.

Up till now I managed to code the part where I drag the cow image over any of the shadows and replaces them. I would like to replace only when it's the correct one.

I will add below my code and hopefully someone will be able to help me!

This is the xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/animals_types"
    android:textSize="25sp"
    android:id="@+id/gamesCategory"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/games_cow"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:textSize="35sp"
    android:id="@+id/text_cow"
    android:layout_below="@+id/gamesCategory"
    android:layout_centerHorizontal="true" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/games_cow"
    android:layout_below="@+id/text_cow"
    android:layout_centerHorizontal="true"
    android:maxHeight="150dp"
    android:maxWidth="150dp"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:id="@+id/games_cow_item" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/games_cow_shadow"
    android:maxHeight="150dp"
    android:maxWidth="150dp"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:layout_centerHorizontal="true"
   android:layout_marginLeft="20dp"
    android:layout_marginStart="20dp"
    android:layout_below="@+id/games_cow_item"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:id="@+id/games_cow_shadow"/>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/games_pig_shadow"
    android:maxHeight="130dp"
    android:maxWidth="130dp"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:layout_centerHorizontal="true"
    android:layout_marginRight="20dp"
    android:layout_marginEnd="20dp"
    android:layout_below="@+id/games_cow_item"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:id="@+id/games_pig_shadow"/>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/games_horse_shadow"
    android:maxHeight="150dp"
    android:maxWidth="150dp"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:layout_centerHorizontal="true"
    android:layout_margin="20dp"
    android:layout_below="@+id/games_cow_shadow"
    android:id="@+id/games_horse_shadow"/>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="NEXT"
    android:id="@+id/button5"
    android:layout_below="@+id/games_horse_shadow"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BACK"
    android:id="@+id/button6"
    android:layout_alignTop="@+id/button5"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

</RelativeLayout>

This is the Java:

 package com.gadgetcatch.firstwords;

import android.content.ClipData;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

/**
 * Created by Alex on 2/1/2016.
 */
public class GamesAnimals extends AppCompatActivity {

    private ImageView option, choice1, choice2, choice3;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.games_animals);

        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        assert actionBar != null;
        actionBar.setDisplayShowHomeEnabled(true);
        actionBar.setIcon(R.mipmap.ic_launcher);

        //View to drag

        option = (ImageView)findViewById(R.id.games_cow_item);

        //Views to drop unto

        choice1 = (ImageView)findViewById(R.id.games_cow_shadow);
        choice2 = (ImageView)findViewById(R.id.games_pig_shadow);
        choice3 = (ImageView)findViewById(R.id.games_horse_shadow);

        //set touch listener

        option.setOnTouchListener(new ChoiceTouchListener());

        //set drag listeners

        choice1.setOnDragListener(new ChoiceDragListener());
        choice2.setOnDragListener(new ChoiceDragListener());
        choice3.setOnDragListener(new ChoiceDragListener());


    }

    private final class ChoiceTouchListener implements View.OnTouchListener{
        public boolean onTouch(View view, MotionEvent motionEvent){
            if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {

                //setup drag
                ClipData data = ClipData.newPlainText("", "");
                View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);

                //start dragging the item touched
                view.startDrag(data, shadowBuilder, view, 0);

                return true;
            }
            else {
                return false;
            }
        }
    }


    private class ChoiceDragListener implements View.OnDragListener{
        @Override
        public boolean onDrag(View v, DragEvent event) {
            //handle drag events
            switch (event.getAction()) {
                case DragEvent.ACTION_DRAG_STARTED:
                    //no action necessary
                    break;
                case DragEvent.ACTION_DRAG_ENTERED:
                    //no action necessary
                    break;
                case DragEvent.ACTION_DRAG_EXITED:
                    //no action necessary
                    break;
                case DragEvent.ACTION_DROP:
                    //handle the dragged view being dropped over a drop view - asta de deasupra
                    //handle the dragged view being dropped over a target view -asta de jos
                    View view = (View) event.getLocalState();
                    //stop displaying the view where it was before it was dragged
                    view.setVisibility(View.INVISIBLE);
                    //view dragged item is being dropped on
                    ImageView dropTarget = (ImageView) v;
                    //view being dragged and dropped
                    ImageView dropped = (ImageView) view;
                    //update the image in the target view to reflect the data being dropped
                    dropTarget.setImageDrawable(dropped.getDrawable());

                    break;
                case DragEvent.ACTION_DRAG_ENDED:
                    //no action necessary
                    break;
                default:
                    break;
            }

            return true;
        }
    }
}

And here is an image of the .xml in case I have't explained myself good enough.

Thanks in advance for any advice! cow_image

Aucun commentaire:

Enregistrer un commentaire