Question

我设置了LinearLayout，其中包含图片。

我的XML布局：

<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>

它在其中显示一个带有方框（默认情况下左下方）的色谱（布局背景），如下所示：

enter image description here

如何让用户拖放小方块图像在布局内，还要检索X和Y值吗？
每当用户按下布局内部时，方块移动到布局中的那个坐标。我该怎么办？
然后我想使用这些X和Y值来获取HEX / RGB值。我怎么能够完成它？

如果有人可以帮助我，我真的很感激。

Answer 1

这是您网站的颜色选择器小部件。我不知道这是不是你想要的，但我绝对希望它有所帮助！

<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>

Answer 2

如何让用户只在布局中拖放小方块图像并检索X和Y值？

查看此tutorial for an idea on drag and drop of a ui element

每当用户按下布局内部时，方块移动到布局中的该坐标。我怎么能这样做？

此外，在教程中，llColorSpect还可以实施MotionEvent.ACTION_DOWN事件，以便将ivSquare移至x,y的{{1}}

我想使用这些X和Y值来获取HEX / RGB值。我怎么能完成它？

这将更加棘手。您需要进行一些查找，将MotionEvent值转换为HEX或RGB值。您可以获取x,y的{{3}}和View.getMeasuredWidth()来查找屏幕上显示的尺寸。例如，频谱范围的宽度为0-1000，llColorSpect测量的距离为0-3000，用户点击300，然后您就会知道llColorSpect's，因此您可以使用频谱color @ 100。

祝你好运！

Answer 3

我建议您使用Canvas作为图像，因为这样可以绘制正方形以选择色谱上的颜色。

下面的代码使用覆盖onTouchEvent的画布，可以为您提供用户按下位置的坐标。

 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;
    }

}

要使用此CanvasView类，只需执行此操作或编辑它以用于您自己的布局：

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

最后将x和y映射到颜色的功能。只需读取坐标的像素颜色即可。

如何允许用户在LinearLayout中拖放图像

3 个答案: