如何允許用戶在LinearLayout中拖放圖像

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> 

它顯示與在其內部的方形箱（底部默認左）一個色譜（佈局背景）作爲顯示在下面：

• 我該如何允許用戶在佈局ONLY內拖放小方形圖像 ，並檢索X和Y值？
• 每當用戶在佈局內按下時，廣場將移動到 ，這些佈局將在佈局內協調。我怎樣才能做到這一點？
• 我想要使用這些X和Y值來獲得HEX/RGB值。 我將如何能夠完成它？

如果有人可以幫助我或兩個人，我真的很感激。

Answer 1

這是您的網站的colorpicker部件。我不知道這是不是你想要的，但我希望它能幫助你！

<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到的MotionEvent

的x,y我想，然後使用這些X和Y值來獲得HEX/RGB值。我將如何能夠完成它？

• 這會更棘手。您需要進行一些查找，將x,y值轉換爲HEX或RGB值。您可以獲得View.getMeasuredWidth()和View.getMeasuredHeight()的llColorSpect以找出它在屏幕上顯示的尺寸。舉例來說，光譜範圍的寬度是從0-1000和llColorSpect's測量的距離是從0-3000，用戶點擊300，那麼你就知道spectrumLookup(300/3) == 100，所以你會使用光譜顏色@ 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的顏色映射。只需讀取座標的像素顏色即可。