How to allow user to drag and drop an image within a LinearLayout

问题

I have a LinearLayout set up which has an image within it.

My XML layout:

<LinearLayout
        android:id="@+id/llColorSpect"
        android:layout_width="match_parent"
        android:layout_height="@dimen/color_scheme_height"
        android:orientation="vertical"
        android:background="@drawable/colorspect"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="@dimen/seek_bar_margin"
        android:layout_below="@+id/tvBGColor" >
        <RelativeLayout
            android:id="@+id/rlColorSpect"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <ImageView
                android:id="@+id/ivSquare"
                android:layout_width="@dimen/title_text_pad"
                android:layout_height="@dimen/title_text_pad"
                android:layout_alignParentBottom="true"
                android:scaleType="fitXY"
                android:src="@drawable/esquare" />
        </RelativeLayout>
    </LinearLayout>

It displays a color spectrum (the layout background) with a square box (bottom left by default) inside it as shown in the following:

How can I allow the user to drag and drop the small square image within the layout ONLY and also retrieve the X and Y values?
Whenever, the user presses inside the layout, the square moves to that coordinate within the layout. How can I do that?
I want to then use those X and Y values to get the HEX/RGB values. How would I be able to accomplish it?

If someone can help me with either or all, I would really really appreciate it.

回答1:

Here is a colorpicker widget for your site. I dont know if this is exactly what your looking for but I definetly hope it helps!

<div style="font-family:Arial,Helvetica,sans-serif;border:solid 1px 
#cccccc;position:absolute;width:240px;height:326px;background: #ffffff;-moz-box-shadow:0 0 
6px rgba(0,0,0,.25);-webkit-box-shadow: 0 0 6px rgba(0,0,0,.25);box-shadow:0 0 6px 
rgba(0,0,0,.25);-moz-border-radius: 5px;-webkit-border-radius:5px;border-radius:5px;">
<div style="background-color:#2d6ab4;position:absolute;top:0px;left:0px; width:100%; 
height:22px;text-align:center;padding-top:2px;font-weight:bold;border-top-right-
radius:5px;border-top-left-radius:5px;"><a style="text-decoration:none;color:#ffffff;" 
target="_blank" href="">Color Picker</a></div><script 
src="http://widget.colorcodehex.com/color-picker/abcdef.html" type="text/javascript">
</script></div>

回答2:

How can I allow the user to drag and drop the small square image within the layout ONLY and also retrieve the X and Y values?

Check out this tutorial for an idea on drag and drop of a ui element

Whenever, the user presses inside the layout, the square moves to that coordinate within the layout. How can I do that?

Furthermore from the tutorial, llColorSpect can also implement a MotionEvent.ACTION_DOWN event to move ivSquare to the x,y of the MotionEvent

I want to then use those X and Y values to get the HEX/RGB values. How would I be able to accomplish it?

This is going to be more tricky. You will require some lookup that translates the x,y values into the HEX or RGB values. You can get View.getMeasuredWidth() and View.getMeasuredHeight() of llColorSpect to find out the dimensions that it appears on screen. Say for example the width of the spectrum range is from 0-1000 and llColorSpect's measured distance is from 0-3000, user clicks 300, then you'll know that spectrumLookup(300/3) == 100 so you'd use the spectrum color @ 100.

Good luck!

回答3:

I suggest using a Canvas for your image as this would allow you to draw the square to select the colour over the colour spectrum.

The code below uses a canvas that overrides onTouchEvent and will give you be able to give you the coordinates of where the user presses.

 public class CanvasView extends View {

    private Bitmap bitmap;
    private Bitmap square;
    private float mScaleFactor = 1f;
    int x = 0;
    int y = 0;

    public CanvasView(Context c) {
        super(c);
        bitmap= BitmapFactory.decodeResource(c.getResources(), R.drawable.colour);
        square = BitmapFactory.decodeResource(c.getResources(), R.drawable.square);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.scale(mScaleFactor, mScaleFactor);
        canvas.drawBitmap(bitmap, 0, 0, null);
        canvas.drawBitmap(square, x, y, null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        float x = event.getX();
        float y = event.getY();
        Log.d("x and y", "X: " + x + " Y: " + y);
        int pixel = bitmap.getPixel((int)x,(int) y);
        int redValue = Color.red(pixel);
        int blueValue = Color.blue(pixel);
        int greenValue = Color.green(pixel);
        Log.d("Colours","R:" +redValue +" B:" + blueValue + " G:" +greenValue);

        //Draw onto the square onto image
        this.x = (int) x;
        this.y = (int) y;
        invalidate();


        return true;
    }

}

To use this CanvasView class simply do this or edit it for your own layouts:

    CanvasView canvasView = new CanvasView(this);
    LinearLayout linearlayout = (LinearLayout) findViewById(R.id.linearlayout);
    linearlayout.addView(canvasView);

Finally the function to map the x and y to a colour. Simply read the pixel colour of the coordinates.

来源：https://stackoverflow.com/questions/21213027/how-to-allow-user-to-drag-and-drop-an-image-within-a-linearlayout

标签

java

android

android-layout

android-xml