Question

I am trying to modify the TouchListView component to allow me to drag an item from a list view over another view, to create a drag and drop selection system. The user will drag a list item and release it to indicate the selection.

So far I have modified the onDrop method of the DropListener class to pass along the MotionEvent. And I am using the getY() method of the motion even to determine if the user dropped the dragged view over the image view. I am using the raw value of getY() and if it is less than -50 I am accepting that as a valid drop.

But I am concerned, that this is a rather kludgy solution, and prone to errors. Is there a better way to determine when the user has released over the target view area? Are there cases in which i cannot simply look for a negative number? Is there a way to actually see what view lies beneath a given set of X/Y coordinates?

Please note the attached picture of the layout in-progress.

Answer 1

Here is the solution that i came up with that worked.

package com.commonsware.cwac.tlv.demo;

import java.util.ArrayList;
import java.util.Arrays;

import android.app.ListActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.commonsware.cwac.tlv.TouchListView;

public class TouchListViewDemo extends ListActivity {
    private static String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
                                                                    "consectetuer", "adipiscing", "elit", "morbi", "vel",
                                                                    "ligula", "vitae", "arcu", "aliquet", "mollis",
                                                                    "etiam", "vel", "erat", "placerat", "ante",
                                                                    "porttitor", "sodales", "pellentesque", "augue", "purus"};
    private TouchListView tlv;
    private IconicAdapter adapter=null;
    private ArrayList<String> array=new ArrayList<String>(Arrays.asList(items));

    private TextView target_name_display;
    private ImageView target;

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);

        tlv = (TouchListView)getListView();
        adapter=new IconicAdapter();
        setListAdapter(adapter);

        tlv.setDropListener(onDrop);
        tlv.setRemoveListener(onRemove);


        target = (ImageView) findViewById(R.id.drag_target_area);
        target_name_display = (TextView) findViewById(R.id.name_text);
        Log.d("TARGET", "Target:"+target);
        Log.d("TARGET", "TargeName Displayt:"+target_name_display);


        ViewTreeObserver vto = target.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                target.getViewTreeObserver().removeGlobalOnLayoutListener(this); 
                int height = target.getHeight();
                int top = target.getTop();
                int tlv_y_position = tlv.getTop();
                Log.d("ON LAYOUT", "Height:"+ height+ " top:"+top+" tlv_y_position:"+tlv_y_position);               
            }
        });

    }

    private TouchListView.DropListener onDrop=new TouchListView.DropListener() {
        @Override
        public void drop(int from, int to, MotionEvent e) {
            Log.i("TOUCH VIEW DEMO", "From: "+from + "  TO: "+to );
            Log.i("TOUCH VIEW DEMO", "Event: "+e.getY());
                String item=adapter.getItem(from);

                //
                int[] target_coords = new int[2]; 
                int[] tlv_coords = new int[2]; 
                target.getLocationInWindow(target_coords);
                tlv.getLocationInWindow(tlv_coords);
                int height = target.getMeasuredHeight();
                int negative_top = -1*(tlv_coords[1]-target_coords[1]);
                Log.d("TOUCH VIEW DEMO", " negative_top:"+negative_top + " e.getY():"+e.getY() + " heigh:"+height);
                Log.d("TOUCH VIEW DEMO", "Target Coords:"+ target_coords[0] +","+ target_coords[1]);
                Log.d("TOUCH VIEW DEMO", "Tlv Coords:"+ tlv_coords[0] +","+ tlv_coords[1]);
                if(e.getY() > negative_top && e.getY() < negative_top + height){
                    target_name_display.setText(item.toString());
                    adapter.remove(item);
                }
                //adapter.remove(item);
                //adapter.insert(item, to);
        }
    };

    private TouchListView.RemoveListener onRemove=new TouchListView.RemoveListener() {
        @Override
        public void remove(int which) {
                adapter.remove(adapter.getItem(which));
        }
    };

    class IconicAdapter extends ArrayAdapter<String> {
        IconicAdapter() {
            super(TouchListViewDemo.this, R.layout.row2, array);
        }

        public View getView(int position, View convertView,
                                                ViewGroup parent) {
            View row=convertView;

            if (row==null) {                                                    
                LayoutInflater inflater=getLayoutInflater();

                row=inflater.inflate(R.layout.row2, parent, false);
            }

            TextView label=(TextView)row.findViewById(R.id.label);

            label.setText(array.get(position));

            return(row);
        }
    }
}

The code includes a lot of comments and varaibles getting calculated each time, which I will refactor out. But you can modify the TouchListView demo to make this work on your own.

Here is the main.xml layout I used.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <RelativeLayout
        android:id="@+id/drag_here_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_weight="1.0"
        android:background="@drawable/matches_current_match_bg"
        android:paddingBottom="30dp" >

        <TextView
            android:id="@+id/drag_here_text"            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="15dp"
            android:text="DRAG HERE"
            android:textSize="14dp" />

        <ImageView
            android:id="@+id/drag_target_area"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/drag_here_text"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:background="#00000000"
            android:scaleType="fitXY"
            android:src="@drawable/match_drag_here_target" />
        <TextView
            android:id="@+id/name_text"            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignTop="@id/drag_target_area"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="15dp"
            android:text=""
            android:textSize="14dp" />
    </RelativeLayout>
<com.commonsware.cwac.tlv.TouchListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tlv="http://schemas.android.com/apk/res/com.commonsware.cwac.tlv.demo"

    android:id="@android:id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:drawSelectorOnTop="false"
    tlv:normal_height="64dip"
    tlv:grabber="@+id/icon"
    tlv:remove_mode="slideRight"
    android:layout_weight="1.0"
/>
</LinearLayout>

Thanks again CommonsWare for your excellent TouchListView Widget.